Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrading 0.72.0-rc.5 with 3.2.0 causes runtime error with metro. #4521

Closed
gtokman opened this issue Jun 1, 2023 · 21 comments · Fixed by #4523
Closed

Upgrading 0.72.0-rc.5 with 3.2.0 causes runtime error with metro. #4521

gtokman opened this issue Jun 1, 2023 · 21 comments · Fixed by #4523
Labels
Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS Reproducible 🎉

Comments

@gtokman
Copy link

gtokman commented Jun 1, 2023

Description

I'm experiencing an error after upgrading RN to 0.72.0-rc.5. I tried reseting the cache with yarn start --reset-cache too.

 ERROR  Error: [Reanimated] The native part of Reanimated doesn't seem to be initialized. This could be caused by
  - not rebuilding the app after installing or upgrading Reanimated
  - trying to run Reanimated on an unsupported platform
  - running in a brownfield app without manually initializing the native library, js engine: hermes
 LOG  Running "mobile" with {"rootTag":1,"initialProps":{}}
 ERROR  Invariant Violation: "mobile" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
CleanShot 2023-06-01 at 12 01 12@2x

Steps to reproduce

  1. Create a project with reanimated 3.2.0
  2. Upgrade React Native to 0.72.0-rc.5
  3. Run the app

Snack or a link to a repository

n/a

Reanimated version

3.2.0

React Native version

0.72.0-rc.5

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

@gtokman gtokman added the Needs review Issue is ready to be reviewed by a maintainer label Jun 1, 2023
@github-actions github-actions bot added Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS labels Jun 1, 2023
@github-actions
Copy link

github-actions bot commented Jun 1, 2023

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@thomasarogers
Copy link

Getting the same with react-native 0.71.8 - tried resetting metro cache, clearing node modules, clearing Pods dir and Podfile.lock, clearing derived data and clean build in xcode as well as a machine and phone restart with no luck

@tomekzaw
Copy link
Member

tomekzaw commented Jun 1, 2023

Hey @gtokman, thanks for reporting this issue. We're actively working on it but adding support for upcoming releases is not that easy these days. Will keep you updated!

@tomekzaw tomekzaw added Reproducible 🎉 and removed Needs review Issue is ready to be reviewed by a maintainer labels Jun 1, 2023
tomekzaw added a commit that referenced this issue Jun 7, 2023
## Summary

This PR bumps react-native to 0.72.0-rc.5 and slightly changes
initialization path on iOS (Paper) due to recent changes in the
framework (facebook/react-native#37523).

Fixes #4521. Continues #3005.

On iOS, Reanimated needs to overwrite two React internal modules:
* `RCTUIManager` → `REAUIManager` to intercept `manageChildren`
calls in order to observe React tree changes
([here](https://github.com/software-mansion/react-native-reanimated/blob/main/ios/LayoutReanimation/REAUIManager.mm))
* `RCTEventDispatcher` → `REAEventDispatcher` to intercept events
in the native code while still on the UI thread
([here](https://github.com/software-mansion/react-native-reanimated/blob/663ee74925cafa4a1a802f4722466dc02cb1760f/ios/REAEventDispatcher.m#L9-L10))

The rest of the initialization (injecting JSI bindings) can be safely
done in `installTurboModule` method, as we already do on Android and
iOS/Fabric.

Previously, this was done using categories (see
[`UIResponder+Reanimated.mm`](https://github.com/software-mansion/react-native-reanimated/blob/663ee74925cafa4a1a802f4722466dc02cb1760f/ios/native/UIResponder%2BReanimated.mm#L19-L30)),
in particular by overwriting `jsExecutorFactoryForBridge:` method which
is called during initialization. However, since 0.72.0-rc.4, this method
is already implemented in `RCTAppDelegate` so the trick does no longer
work, making the app fail with the following error "[Reanimated] The
native part of Reanimated doesn't seem to be initialized".

In this PR, I've used a category to overwrite another method
`extraModulesForBridge` which swizzles the implementation of
`jsExecutorFactoryForBridge` method and runs `REAInitializer` before the
original call.

As suggested by @kmagiera, alternatively we could just swizzle the
methods of `RCTUIManager` and `RCTEventDispatcher`.

## TODO

- [x] Restore support for 0.71 and below with #ifdefs

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
@firehand33
Copy link

I'm still getting this error on 0.72.0 with version 3.3.0....

Screenshot 2023-06-24 at 10 09 05 AM

@tomekzaw
Copy link
Member

@firehand33 Did you rebuild the native part of the app after upgrading Reanimated?

@samir-anghan
Copy link

samir-anghan commented Jun 26, 2023

Hi, @tomekzaw Thanks for looking into and working on this.
I'm also getting the same error on the iOS run, Android works fine.

BUNDLE ./index.js

ERROR Error: [Reanimated] The native part of Reanimated doesn't seem to be initialized. This could be caused by

  • not rebuilding the app after installing or upgrading Reanimated
  • trying to run Reanimated on an unsupported platform
    ERROR Invariant Violation: "******" has not been registered. This can happen if:
  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

I have tried everything from the above conversation.
Also, I have tried many times re-building after cleaning the necessary folders. (rm -rf node_modules ; rm -rf ios/Pods ios/Podfile.lock ios/build)

iOS iPhone 14, iOS 16.4
"react-native": "^0.72.0"
"react-native-reanimated": "3.3.0"

Pods > Developement Pods > RNReanimated:

image

I have also tried using various combinations of previous react-native versions along with earlier versions of react-native-reanimated. Nothing worked.

Do you see anything here that is causing the error? Let me know if you need any other details of my react-native configuration. Thanks in advance.

@efstathiosntonas
Copy link
Contributor

efstathiosntonas commented Jun 26, 2023

@samir-anghan maybe a long shot but can you add this in your android/app/build.gradle:

project.ext.reanimated = [
        buildFromSource: true
]

right under the

project.ext.react = [
…
]

Edit: just saw the issue is for iOS 🤦‍♂️

@samir-anghan
Copy link

@efstathiosntonas Thanks for the suggestion, tried it but did not work.

@efstathiosntonas
Copy link
Contributor

efstathiosntonas commented Jun 26, 2023

@samir-anghan did you tried running metro bundler with —reset-cache trigger?

before doing so open terminal and run watchman watch-del-all

@samir-anghan
Copy link

@efstathiosntonas Yes, tried, but unfortunately, none of these helped - clearing metro cache, clearing node modules, clearing Pods folder and deleting Podfile.lock, clearing derived data and running the clean build in Xcode :(

Tried everything that I could think of. Any further suggestions are appreciated.

@tomekzaw
Copy link
Member

Hey @samir-anghan, I've tried to reproduce the problem but it works for me. Here's what I did:

npx react-native@next init MyApp --version 0.72.0 --skip-install
cd MyApp
yarn add react-native-reanimated@3.3.0
cd ios
pod install
cd ..
# overwrite App.tsx with https://raw.githubusercontent.com/software-mansion/react-native-reanimated/main/app/src/examples/BokehExample.tsx
# add `plugins: ['../plugin'],` in babel.config.js
open ios/MyApp.xcworkspace
# build the app in Xcode

I'm afraid this problem might be specific to your application.

@niranjan2210
Copy link

niranjan2210 commented Jun 27, 2023

Hey @samir-anghan, I've tried to reproduce the problem but it works for me. Here's what I did:

npx react-native@next init MyApp --version 0.72.0 --skip-install
cd MyApp
yarn add react-native-reanimated@3.3.0
cd ios
pod install
cd ..
# overwrite App.tsx with https://raw.githubusercontent.com/software-mansion/react-native-reanimated/main/app/src/examples/BokehExample.tsx
# add `plugins: ['../plugin'],` in babel.config.js
open ios/MyApp.xcworkspace
# build the app in Xcode

I'm afraid this problem might be specific to your application.

I am also having this error in my app. I upgraded to 2.2.4 to 3.3.0 and I am getting this error. Cant seem to find a fix.

@tapz
Copy link

tapz commented Jun 29, 2023

I upgraded from 2.14.4 to 3.3.0 and am now seeing this error. How exactly should the native part be initialized? Should I call something in AppDelegate?

RN version is 0.72.0

@tomekzaw
Copy link
Member

@tapz It should be installed automatically, at least it works this way in a fresh RN 0.72.0 app. Do you have some custom native code (like AppDelegate written in Swift) or something like this?

@felipegmg

This comment was marked as spam.

@felire

This comment was marked as spam.

@artemis-prime
Copy link

This seems to be fixed with the combo of RN 0.72.x and RNR 3.4.x (So no need to mess with AppDelegate files)

NOTE: Remember to do pod install and also to start metro with --reset-cache to pick up the new version of the babel plugin

@NewvilleMedia

This comment was marked as spam.

@rustyonrampage
Copy link

Still getting this issue for android (could be for IOS as well, havent checked cuz running windows).
"react": "18.2.0",
"react-native": "0.72.4",
"react-native-reanimated": "^3.5.4"

@kulbir22
Copy link

Still getting this issue for android (could be for IOS as well, havent checked cuz running windows). "react": "18.2.0", "react-native": "0.72.4", "react-native-reanimated": "^3.5.4"

I too have same configuration and same issue..

@tomekzaw
Copy link
Member

tomekzaw commented Nov 28, 2023

Solution

  1. Bump react-native-reanimated to 3.6.0
  2. (iOS only) Reinstall pods: cd ios && pod install && cd ..
  3. Rebuild your native app: yarn react-native run-ios

@software-mansion software-mansion locked as resolved and limited conversation to collaborators Nov 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS Reproducible 🎉
Projects
None yet
Development

Successfully merging a pull request may close this issue.