title: react native use create material top tab navigator with bottom tab bar navigator in different pages
body: <p>So I made a bottom tab navigator in the <code>App.js</code> screen and I tried to create a material top tab navigation in another screen <code>settings.js</code></p>
  <p>In <code>settings.js</code> I tried to create a navigation with the same code but shorter. Click between tabs became really slow but swiping worked perfectly. I then read you should put all navigation in one file (<code>App.js</code>) so it won't slow down.</p>
  <p>My question is how do I put a <code>MaterialTopTabNavigator</code> and <code>BottomTabNavigator</code> in one file and then just export the <code>MaterialTopTabNavigator</code> to another screen?</p>
  <p><code>settings.js</code></p>
  <pre><code>const settingsTabs = creatematerialtopTabNavigator ({
            Home:{
              screen: Home,
              navigationOptions:{
                tabBarIcon: ({ focused, tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-home&quot; size={24}  /&gt;
                )
              }
            },
            Inbox:{screen: Inbox,
              navigationOptions:{
                tabBarIcon: ({ tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-mail&quot; size={24} /&gt;
                )
              }
            },
  </code></pre>
  <p><code>App.js</code></p>
  <pre><code>import {createBottomTabNavigator} from 'react-navigation'
          import Icon from 'react-native-vector-icons/Ionicons'
         
          const Tabs = createBottomTabNavigator ({
            Home:{
              screen: Home,
              navigationOptions:{
                tabBarIcon: ({ focused, tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-home&quot; size={24}  /&gt;
                )
              }
            },
            Inbox:{screen: Inbox,
              navigationOptions:{
                tabBarIcon: ({ tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-mail&quot; size={24} /&gt;
                )
              }
            },
            Search:{screen: Search,
              navigationOptions:{
                tabBarIcon: ({ tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-search&quot; size={24} /&gt;
                )
              }
            },
            Favorites:{screen: Favorites,
              navigationOptions:{ 
              tabBarIcon: ({ tintcolor }) =&gt; (
                &lt;Icon name=&quot;ios-heart&quot; size={24} /&gt;
              )
            }
            },
            Settings:{screen: Settings,
              navigationOptions:{ 
                tabBarIcon: ({ tintcolor }) =&gt; (
                  &lt;Icon name=&quot;ios-settings&quot; size={24} /&gt;
                )
              }
            }
          
          }
          });
          
          
          
          export default class App extends Component {
            render() {
          
              return &lt;Tabs /&gt;
            }
          }
  </code></pre>