Develop Reference

Drawer navigation not displaying in react-navigation

I am using react-navigation 3 versions with react native 0.59 version.
I am using switch navigation for the login code. Once I got login it's redirecting to the home screen and other navigation from home screen working fine but drawer icon not displaying.
My navigator.js
export const AppStack = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerRight:soundicon()
}
},
withdraw: {
screen: WithdrawScreen,
navigationOptions: {
headerRight:soundicon()
}
},
deposite: {
screen: DepositScreen,
navigationOptions: {
headerRight:soundicon()
}
},
money: {
screen: MoneyScreen,
navigationOptions: {
headerRight:soundicon()
}
}
});
export const drawermenu = createDrawerNavigator({
Home: AppStack,
})
export const AuthStack = createStackNavigator({
SignIn: {
screen: SignInScreen,
navigationOptions: {
header: null,
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
}
},
ForgotPassword: {
screen: ForgotPasswordScreen,
navigationOptions: {
}
}
});
export const AppNavigator = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: drawermenu,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
});
export const AppNavigatorObj = createAppContainer(AppNavigator)

As it is you can open the drawer by sliding right,if you want to open it with a icon you have to make a header component and use it on screens you want. Heres a nice example of headers: https://react-native-training.github.io/react-native-elements/docs/header.html

react-navigation composing multiple navigations

Imagine I have three states in my application:
Home
Settings
Messages
I want to show first two link to these states in the bottom of screen, I can achieve that with this code:
const routeConfig = {
Profile: {
screen: Profile
},
Setting: {
screen: Setting
}
};
and I export it as my root component with this:
const TabBottomNavigator = createBottomTabNavigator(routeConfig);
Now I want to show the third link, Messages in a drawer navigation, I see people do the with the following code:
const drawerRouteConfigs = {
Home: {
screen: TabNavigator,
},
Messages: {
screen: Messages,
}
};
const drawerNavigator = createDrawerNavigator(drawerRouteConfig);
and the drawer navigator by this code:
const stackRouteConfigs = {
DrawerNavigator: {
screen: DrawerNavigator
}
};
const stackNavigatorCofig = {
initialRouteName: 'DrawerNavigator',
headerMode: 'none'
};
const StackNavigator = createStackNavigator(stackRouteConfigs, stackNavigatorCofig);
My question is that should I always include tab navigation and drawer navigation as a screen in the main stack navigator?
and the same question for drawer navigator, Should I include my tab navigator in my drawer navigator?
my refrence link is this:
https://github.com/quangvietntd/AppBanHangReactNative/blob/master/App.js

No, you need to include only tab navigation as a screen into the main Stack Navigator and into DrawerNavigator, include StackNavigator as a screen.
const AppWithSlideMenu = DrawerNavigator(
{
App: { screen: MainStackNavigator }
},
{
contentComponent: Scenes.SlideMenuScene,
drawerWidth: Dimensions.get('window').width * 0.88
}
);
const MainStackNavigator = StackNavigator(
{
TabBar: { screen: TabBar },
}
);

drawerLockMode : 'locked-closed' not working directly with createStackNavigator

When I specify drawerLockMode direactly with createStackNavigator it is not working.
const drawerStack = createStackNavigator({
HomeScreen: { screen: HomeScreen },
}, {
headerMode: 'screen',
navigationOptions: {
drawerLockMode:'locked-closed'
}
})
But when I use drawerStack variable to define navigationOptions, it is working.
drawerStack.navigationOptions = ({ navigation }) => {
drawerLockMode = 'locked-closed';
return {
drawerLockMode,
};
};
Am I doing any mistake when I am directly using it inside createStackNavigator?
Update
As #bennygenel suggested, we need to user drawerLockMode in drawerNavigator instead of stackNavigator. Here is what i have done.
const drawerNavigator = createDrawerNavigator({
drawerStack: drawerStack
}, {
contentComponent: DrawerComponent,
navigationOpions:{
drawerLockMode:'locked-closed'
}
})
But it is not working in this way also. The only way it is working is by using the const variable created using createStackNavigator or createDrawerNavigator

Try the following code, it's working for me:
const UserHome_StackNavigator = StackNavigator({
userHm: {
screen: UserHome,
navigationOptions: ({ navigation }) => ({
title: 'User screen title',
headerStyle: {
backgroundColor: 'white',
},
headerTintColor: 'black'
}),
},
});
UserHome_StackNavigator.navigationOptions = ({ navigation }) => {
let drawerLockMode = 'locked-closed';
//logic here to change conditionaly, if needed
return {
drawerLockMode,
};
};

in case someone need this:
const drawerNavigator = createDrawerNavigator({
drawerStack: drawerStack
}, {
contentComponent: DrawerComponent,
navigationOpions: ({navigation}) => {
let routeName = navigation.state.routes[navigation.state.routes.length-1].routeName;
if(['Animation', 'Splash', 'Intro', 'Login', 'Signup'].indexOf(routeName)>=0){
return {
drawerLockMode: 'locked-closed'
}
}
return {}
}
})

React Native - Combine 2 Navigation Type in single apps

I trying to implement 2 type of Navigation in my apps, Tab Navigation and Stack Navigation.
My Desire Output:
But so far with my code, I only able to implement one of them.
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600',
}
}
});
const Go = StackNavigator({
First: { screen: ProfileScreen },
Second: { screen: SecondActivity } },
});
export default rootNav;
What change should I make to my code to implement these 2 Navigation in my Apps?
Thank you.

You need a root StackNavigator, which has one route to your TabNavigator and one to your other StackNavigator. Then you can navigate from the TabNavigator to your other StackNavigator.
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});

const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
Method above can achieve the desire result however it may cause some issue, such as when perform Navigation to Screen, there will pop out 2 Header on Top of the Screen.
Improvement for Code above:
const rootNav = StackNavigator({
app: {screen: App},
First: { screen: ProfileScreen },
Second: { screen: SecondActivity },
});

React Native - Two Apps Bar Being Display in One Screen

My issue is I tried to implement 2 type of Nagivation Type in my Apps, TabNavigation and StackNavigation, so I using a root StackNavigator, which has one route to myTabNavigator and one to my other StackNavigator(Code Snippet of App.js). However, when I navigate to View Screen which is SecondActivity.js there will be two header pop out. I try to use header:null on SecondActivity.js but it will cause both header gone.
Is there any way to remove only 1 of the header from the SecondActivity.js Screen?
App.js (using RootNavigator to combine Tab and Stack Navigation in this Apps)
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600'
}
}
});
const Go = StackNavigator({
First: { screen: ProfileScreen },
Second: { screen: SecondActivity }
});
const rootNav = StackNavigator({
app: {screen: App},
go: {screen: Go},
});
export default rootNav;
ProfileScreen.js
static navigationOptions = {
tabBarLabel: 'View/Edit',
header: null
}
// This Line Used to Navigate to SecondActivity.js Screen
OpenSecondActivity(id) {
this.props.navigation.navigate('Second', { ListViewClickItemHolder: id });
}
// The ListView onPress will call the function above.
<ListView
automaticallyAdjustContentInsets={false}
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.OpenSecondActivity.bind(this, rowData.RecipeID)}> {rowData.RecipeName} </Text>}
/>
SecondActivity.js
static navigationOptions = {
title: 'View Details',
};

Each StackNavigator has its own header.
this is happening you are using nested stackNavigator, so one header is because of Go (stackNavigator), and another one is because of rootNav (stackNavigator).
The Go StackNavigation is unnecessary instead change the rootNav into this:
const App = TabNavigator({
HomeScreen: { screen: HomeScreen },
ProfileScreen: { screen: ProfileScreen },
}, {
tabBarOptions: {
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600'
}
}
});
const rootNav = StackNavigator({
app: {screen: App},
First: { screen: ProfileScreen },
Second: { screen: SecondActivity }
});
export default rootNav;

This is happening because of the fact that the tab navigator is being rendered within the stack navigator.
Create a util file, and put this method on it. It resets the stack and put tab navigator on top
const resetActivities = (navigation, rootPath,props) => {
const stackAction = NavigationActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: rootPath,params:props })],
});
navigation.dispatch(stackAction);
}
and pass the 'App', and the navigation object