DrawerNavigator inside StackNavigator using react-

Question

I am trying to replicate the below design but I cannot find much information on how to implement DrawerNavigator for a specific screen and hook it up with redux. DrawerNavigator to be independent of the routes. All I want is a profile pic, name of the user, log out button and app version

Answer 1

I assume that your app is going to have 2 main navigators which are for authentication and main navigator. If you use react-navigation, you may want to wrap DrawerNavigator inside the StackNavigator, as illustrated below.

-StackNavigator
    -LoginScreen
    -DrawerNavigator
        -Settings
        -Logout
        -Credits
        -Join beta group
        -Send debug logs

For starters, it is good to have a look at the tutorial from InfiniteRed where they put together a pretty decent tutorial, here. However, I believe the tutorial is a bit outdated as it is not compatible with the latest react-native version, at least for my case.

If you are already well-versed with redux and wish to integrate navigators into your app, you may want to have a look at kyaroru's neat implementation.

On the other hand, if you are using RNRF (I am on version 4.0.0-beta.22), this is the structure you may want to stick with, where DrawerComponent is just a pretty straightforward class.

export default class RouterComponent extends Component {
  render() {
    return (
      <Router>
        <Scene key="root" hideNavBar>
          <Scene key="splashScreen" component={SplashScreen} />
          <Scene key="auth" hideNavBar>
            <Scene key="signIn" component={SignIn} />
            <Scene key="signUp" component={SignUp} />
          </Scene>
          <Drawer
            hideNavBar
            key="drawer"
            contentComponent={DrawerComponent}
            drawerIcon={() => <Feather name="menu" size={24} color="#000" style={{ paddingLeft: 20 }} />}
            drawerWidth={300}>
            <Scene key="main">
              <Scene key="home" component={Home} title="Home" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
          </Drawer>
        </Scene>
      </Router>
    )
  }
}

class DrawerComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Drawer Content</Text>
        <TouchableOpacity onPress={Actions.home}>
          <Text>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={Actions.profile}>
          <Text>Profile</Text>
        </TouchableOpacity>
      </View >
    );
  }
}