I've created drawer navigator in tab navigator now I've 2 problems about it I need assistance with,
Firstly, Drawer Navigator isn't accessible in other two tabs.
Secondly, I want to redirect user to first screen of drawer on double click of bottom navigator first item i.e. ABOUT.
const TabNavigator = createBottomTabNavigator(
{
ABOUT: MyDrawerNavigator,
Who: WhoScreen,
What: WhatScreen,
},
const MyDrawerNavigator = createDrawerNavigator(
{
AimOfSeminar: {
navigationOptions: { drawerLabel: 'Aim of Seminar' },
screen: AimScreen,
},
ConceptNote: {
screen: ConceptScreen,
},
Speakers: SpeakerTab,
MediaCoverage: {
screen: MediaCoverageScreen,
},
},
}
What I want is:
Bottom Tab Navigator accessible on all screens. (1)
Drawer Navigator accessible on all tabs.
Go to main route of first tab on double click.
Make Drawer preview on top of bottom tab navigator by current setting bottom navigator appears on top, if I rearrange navigators I get drawer navigator on top but it generates problem (1) of above list.
Related
I'm using a tab navigator and drawer navigator in a react native app. I need to have the drawer navigator open when one of the tabs is pressed. For example, the last tab named 'account' should open up the drawer.
// drawer navigation
const AppDrawerNavigator = createDrawerNavigator({
Account: AccountScreen,
});
// tab navigation
const AppTabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
},
Account: {
screen: AppDrawerNavigator,
}
});
With my code right now, the app is simply navigating to the account screen when the account tab is pressed, instead of opening up the drawer. Is there a way to do this?
I found my answer on this question > React Native - Accessing drawer navigation outside of AppNavigator
I created a NavigationService and added the following to the service.
function openDrawer(routeName, params) {
_navigator.dispatch(DrawerActions.openDrawer());
}
I am making an react native android app in which i have both stack navigator and drawer navigator like this.
const orderstack = createStackNavigator({
OrderHistory : {screen : OrderHistory},
HistoryDetails: {screen : HistoryDetails},
TrackOrder: {screen : TrackOrder},
},{
headerMode: 'none',
navigationOptions:({navigation}) => ({
header: null,
}),
})
and drawer is
const drawerNavigator = createDrawerNavigator({
HomeScreen: {
screen: orderstack,
},
ProfileScreen:{
screen: profile,
},
MOrderScreen: {
screen: customstack,
},{}
}
Now when i go to HomeScreen in drawer then it should open orderstack which is stack navigator.This is working fine until i am not in the HomeScreen inside drawer,i mean,suppose i am inside HomeScreen and inside that i am in HistoryDetails then when i press again HomeScreen in drawer then it does not goes in OrderHistory.I tried setting initialRoutename but it does not works?But if i click from MOrderScreen or ProfileScreen then its working fine and OrderHistory is opening first.
The drawer only knows that it has to navigate to the "orderstack" screen, in this case, is a stacknavigator, but when you are in HistoryDetails or TrackOrder , you are still in the "orderstack" screen , the drawer doesn't handle deep navigation. It only navigates between the screens that you have provided it. you need to define a custom contentcomponent to handle navigation in your way. This behaviour of going back to the initial screen is already present in tabnavigator of react anvigation 3.0 so you should try it out to see if it fits your needs.
Check here for how to implement a customcomponent that resets the stack navigator , or just use a tabnavigator wich is the recommended for reseting screens (that's how youtube app does it)
I am trying to achieve the Uber type navigation.
Drawer is opened
User clicks on a route
Drawer closes
The page opens as a modal
The only way to access the drawer is by closing the modal
I thought of a few ways to do this. Create a stack navigator with all the routes and create a custom drawer and when a route is clicked I activate the close method and navigate to page with modal.
const MainNavigator = createStackNavigator({
one: { screen: one },
two: { screen: two },
three: { screen: three}
}, {
mode: 'modal',
initialRouteName: 'one'
});
However. this requires me to create the drawer component, which I am trying to avoid for right now.
When I use the createDrawerNavigator, I get the drawer component, but I can't achieve the navigation I need. Any advice? Is it possible to put the stack navigator inside the drawer?
I am using react navigation and I need to hide some tabs while use tab navigation in my app. I want navigation to any screen any screen in tabs navigation but only want to display certain tabs. How should I write Tab navigation ?
const TabNav = TabNavigator ({
Dashboard: {
screen: Dashboard,
}
},
Post: {
screen: Post,
},
Browse: {
screen: Browse,
},
Inbox: {
screen: Inbox,
},
More: {
screen: More,
},
})
I added my tab navigation now. Suppose I do not want to show Inbox screen but want to use its navigator to navigate to Inbox from any screen and from any screen to Inbox using navigator.
Problem: i have a DrawerNavigator that contains a TabNavigator which contains a StackNavigator, what i needed is the regular three bar icon in the header to open the Drawer instead of swiping right
My Solution: put the TabNavigator that contains a StackNavigator inside a StackNavigator and put the StackNavigator inside the DrawerNavigator
Problem with my solution: when i navigate inside the TabNavigator i get double headers (it's normal because i have 2 StackNavigators) and i can only hide the back arrow header, i always get left with the 3 tabs icon header.
so how please how can i hide the parent header which contains TabNavigator?
//the drawer navigator
const DNav = DrawerNavigator({
SportWall: {
screen: SportWall
}
})
//the stack that contains the tab navigator
export default StackNavigator({
SportWall: {
//just to show the header with the 3 bars icon
screen: SportWall
}
render() {
return (
<Tabs/>
)
}
//the tab navigator
const Tabs = TabNavigator({
AllPubs: {
screen: AllPubs
},
FriendsPubs: {
screen: FriendsPubs
},
});
//the stack inside each tab
export default StackNavigator({
AllPubs: {
screen: AllPubs,
},
Pub: {
screen: Pub, navigationOptions: {tabBarVisible: false}
},...
Hi you can use your StackNavigator like this example and use the headerMode: 'screen':
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen }
},{
headerMode: 'screen'
}
);
See here for more information.
you shouldn't use a StackNavigator just to show the header that shows the drawer.
You could set a custom header with the hamburger button at left that fires the drawer onPress for all the screens that need it:
<Button
onPress={() => this.props.navigation.navigate('DrawerOpen')}
title="Open drawer"
/>
don't forget to add headerMode: "none" to the Navigator options