React native, routing without a nav menu item - react-native

Question

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.
So in App.js i have my existing nav system:
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})=>{
const {routeName} = navigation.state.routes[navigation.state.index]
return{
headerTitle:routeName
}
}
}
);
const DashboardStackNavigator = createStackNavigator({
DashboardTabNavigator: DashboardTabNavigator
},
{
defaultNavigationOptions:({navigation}) => {
return {
headerLeft: (<Icon style={{paddingLeft:10}} onPress={()=>navigation.openDrawer()} name="md-menu" size={30} />),
headerRight: (<Image style={styles.crossLogo} source={require('./src/images/LOGO-cross_only.png')}/>)
}
}
});
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(
<App />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
crossLogo: {
width:30,
height:30,
marginRight:10
}
});
But on another page I have
<TouchableOpacity
style={styles.recordButton}
onPress={() => navigate('EnterWeight')}
>
I want to be able to navigate to EnterWeight without registering it in the navbar. How can I do that?

Answer 1

a simple way to do this is to manage order on your TabNavigator:
const DashboardTabNavigator = createMaterialBottomTabNavigator({
Dashboard: {screen:Dashboard},
Trends: {screen:Trends},
//Profile: {screen:Profile},
EnterWeight: {screen:EnterWeight}
},
{
barStyle: { backgroundColor: '#000'},
},
{
navigationOptions:({navigation})=>{
const {routeName} = navigation.state.routes[navigation.state.index]
return {
headerTitle: routeName,
order: [
'Dashboard',
'Trends',
//'Profile',
],
}
}
}
);
But you have other options like :
Create a custom TabNavigator
Reorder your stack implementation to
isolate this new screen