React Navigation 6 (RN6) - Card stack within a modal

Question

I have a question about a card stack inside a modal stack as illustrated in the attached image.

So, just to repeat what I wanted to do. I have a screen with the option presentation: 'modal' that opens the green modal.

Inside that green modal, I have a button that should invoke a navigation call that should show the blue screen with option presentation: 'card' and the ability to go back to the green screen.

I have done something similar with the react-native-navigation library from WIX but I have no idea if that can be done with react-navigation.

Any help is much appreciated.

Cheers

Urbanism

Answer 1

I found the solution with Nesting navigators as described here

Basically, I created a ModalStack and used this stack in Screen component as shown below.

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { TransitionPresets } from '@react-navigation/stack'

import HomeView from '../screens/HomeView'
import ModalView from '../screens/ModalView'
import CardView from '../screens/CardView'

const RootStack = createNativeStackNavigator()
const ModalStack = createNativeStackNavigator()

const ModalStackView = () => (
  <ModalStack.Navigator
    screenOptions={{
      headerShown: true,
    }}>
    <ModalStack.Screen
      name="modalCard1"
      component={ModalView}
      options={{
        presentation: 'modal'
      }}
    />
    <ModalStack.Screen
      name="modalCard2"
      component={CardView}
      options={{
        presentation: 'card'
      }}
    />
  </ModalStack.Navigator>
)

const Stacks = () => (
  <RootStack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <RootStack.Screen name="home" component={HomeView} />
    <RootStack.Screen
      name="modal"
      component={ModalStackView}
      options={{
        presentation: 'modal'
      }}
    />
  </RootStack.Navigator>
)

export default Stacks

Here the Snack with the full code

Urbanism

not working for android – Progestin

how to give modal height – Progestin

Damn! This is the exact case that I had too, and this works 100% for me :) Thx <3 – Dulcine

Thanks for posting your own solution! I was able to easily convert this to use in Expo Router with file-based routing! (If anyone else has that use case - get rid of "component", create a folder called "modal", and create a new _layout.js in there with your two screens, and a file for each screen in /modal) – Dismast