CODEWITHSUNDEEP
react-nativereact-navigationcreate-react-native-app
Kim Seyun
Kim Seyun

Reputation: 51

React - Native Navigation Drawer Navigation Nested Navigation

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?

Upvotes: 5

Views: 3367

Answers (3)

Husain Khanbahadur
Husain Khanbahadur

Reputation: 489

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.

Upvotes: 0

Gamma Ko
Gamma Ko

Reputation: 462

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;

Upvotes: 1

vonovak
vonovak

Reputation: 1597

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.

Upvotes: 0

Related Questions