Any way of putting a prompt over a modal in React Native? (iOS version)

Question

I have the following situation: I have a modal in my app and, through a button placed inside it, I want to launch a confirmation prompt on top of it.

This confirmation prompt (called <ConfirmationPrompt>) is global and resides at the root of my app, in App.tsx component. Its state (whether it's visible or not) is controlled through a Redux global state.

How I did in in Android (and it works): I'm using two modals. From the first modal, I'm setting the global state of the <ConfirmationPrompt> component and the 2nd modal shows on top of the first just fine.

The problem in IOS: As I understand, React Native (iOS) doesn't allow two modals to be launched simulatenously, on top of each other.

What I tried:

1. Using libraries such as react-native-modal. They don't support multiple modals on iOS either, only Android.

2. Not using a modal for my <ConfirmationPrompt> component, but rather a custom View component that acts like a modal. However, I haven't been able to achieve this.

3. Using a pure-javascript dialogue library (ex: react-native-dialog). This doesn't work, but as I understand, it stills uses a thin abstraction on top of the React-Native's modal component.

What is the best way to achieve this?

Answer 1

A workaround could be to use ReactNavigation with the presentation set to 'modal', 'transparentModal' or 'fullScreenModal' then this screen will take all the screen (or most of it if set to 'modal') and you can still open a modal on this screen.

<NavigationStack.Screen
    name={YourRouteName}
    component={YourComponent}
    options={{
      presentation: 'fullScreenModal'
    }}
  />

Here is an example:

https://snack.expo.dev/@sasserlnd/opening-a-modal-%7C-react-navigation