createDrawerNavigator Is Not Working React Native

Question

I tried lots of things to open drawer but nothing works for me. I do not understand how to combine navigators like I have, one is createStackNavigator and second is createDrawerNavigator. Please check my code if anything goes wrong so let me know otherwise provide me a link or code to implement. thanks

App.js

import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';
import SignupScreen from './src/screens/SignupScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import CaseListingScreen from './src/screens/CaseListingScreen';
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import SideBar from './src/SideBar';

const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: DashboardScreen,
  },
  Cases: {
    screen: CaseListingScreen,
    navigationOptions: {
      header: null
    }
  }
},
{
  initialRouteName: 'Home',
}
);

const AppNavigator = createStackNavigator({
  Dashboard: {
    screen: DashboardScreen,
    navigationOptions: {
      header: null
    }
  },
  Cases: {
    screen: CaseListingScreen,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null
    }
  },
  Signup: {
    screen: SignupScreen,
    navigationOptions: {
      header: null
    }
  }
});

export default createAppContainer(AppNavigator, DrawerNavigator);

DashboardScreen.js

 export default class DashboardScreen extends Component {
    static navigationOption = {
        drawerLabel: 'Home'
    }
    render() {
        return (
            <Container>
                <Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
                    <Appbar.Action icon="menu" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
                    <Appbar.Content
                        title="Manage My Case"
                        subtitle="Dashboard"
                    />
                </Appbar.Header>
            </Container>
        );
    }
}

score 0 · Answer 1 · answered Dec 02 '19 at 09:19

In your export default createAppContainer(AppNavigator, DrawerNavigator); , you should have the drawerNavigator as the app container and not along with App navigator. createAppContainer contains only 1 arguement , so pass DrawerNavigator in the app container, and if you want to use the stackNavigator inside the drawer navigator just create the drawernavigator as ,

const AppNavigator = createStackNavigator({
  Dashboard: {
    screen: DashboardScreen,
    navigationOptions: {
      header: null
    }
  },
  Cases: {
    screen: CaseListingScreen,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null
    }
  },
  Signup: {
    screen: SignupScreen,
    navigationOptions: {
      header: null
    }
  }
});


const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: DashboardScreen,
  },
  Cases: {
    screen: CaseListingScreen,
    navigationOptions: {
      header: null
    }
  },
AppScreen:{
screen:AppNavigator // this is new , im adding stacknavigaoter to your drawer.
}
},
{
  initialRouteName: 'Home',
}
);


export default createAppContainer(DrawerNavigator);

Hope that helps, otherwise feel free for doubts.

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203456/discussion-between-gaurav-roy-and-zain-khan). — Gaurav Roy, Dec 02 '19 at 10:25

score 0 · Answer 2 · answered Dec 02 '19 at 09:19

Mention your drawer navigator inside the stacknavigator just like below,

const myDrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: YOUR_HOME },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width * 0.75
  }
)

const RootStack = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen,
    navigationOptions: {
      header: null,
    },
  },
  SomeName: {
    screen: myDrawerNavigator ,
    navigationOptions: {
      header: null,
    },
  },
})

Modify the above code as per your screen name and it will works fine...
I hope this helps thanks... :)

no errors. Just nothing happening when I clicked on button where I'm opening the drawer — Zain Khan, Dec 02 '19 at 09:36

createDrawerNavigator Is Not Working React Native

2 Answers2