I have SwitchNavigator for login
after Switchnavigator it redirects to Drawernavigator.
inside Drawernavigator's home component i have Tabnavigator
Now, on tabs components on screen I want to got to a screen which should be out from Drawernavigator where i can popback to Drawernavigator's Tabnavigator.
How to achieve this ?
inside Drawernavigator 's home component i have a button.on click I want to go to a screen which should be out from Drawernavigator where i can popback to Drawernavigator's Tabnavigator.
How to achieve this ?
Related
I have the following structure inside my main screen:
DrawerNavigator
drawer with a list of screens to navigate
Drawer.Screen
MaterialTopTabNavigator
TopTab.Screen
TopTab.Screen
TopTab.Screen
I need when I click at an item inside the drawer, navigate to a new rote without the drawer, what's the best approach to do it?
I tried with a StackNavigator inside the Drawer to prevent the error of the navigate without an handled navigator not found, but it's navigate with the drawer presents.
Solved with changes on the navigation level:
Stack Navigator
DrawerNavigator
drawer with a list of screens to navigate
Drawer.Screen
MaterialTopTabNavigator
TopTab.Screen
TopTab.Screen
TopTab.Screen
Stack.Screen (the screens on the drawer that I want to navigate)
Special thanks to expo discord community! Hope this helps someone with the same problem.
I am trying to build an app using react-native and got stuck in navigation. I want a nested drawer menu inside my app.
For creating a drawer in react native you can use react-navigation in that there are two components such as stack navigation it is for making the navigation between the screen and for the drawer, there is Drawernavigator by this you can easily make the navigation as well as the drawer in the app in react native.
const Drawer = createDrawerNavigator({
"Here put the screen on which you need drawer."
},{
contentComponent: SideDrawer,
})
after that add the drawer to the stack navigator.
const stack = StackNavigator({
drawer:{screen: Drawer},
"And add the screens on which you don't want drawer."
}, {
headerMode: 'none',
});
It is the way you can make a drawer.
I have a setup where I have a TabNavigator and the screen for one of the tabs is a DrawerNavigation, which in turn has StackNavigators. I have a couple of problems:
I can swipe from the left to open the drawer and open the StackNavigator screens, but it does not close the drawer when selecting an item. Calling closeDrawer() from the loaded screen does nothing.
When calling openDrawer() from a child screen I only get a semitransparent dark screen, but the drawer does not show.
Any ideas what's wrong?
I solved the first issue by passing the closeDrawer() method onPress before navigating like so:
onPress={() => { this.props.navigation.dispatch(DrawerActions.closeDrawer()), this.props.navigation.navigate(item.screen.toString())
}}
The Icons (Home, Search, Notification etc.) in the TabNavigator and the StackNavigator hides for a while when navigating.
I posted when it happens in the TabNavigator.
Any idea what could be wrong?
I have a TabNavigator with 5 Tabs and one of the Tab shows a screen from a StackNavigator with a BackButton because this Screen don't show the Tabs actually.
The StackNavigator is nested in the TabNavigator but where can I go back from the Screen with the backButton? Can I pass a specific route/tab to go back?