React native navigation single modal, navigate to different content

Question

I am looking for a way to have multiple screens with a presentation mode of 'modal' but not have 2 modals pop up when navigation.navigate is called on them.

<Stack.Screen name="Results" component={ResultsScreen} options={{ presentation:'modal'}} />
<Stack.Screen name="Viewer" component={ViewerScreen} options={{presentation:'modal'}} />

The default functionality seems to be to open 2 separate modal windows on top of each other. I would like to have a single modal open and the content of the modal change. Is this possible?

Answer 1

You can try using a nested stack navigator

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>
)


<RootStack.Group screenOptions={{ presentation: 'modal' }}>
    <RootStack.Screen name="MyModal" component={ModalStackView} />
</RootStack.Group>