<Modal> Component Not Appearing Correctly in Component Tree

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:

https://github.com/user-attachments/assets/298942b9-5f64-4f81-840f-463bc6778a83

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

https://github.com/user-attachments/assets/f38376f4-a14c-4796-98c9-63eac6808efa

リンクされている Modal_Repro から始め、app/navigators/AppNavigator.tsx と app/screens/ConfirmationModal.tsx を確認します。yarn install と npx expo run:ios を実行し、その後、新しいアーキテクチャで再現します。presentation: "transparentModal" を有効にした場合とコメントアウトした場合の動作を比較します。このオプションを有効にしたまま、React Native のモーダルが画面の上に表示されれば完了です。