title: React Native combine BottomTab with TopTab
body: <p>I'm trying to add top bar to my app, I already have a bottom tab working but I found it complicated adding the top tab with the bottom tab.. Here's my code:</p>
  <pre><code>import { NavigationContainer, useNavigation  } from '@react-navigation/native';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
  
  const Tab = createBottomTabNavigator();
  const TopTab = createMaterialTopTabNavigator();
  
  const App = () =&gt; {
  return (
  &lt;NavigationContainer&gt;
    &lt;Tab.Navigator &gt;
      &lt;Tab.Screen name=&quot;Post Room&quot; component={PostANewRoomScreen} /&gt;
      &lt;Tab.Screen name=&quot;Rooms&quot; component={HomeScreen} /&gt;
    &lt;/Tab.Navigator&gt;
  &lt;/NavigationContainer&gt;
   );
  }
  
  export const SecondComponent = ()  =&gt; {
  return (
  &lt;NavigationContainer&gt;
    &lt;TopTab.Navigator&gt;
        &lt;TopTab.Screen name=&quot;Settings&quot; component={SettingsScreen} /&gt;
    &lt;/TopTab.Navigator&gt;
  &lt;/NavigationContainer&gt;
   );
  }
  
  export default App;
  </code></pre>
  <p>I think it might be a problem with the export when I change it to SecondComponent It only shows the top bar, I tried doing <code>export default (App,SecondComponent)</code> but it also showed an error</p>