How to implement global accesed screens with bottom tab navigator

Question

I'm developing an application whose main navigation is composed by bottom tabs, this application has some screens which need to be globally accesed from different tabs/places. An important thing to highlight is that from this global screen I can go back to the place from which it was accessed(go back navigation action). Here a simple UI to ilustrate the use case:

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

Answer 1

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();