<Modal> Component Not Appearing Correctly in Component Tree

[ChristopherGabba]

Description

NOTE: This bug was NOT present on the old architecture. As soon as I set newArch: enabled, this bug appeared.
Another note: I did not file this issue in react-navigation because I reproduced this in react navigation v6 and v7 and this bug only was present on both versions. It only appeared when I set newArch: enabled and it appears to be related to the <Modal /> component.

The repro provided below should be very easy to reproduce (refer to videos).

I have a modal component like so:

// app/screens/ConfirmationModal.tsx
import { Modal, View }  from "react-native"
// ...

<Modal visible={showModal}>
   <View style={$fullScreenStyle}>

   </View>
</Modal>

And I trigger the setShowModal(true), it is actually appearing behind my screen (or just not at all) in the new architecture instead of above.

// My screen in my Navigator
<Stack.Screen
   name="RandomScreen"
   component={Screens.RandomScreen}
   options={{
      presentation: "transparentModal", // This line appears to be causing the collision with the Modal component
      animation: "fade",
   }}
/>

On the component tree, I have this Modal component at the very top, so this should definitely not occur.

Steps to reproduce

1. Clone the repro: https://github.com/ChristopherGabba/Modal_Repro
2. Run yarn install
3. Run npx expo run:ios
4. When the app loads, tap on Open Modal button.
5. When the modal appears tap on the Green Show react native modal button

What should happen here is a green full screen modal should appear but nothing happens at all.

6. Comment out this line:

// app/navigators/AppNavigator.tsx

  <Stack.Screen
     name="Modal"
     component={ModalScreen}
     options={{
          // presentation: "transparentModal", // COMMENTING THIS LINE OUT THE MODAL WORKS
          animation: "fade",
     }}
  />

Go through the same sequence and it works just fine.

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Areas

Bridgeless - The New Initialization Flow

Output of npx @react-native-community/cli info

error Failed to load configuration of your project.
Config Validation Error: "project.ios.unstable_reactLegacyComponentNames" is not allowed
    at parseUserConfig (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/readConfigFromDisk.js:48:11)
    at readConfigFromDiskAsync (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/readConfigFromDisk.js:63:10)
    at async loadConfigAsync (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/loadConfig.js:141:22)
    at async setupAndRun (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli/build/index.js:191:14)
    at async run (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli/build/index.js:146:5)
christophergabba@ChristophersMBP Modal_Repro %

Stacktrace or Logs

N/A

Reproducer

https://github.com/ChristopherGabba/Modal_Repro

Screenshots and Videos

Here is a video of it working correctly when the presentation: "transparentModal" is commented out:

ScreenRecording_02-27-2025.06-28-00_1.MP4

Here is a video of it not showing up at all when presentation: "transparentModal" is NOT commented out:

ScreenRecording_02-27-2025.06-29-29_1.MP4

[ChristopherGabba]

Potentially related issues:
software-mansion/react-native-screens#2455
software-mansion/react-native-reanimated#6659 (except I'm not using reanimated here)
expo/expo#34470

[cortinico]

Is it also happening on Android?

[ChristopherGabba]

Hello @cortinico, really appreciate you looking into this. I just ran this on my android emulator and it is NOT occurring.

This seems to be partial to iOS.

I will also say that this seems to be a fairly substantial problem with modal's just about everywhere.

Just found other areas in my app that sort of went to !(#*$@ with the same Modal component.

It seems like any time there is a Modal on top of another modal, particularly if they are set to transparent={true}, only one is showing up.

For example:

export const Screen = (props: ScreenProps) => {
 
  return (
     <View style={$container}>
       <View style={$yellowSquare}></View>
       <Modal transparent visible={true}> // first modal
            <View style={$pinkSquare}></View>
       </Modal>
       <Modal transparent visible={true}> // second modal
            <View style={$greenSquareSlightlyOffset}></View>
       </Modal>
     </View>
  )
}

You are only going to see one of the pink OR green modal views but not both, but you SHOULD see the green above the pink.