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?
Related
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.
I have a nested Stack Navigators like this (names are changed). If I go from the InitialStack to the HomeStack and from then to any of the screens in HomeStack or the other stacks, when I close the app (without swipe) it automatically resets to the first screen of the InitialStack
const RootStack = createStackNavigator(
{
InitialStack: InitialStack,
HomeStack: HomeStack,
StackC: StackC,
StackD: StackD,
},
{
initialRouteName: 'InitialStack',
defaultNavigationOptions: {
header: null
},
}
)
const AppContainer = createAppContainer(RootStack);
I want to keep the current screen being rendered instead of the initial one from the initialStack after the apps has been reopened.
I am using react-navigation 4.0.10 and react-native 0.61.2
You can use this method componentwillunmount
It is activated as soon as you close the component
Then you can use asyncStorage "setitem"
This is how you save the page you were on
After the component is restarted
You will get the figure of the last open component with this method asyncStorage getitem
And open it up with this method componentDidMount
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 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.