CODEWITHSUNDEEP
react-nativenavigation
Geoff_S
Geoff_S

Reputation: 5105

React native, routing without a nav menu item

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?

Upvotes: 1

Views: 528

Answers (1)

Fromwood
Fromwood

Reputation: 506

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

Upvotes: 1

Related Questions