React - Native Navigation Drawer Navigation Nested Navigation

Question

Currently in the react-native app that I'm building, I have a Drawer Navigator that includes two screens. For navigation, I am using react-navigation. https://reactnavigation.org/docs/intro/

The code is the following,

import { DrawerNavigator } from 'react-navigation'
export  default drawernav = DrawerNavigator(
     {
        Login: {Screen: Login},
        Main : {Screen: Main }
     }
)

Although Login is inside a Drawer Navigator I want it so that the Login screen does not have the drawer navigation functionality but the main screen does with the login and main as the two options in the drawer navigator. However, right now the Login screen also has the drawer navigator. Is there a way to make the Login drawer navigation functionality disappear?

Gamma Ko · Answer 1 · 2018-09-29T10:00:29.997

Please refer to the following post which is very helpful. https://github.com/react-navigation/react-navigation/issues/131. There are a number of approaches are suggested. A complete working example is provided by kyaroru as follow: https://github.com/kyaroru/ReactNavDrawer.

The following is a simpler example:

app.js

import React from 'react';
import { createStackNavigator , createDrawerNavigator } from 'react-navigation';
import LoginScreen from './LoginScreen';
import SignupScreen from './SignupScreen';
import HomeScreen from './HomeScreen';
import DrawerButton from './DrawerButton';
import SettingScreen from './SettingScreen';

const StackNavigator = createStackNavigator ({

  Login: {
    screen: LoginScreen,
  },

  Signup: {
    screen: SignupScreen,
  },  

  Home: {
    screen: HomeScreen,
  },

  Sitting: {
    screen: SettingScreen,
  },    

}, 
{
      navigationOptions: ({navigation}) => ({
        headerLeft: <DrawerButton navigation={navigation} />,
      }),
}
);

const DrawerNavigator = createDrawerNavigator({
  Menu: {
     screen: StackNavigator,
  },

  Signup: {
    screen: SignupScreen,
  },  

  Sitting: {
    screen: SettingScreen,
  },  

});

export default DrawerNavigator;

DrawerButton.js

import React from 'react';
import { TouchableOpacity, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';


const DrawerButton = ({ navigation }) => (
  <TouchableOpacity
    onPress={() => navigation.openDrawer()}
  >
    <Ionicons name={Platform.OS === 'ios' ? 'ios-menu' : 'md-menu'} size={28}  />
  </TouchableOpacity>
);


DrawerButton.propTypes = {
  navigation: PropTypes.object.isRequired,
};

export default DrawerButton;

Gamma Ko, while this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) — sideshowbarker, Sep 29 '18 at 07:54
@sideshowbarker I have given more details and hope this is useful. — Gamma Ko, Sep 29 '18 at 10:03

score 0 · Answer 2 · answered Oct 07 '17 at 19:43

You'll want to change your navigation structure. At the root should be a StackNavigator which will contain the LoginScreen, and the DrawerNavigator. The screens in the DrawerNavigator will likely be StackNavigators. Those StackNavigators will contain screen components with your code.

score 0 · Answer 3 · answered Sep 29 '18 at 12:24

As you don't want the drawer in the login screen then use this flow

import { DrawerNavigator, createStackNavigator } from 'react-navigation'
const drawernav = DrawerNavigator(
     {
        Main : {Screen: Main }
     }
);

const stack = createStackNavigator(
    {
      Login: {Screen: Login},
      drawer: {screen: drawernav},
    }
);

export default stack;

and in future you want to add the screens then if the screen required the drawer then that screen must be placed in drawer navigator and the screens which don't require the drawer it should be placed in stack navigator.

React - Native Navigation Drawer Navigation Nested Navigation

3 Answers3