React Navigation 5 Handling Modals, Bottom Tabs, and Stacks

Question

How do you handle different navigation when I want to combine stack navigator, bottom tabs, and modal? Right now, things are working, but the issue is that I only want specific links to be a modal, instead, adding mode: 'modal' will make everything a modal.

App.js:

<NavigationContainer>
  <RootStack />
</NavigationContainer>

RootStack:

<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Register" component={RegisterScreen} />
  <Stack.Screen name="Home" component={BottomTabs} />
</Stack.Navigator>

BottomTabs:

<Tab.Navigator mode="modal">
  <Tab.Screen
    name={'Home'}
    component={ExploreStack}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
  />
  <Tab.Screen
    name={'Post'}
    component={PostScreen}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
    listeners={({navigation}) => ({
      tabPress: event => {
        event.preventDefault();
        navigation.navigate('PostStack');
      },
    })}
  />
</Tab.Navigator>

ExploreStack:

<Stack.Navigator
  mode="modal"
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="Explore" component={ExploreScreen} />
  <Stack.Screen name="Modal" component={ModalStack} />
  <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
  <Stack.Screen
    name="PostStack"
    component={PostStack}
    options={{
      gestureEnabled: false,
    }}
  />
  <Stack.Screen
    name="LocationStack"
    component={LocationStack}
    headerMode="none"
    options={{
      headerMode: 'screen',
      ...TransitionPresets.ModalPresentationIOS,
    }}
  />
</Stack.Navigator>

So what I want to do is make the LocationStack inside ExploreStack be the modal, and keep the ProductDetail as a regular navigation stack (not a modal).

So everything in my ExploreStack is becoming a modal.

Answer 1

I've figured out my own solution. I had to just move all the stacks that I don't want as a modal into the root stack, this will allow me to navigate to the stack name anywhere within the app.

Edit:

Another method I found is using useLayouteffect source: React Navigation how to hide tabbar from inside stack navigation