CODEWITHSUNDEEP
javascriptreact-nativemobile-development
Shalin Patel
Shalin Patel

Reputation: 179

using drawer navigator and stack navigator in react native

I am new to react native and trying to work on a mobile application for fun. I am having trouble making a side menu or in other words drawer navigation. I followed the documentation given in the react native website but something that is confusing me is not being able to hide certain screens in the drawer.

For example if we have: loginScreen, signupScreen, homeScreen, profileScreen. And I want a drawer menu in the homeScreen that has a tab going to profileScreen then how would I go about achieving this? Also keep in mind that I want to press a button that goes from loginScreen to signupScreen so for that I would need to use stackNavigator.

I tried doing nested drawer and stack navigator but something isn't going right. Can someone please guide me in the correct direction that can help me achieve my goal. Thank you in advance!

Upvotes: 0

Views: 87

Answers (1)

Minh Vo
Minh Vo

Reputation: 118

I have same problem with you when i am new. I can give you some demo stack navigation code. First, you should create HomeStackNavigation

import { createStackNavigator } from "react-navigation-stack";
const HomeStackNavigation = createStackNavigator(
{
    Home: HomeScreen,
    Login: LoginScreen,
    Profile: ProfileScreen,
});

then AuthenticationStackNavigation

const AuthenticationStackNavigation = createStackNavigator(
{
    Login: LoginScreen,
    Signup: SignupScreen,
    Profile: ProfileScreen,
});

each item in drawer tab you need show still have stack too, Example ProfileScreen you want:

const ProfileStackNavigation = createStackNavigator(
{
    Profile: ProfileScreen,
});

or

export const ProfileStackNavigation = createStackNavigator(
{
    Profile: {
        screen: ProfileScreen,
        navigationOption: () => {} // Must have icon back to home...
    },
  },
);

after all you need DrawerNavigation

const DrawerNavigator = createDrawerNavigator(
{
    Profile: ProfileStackNavigation,
    
})

If you have bottom tab (use BottomTabNavigator) you should add all screen in there. (no code demo because not relate to your question). If you want direction open app -> splash -> login/signup (or go home) -> home. I suggest you create it

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
const SwitchNavigator = createSwitchNavigator({
    Startup: {
        screen: StartupScreen,
    },
    Auth: {
        screen: AuthenticationStackNavigation ,
    },
    Home: {
        screen: DrawerNavigator,
    },
});
export default createAppContainer(SwitchNavigator);

If have any question ask, dm-ed me for simple file navigation i have code for my demo project. Thanks !

Upvotes: 2

Related Questions