title: React native, routing without a nav menu item
body: <p>I have a drawer and bottom tab nav system on my app which works perfectly, but I"ve come to a point where I have modules where I want a button click to take the user to a page for data entry but I don't want that page on any nav bars, I just need to route to it on button press.</p>
  
  <p>So in App.js i have my existing nav system:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';
  import Splash from './Splash';
  import Login from './src/components/Login/Login';
  import Dashboard from './src/components/Dashboard/Dashboard';
  import Trends from './src/components/Trends/Trends';
  import EnterWeight from './src/components/Dashboard/EnterWeight';
  import Profile from './src/Profile';
  import {createAppContainer, createSwitchNavigator} from 'react-navigation';
  import {createStackNavigator} from 'react-navigation-stack';
  import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
  import { createDrawerNavigator } from 'react-navigation-drawer';
  import Icon from '@expo/vector-icons/Ionicons';
  import * as SQLite from 'expo-sqlite';
  
  const db = SQLite.openDatabase('testDatabase');
  
  const DashboardTabNavigator = createMaterialBottomTabNavigator({
    Dashboard: {screen:Dashboard},
    Trends: {screen:Trends},
    //Profile: {screen:Profile},
    EnterWeight: {screen:EnterWeight}
  },
  {
      barStyle: { backgroundColor: '#000'},
  },
  {
    navigationOptions:({navigation})=&gt;{
      const {routeName} = navigation.state.routes[navigation.state.index]
      return{
        headerTitle:routeName
      }
    }
  }
  );
  
  const DashboardStackNavigator = createStackNavigator({
      DashboardTabNavigator: DashboardTabNavigator
  },
  {
    defaultNavigationOptions:({navigation}) =&gt; {
      return {
        headerLeft: (&lt;Icon style={{paddingLeft:10}} onPress={()=&gt;navigation.openDrawer()} name="md-menu" size={30} /&gt;),
        headerRight: (&lt;Image style={styles.crossLogo} source={require('./src/images/LOGO-cross_only.png')}/&gt;)
      }
    }
  });
  
  const AppDrawerNavigator = createDrawerNavigator({
    Dashboard:{screen:DashboardStackNavigator},
    Logout:{screen:Login}
  });
  
  const AppSwitchNavigator = createSwitchNavigator({
      Login:{screen: Login},
      Dashboard:{screen:AppDrawerNavigator},
  },
  {
    initialRouteName: 'Login',
  });
  
  
  
  export default class MMH_App_Final extends Component{
    render() {
      const App = createAppContainer(AppSwitchNavigator);
      return(
        &lt;App /&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    crossLogo: {
      width:30,
      height:30,
      marginRight:10
    }
  });
  </code></pre>
  
  <p>But on another page I have </p>
  
  <pre><code>&lt;TouchableOpacity 
                  style={styles.recordButton} 
                  onPress={() =&gt; navigate('EnterWeight')}
              &gt;
  </code></pre>
  
  <p>I want to be able to navigate to EnterWeight without registering it in the navbar. How can I do that?</p>