0
319
ViewsIs there a way from stopping screens overlapping on each other like this in react native?
I've followed the react navigation example exactly, however my screens keep stacking on top of each other like this initially it gives the error
Found screens with the same name nested inside one another.
However, even in the cases where I give them unique names it still occurs. Anyone have any idea how to fix this? I'm using the latest version (6.x) example in the react navigation docs.
·
Juan Pablo Isaza
1 answers
Answer question0
Your screens will be nested like that, what you can do is hide the header of the stacks. Something like this:
export default function App() {
return (
<NavigationContainer
options={{ headerShown: false }}
>
<Tab.Navigator>
<Tab.Screen name="HomeStack" component={HomeStackScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
You can find description of headerShown here: https://reactnavigation.org/docs/bottom-tab-navigator#headershown
·
Juan Pablo Isaza
Report
Answer question