Navigation using Drawer with nested routes - react-native

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.

Related

nested navigation SwitchNavigator>DrawerNavigator>TabsNavigator >StackNavigator

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 ?

How to build a nested drawer menu with React Native or stack navigation inside Drawer Navigation

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.

How can I change react drawer navigator back button icon?

I use native base to change back button in stack navigator pages,
but I don't know how to change back button icon in drawer navigator

Icons in TabNavigator and StackNavigator hides for a while when navigating (Screenshots)

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?

Can't navigate back from StackNavigator to TabNavigator React Native

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?