【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.

https://github.com/software-mansion/react-native-reanimated/assets/11554140/98f0bbe2-da08-4b1a-829a-527a88daf089

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.

https://github.com/software-mansion/react-native-reanimated/assets/77503811/6d6912bc-13f1-4cc3-bcfd-a81938971f01

[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

[laurence79]

I'm experiencing the same problem but it also occurs in debug for me. Only iOS is affected, Android and web are fine. I've created another repro in case that helps: https://github.com/laurence79/reanimated-modal-zero-size-repro.

Steps to reproduce npm i pushd ios && pod install && popd npm start --clear-cache Open ios/ModalRepro.xcworkspace Run against a simulator

Tap 'Open Animated Screen' Tap 'Open Modal' Observe that the RCTViewComponentView inside RCTFabricModalHost has zero size

To see it working fine without reanimated, run from Xcode again, and instead tap 'Open Screen', and 'Open Modal'

I came across this upgrading a large mixed project (some native, some react native) from RN 0.69.12 to 0.75.2, including a reanimated upgrade from 3.3.0 to 3.15.0. This problem seems to be a regression since those versions, although this upgrade did include switching to the new architecture.

[Foreverjie]

Same Problem using new arch in android release mode, any update here?

[raxenov0]

any update here?

[juldev-abnk]

any update?

[SergeyKopytov1205]

any update?

[delmaass]

any updates?

[AlexKyrdyukov]

I had a similar problem with a modal component from the react-native library, and I fixed it with prop animationType="fade"

[TonyFTannous-Byd]

Put your Modal in a View container, it will fix

[patrycjakalinska]

hi @rabbitmouse, I took @szydlovsky repo, and turned on new arch but the bug isn't there, but when I run your repo it still is. You can check his setup c: As @TonyFTannous-Byd said wrapping Modal with View also fixes the issue, and its good by providing isolated environment for modal. Let me know if you have any further questions! If no, I'll close the issue then c:

[Kibryant]

Same issue here

[gumatiello]

Put your Modal in a View container, it will fix

why?????

[Kibryant]

Put your Modal in a View container, it will fix

why?????

i want to understand too

[Kibryant]

Put your Modal in a View container, it will fix

this would be inappropriate behavior, wouldnt it?