0
238
VistasHow 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.
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.
1 Respuestas
Responde la pregunta0
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.
