Is there a way to hide the user interface in my main stack when I switch to the nested drawer stack?
I am currently facing an issue where the header from my main stack appears above the header in my nested stack when I navigate to a screen using:
navigation.navigate('Drawer', {screen: 'About'});
Navigator:
function DrawerStack() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Video Episodes" component={VideoEpisodesScreen} />
<Drawer.Screen name="Test Yourself" component={TestYourselfScreen} />
<Drawer.Screen name="My Results" component={MyResultsScreen} />
<Drawer.Screen name="About" component={AboutScreen} />
<Drawer.Screen name="Tests" component={TestsScreen} />
<Drawer.Screen
name="Bookmarked Videos"
component={BookmarkedVideosScreen}
/>
</Drawer.Navigator>
);
}
export default function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={stackOptions}
/>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={drawerOptions}
/>
<Stack.Screen
name="MyResultsScreen"
component={MyResultsScreen}
options={options}
/>
</Stack.Navigator>
</NavigationContainer>
);
}