CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-stackreact-navigation-bottom-tab
hellomello
hellomello

Reputation: 8585

React Navigation 5 Handling Modals, Bottom Tabs, and Stacks

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.

Upvotes: 2

Views: 3357

Answers (3)

hellomello
hellomello

Reputation: 8585

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

Upvotes: 1

tecs-x
tecs-x

Reputation: 388

Add the modal as a separate component in the Rootstock .here you have used both stack navigators in modal and rootstock components. This would be helpful https://reactnavigation.org/docs/getting-started/

Upvotes: 0

gwl002
gwl002

Reputation: 752

There is an official document here.

A modal is like a popup — it's not part of your primary navigation flow — it usually has a different transition, a different way to dismiss it, and is intended to focus on one particular piece of content or interaction.

Usually, you should place the modal screen outside the main stack. You can also custom the modal transition but that is very complicated.Here is a blog introduce this.

Upvotes: 0

Related Questions