How to implement global accesed screens with bottom tab navigator-CodePudding

I'm developing an application whose main navigation is composed by

It's not clear to me how the distribution of the navigators must be to be able to implement this navigation architecture.

CodePudding user response：

what you can go is Nest bottom tabs navigator inside a stack navigator

and put the global screens inside the stack navigator

something like this :

function bottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={bottomTabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="GlobalScreen" component={GloballyAccessedScreen} />
      </Stack.Navigator>
    
  );
}

for the second part of your question , to go back you should use navigation.goBack();

CodePudding user response：

You can use a layout for your Navigator

Layout.js

export default function Layout(props) {
   return (
      <div>
         <main>
            {props.children}
         </main>
         <Navigator/>
      </div>
   )
}

The rest of your app should be nested inside the component
App.js

function App() {
  return (
    <Layout>
      <GameScreen/>
    </Layout>
  );
}

Regarding the navigation, I assusme you use react-router-dom. If you will give a version is will be easier to support. In any way you should use the useHistory with push, so you can go back.

history.push("/quotes");     //ALLOW BACK BUTTON
history.replace("/quotes");     //NOT ALLOWING BACK BUTTON