Is there a way from stopping screens overlapping on each other like this in react native?

Question

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.

Answer 1

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