CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
C.T. Bell
C.T. Bell

Reputation: 513

How do I create a stack navigator with visible layers in React Navigation?

I'm trying to recreate this style of stack navigator in react native. enter image description here

Here is a video of it working: https://youtu.be/l2sMaurPY5E

The way it works is, when you tap on something, the current screen shrinks slightly and the new screen appears on top of it. Then you see a visible stack at the top of the screen, showing the layers.

Is this possible with React Native, or more specifically, React Navigation? I don't even know what it's called to search for it.

Upvotes: 1

Views: 373

Answers (1)

nithinpp
nithinpp

Reputation: 2025

This can be achieved in React Naviagtion by simply settings presentation to modal to your desired screen (via options property , or as screenOptions to the entire stack if that's what you want). To make it work in Android, you might have to pass a few additional props.

In simple terms, you can define your navigator like below,

<NavigationContainer>
  <Stack.Navigator
    //define below properties to enable the modal presentation
    screenOptions={{ 
      presentation: 'modal',
      headerMode: 'none',
      cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
      gestureEnabled: true,
      cardOverlayEnabled: true,
    }}
  >
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen name="Modal" component={Modal} />
  </Stack.Navigator>
</NavigationContainer>

Take a look at this Live Snack to see it in action.

enter image description here

Upvotes: 1

Related Questions