【Bug】Modal displays incorrectly if use reanimated

[rabbitmouse]

Description

Our project uses the new ReactNative architecture. In the release environment, when the page contains both reanimted and modal, the modal display will be abnormal, and the sub-nodes in the modal will be displayed in the upper left corner.

bugvideo.mov

Steps to reproduce

1. cd ModalBugDemo
2. npm install
3. npm run prebuild
4. expo start --clear
5. open xcode and running as release
6. First click the Show Modal button, then the modal will be displayed correctly.
7. Click the animation switch button
8. Then click the Show Modal button again and the modal will be displayed in the upper left corner

Snack or a link to a repository

https://github.com/rabbitmouse/ModalBugDemo

Reanimated version

3.11.0

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

iphone12, Galaxy S22

Acknowledgements

Yes

[D2cGen]

same problem， Fatal defect，please fix this as soon as possible

[szydlovsky]

@rabbitmouse Hello, I ran your repro and it worked perfectly for me. Definitely one thing I can suggest you is to run:
npx expo start --clear instead of expo start... But other than that, I ran the exact same repo and didn't see any of the issues.

Screen.Recording.2024-05-21.at.15.13.24.mov

[rabbitmouse]

@rabbitmouse Hello, I ran your repro and it worked perfectly for me. Definitely one thing I can suggest you is to run: npx expo start --clear instead of expo start... But other than that, I ran the exact same repo and didn't see any of the issues.

Screen.Recording.2024-05-21.at.15.13.24.mov

@szydlovsky hi, I think you are running in debug mode. This bug will only exist in release mode.
Please try to run the release environment

iOS: Please modify the running mode in xcode scheme

Android: Please refer to the steps below and install apk into your device

cd ModalBugDemo/
npm i
npm run prebuild
npm run release_android
adb install -r 'android/app/build/outputs/apk/release/app-release.apk'

[szydlovsky]

hey @rabbitmouse, I have created a yarn-based repo using exact same versions (RN 0.73.6, REA 3.6.2, release mode) - and the bug isn't there. Same happens when I use your repro code in the Reanimated Example app - there are no bugs whatsoever. Please take a look at the repo: https://github.com/szydlovsky/modalrepro, there has to be something wrong with your setup then.

(With yarn you have to run: yarn && cd ios && bundle install && bundle exec pod install and then run the project from Xcode)

[rabbitmouse]

hey @rabbitmouse, I have created a yarn-based repo using exact same versions (RN 0.73.6, REA 3.6.2, release mode) - and the bug isn't there. Same happens when I use your repro code in the Reanimated Example app - there are no bugs whatsoever. Please take a look at the repo: https://github.com/szydlovsky/modalrepro, there has to be something wrong with your setup then.

(With yarn you have to run: yarn && cd ios && bundle install && bundle exec pod install and then run the project from Xcode)

Thank you for your reply! @szydlovsky
I noticed that the new react-native architecture was not enabled in your demo.

Modal is normal in the old architecture, but problems will occur in the release environment of the new architecture. Please modify app.json to enable the new architecture.

like this code below

"plugins": [
      "expo-router",
      [
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": true,
            "flipper": true
          },
          "android": {
            "newArchEnabled": true
          }
        }
      ],
    ],

[rabbitmouse]

This bug will only appear when the new architecture + release mode.

and i use expo to create the demo.

1. npx create-expo-app StickerSmash --template blank
2. expo eject
3. modify app.json and open a new architecture
4. npm install
5. Build release mode app

Please refer to my process and try again, thank you very much! 😭 @szydlovsky

[ThienMD]

Same issue