The native part of Reanimated doesn't seem to be initialized

[cheynewallace]

Description

After upgrading to react-native 0.72.1 and react-native-animated 3.3.0 im no longer able to start the app in dev, with metro server throwing the following 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

I've spent half a day on this error and come up with nothing, im stumped.

The error im seeing is on IOS, im not very familiar with the IOS native files so im not really sure where to look here. This was working on version 2.14.4.

Have been through all the recommended steps

• Triple checked bable.config.js
• Cleared caches, rebuilt pods
• Even wiped node_modules, cleared cached and rebuilt again.
• Tried latest nightly 3.4.0 build
• Rolling back a version to 3.2.0

Same issues.. What am I missing here?

index.js

import "react-native-gesture-handler";
import { AppRegistry } from "react-native";
import App from "./App";

AppRegistry.registerComponent('main', () => App);

babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["module:metro-react-native-babel-preset"],
        plugins: [
            "@babel/plugin-proposal-unicode-property-regex",
            "react-native-reanimated/plugin",
        ],
    };
};

Let me know if you need to see other files

Steps to reproduce

1. Start dev server react-native start --reset-cache
2. Build app yarn ios
3. App boots, starts loading bundle, crashes with error

Snack or a link to a repository

Sorry I dont have one..

Reanimated version

3.3.0

React Native version

0.72.1

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14

Acknowledgements

Yes

[github-actions[bot]]

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?

[tomekzaw]

Hey @cheynewallace, thanks for submitting this issue. Is your AppDelegate written in Swift by chance?

[cheynewallace]

Thanks for responding @tomekzaw

So, the AppDelegate is not written in Swift, it's a .mm file.

I did spend a long time however combing through the React Native template application, and the IOS specific files found at: https://github.com/react-native-community/rn-diff-purge/blob/version/0.72.1/RnDiffApp/ios/RnDiffApp

I did find a few differences between ours and what I saw there. I believe we possibly missed a few things during previous updates. I went through everything line by line and updated ours to match, as a result this error is now resolved.

To anyone else hitting this error, it's an odd one as the app builds just fine and appears to be something to do at the React level (metro reports it). I would suggest going through the diff docs or using the template app in the link above to match everything up.

Ill close this off now, thanks @tomekzaw

[tomekzaw]

@cheynewallace Thanks for the explanation!

[nikolal]

@cheynewallace Can you tell us what differences did you find? Or at least what files to check?

I am having the same issue.

[cheynewallace]

Hey @nikolal

Sure, I cant say for sure what did it, but im pretty sure it was a combination of updating the AppDelegate.mm and AppDelegate.h files.
A year or so ago we ejected from an expo app and have somewhat been cleaning up bits and peices ever since.

I based my updates on this 0.72.1 diffApp: https://github.com/react-native-community/rn-diff-purge/tree/version/0.72.1/RnDiffApp

For starters, I noticed we had AppDelgate.m not .mm, not sure if that matters, but that's what the latest template says it should be.

Our AppDelegate.h also had some different content, likely from a previous versions standard as I don tthink this is a commonly changed file.
I changed ours to match this: https://github.com/react-native-community/rn-diff-purge/blob/version/0.72.1/RnDiffApp/ios/RnDiffApp/AppDelegate.h

Our AppDelegate.mm cotent was also quite different, with a bunch of outdated Flipper setup lines in there, I removed all those as it's part of framework by default now.

I based our new AppDelegate on this: https://github.com/react-native-community/rn-diff-purge/blob/version/0.72.1/RnDiffApp/ios/RnDiffApp/AppDelegate.mm

Our new AppDelegate.mm is close to this and now looks like

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTLinkingManager.h>

#import "RNSplashScreen.h"

@interface AppDelegate () <RCTBridgeDelegate>
  @property (nonatomic, strong) NSDictionary *launchOptions;
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"main";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (RCTBridge *)initializeReactNativeApp
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:self.launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"main" initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:0.13 green:0.13 blue:0.13 alpha:1];// Change the background colour of the app starting up

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  // Set the splash screen to show by default.
  [RNSplashScreen show]; 

  return bridge;
 }

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

// Linking API
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RCTLinkingManager application:application openURL:url options:options];
}

// Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

@end

I didnt change anything in React land before it started working, so I think your problem will be around these files too..

Our index.js is stock standard

import { AppRegistry } from "react-native";
import App from "./App";
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Once this error cleared, I did have to wrap our app in a <GestureHandlerRootView style={{ flex: 1 }}> at the root level to clear a different error, although the docs on this on the software-mansion website were pretty clear,

I hope that helps.

[nikolal]

Hey @cheynewallace ,

Thanks for your help.

It seems my issue is something else since I had those files almost exact copy as the diffApp.

I also double checked my upgrade steps.

Thanks once again!

[nikolal]

I managed to fix it by running:

npx react-native-clean-project

And clearing all IOS files and Pods.

[cheynewallace]

Good to hear it was an easy fix for you, it was definately more than that for me, I must of cleared every cache, the entire node_modules folder etc a dozen times in frustration.

[demeralde]

After installing the library, I ran expo run:ios and this fixed the error for me.

[NikTheGeek1]

Hey @nikolal

Sure, I cant say for sure what did it, but im pretty sure it was a combination of updating the AppDelegate.mm and AppDelegate.h files. A year or so ago we ejected from an expo app and have somewhat been cleaning up bits and peices ever since.

I based my updates on this 0.72.1 diffApp: https://github.com/react-native-community/rn-diff-purge/tree/version/0.72.1/RnDiffApp

For starters, I noticed we had AppDelgate.m not .mm, not sure if that matters, but that's what the latest template says it should be.

Our AppDelegate.h also had some different content, likely from a previous versions standard as I don tthink this is a commonly changed file. I changed ours to match this: https://github.com/react-native-community/rn-diff-purge/blob/version/0.72.1/RnDiffApp/ios/RnDiffApp/AppDelegate.h

Our AppDelegate.mm cotent was also quite different, with a bunch of outdated Flipper setup lines in there, I removed all those as it's part of framework by default now.

I based our new AppDelegate on this: https://github.com/react-native-community/rn-diff-purge/blob/version/0.72.1/RnDiffApp/ios/RnDiffApp/AppDelegate.mm

Our new AppDelegate.mm is close to this and now looks like

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTLinkingManager.h>

#import "RNSplashScreen.h"

@interface AppDelegate () <RCTBridgeDelegate>
  @property (nonatomic, strong) NSDictionary *launchOptions;
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"main";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (RCTBridge *)initializeReactNativeApp
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:self.launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"main" initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:0.13 green:0.13 blue:0.13 alpha:1];// Change the background colour of the app starting up

  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  // Set the splash screen to show by default.
  [RNSplashScreen show]; 

  return bridge;
 }

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

// Linking API
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [RCTLinkingManager application:application openURL:url options:options];
}

// Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  return [RCTLinkingManager application:application
                   continueUserActivity:userActivity
                     restorationHandler:restorationHandler];
}

@end

I didnt change anything in React land before it started working, so I think your problem will be around these files too..

Our index.js is stock standard

import { AppRegistry } from "react-native";
import App from "./App";
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Once this error cleared, I did have to wrap our app in a <GestureHandlerRootView style={{ flex: 1 }}> at the root level to clear a different error, although the docs on this on the software-mansion website were pretty clear,

I hope that helps.

Just confirming that this solution worked for me too. I didn't change the file extension from '.m' to '.mm', but I updated the content of the file using the resources provided by @cheynewallace. Thanks a lot, it would have taken me more time than I have to solve this on my own ✌️

[cheynewallace]

Amazing @NikTheGeek1 🙂 Happy to hear it helped save you some time!

[yxwandroid]

ios端使用的是 swift

[snapre]

I am having the same issue.

[artemis-prime]

This is fixed with the combo of RN 0.72.x and RNR 3.4.x So no need to modify any app delegate files.

And don't forget to do pod install and also to start metro with --reset-cache to pick up the new version of the babel plugin

[SanjaySargam]

This is fixed with the combo of RN 0.72.x and RNR 3.4.x So no need to modify any app delegate files.

And don't forget to do pod install and also to start metro with --reset-cache to pick up the new version of the babel plugin

How can I install pod

[SanjaySargam]

I managed to fix it by running:

npx react-native-clean-project

And clearing all IOS files and Pods.

@nikolal Can you please explain in detail ? I am also facing with the same error

[ilmatic]

I'm also still seeing this issue. Have spent several hours troubleshooting and still getting this error. I'm using NX monorepo:

• react-native: 0.72.3
• react-native-reanimated: 3.4.2
• @react-navigation/native: 6.1.7
• @react-navigation/drawer: 6.6.3

Have run react-native-project-clean. Have manually cleaned. Have restarted computer. Have deleted node_modules and cleared npm cache. Have deleted pods and reinstalled. Have cleared watchman and metro cache. I've gone into xcworkspace and manually cleaned and rebuilt. I've reset all content and settings from my iOS simulator. This project is brand new, just generated using nx-create-workspace this morning. It has no other code in it except trying to create a drawer navigator.

I've peeked into AppDelegate.h and it's already using RCTDelegate instead of UIResponder. Still can't get past this error. Can someone reopen this issue?

[ilmatic]

Stripped this back even further to just using react-native-drawer-layout, no navigation. Created 2 brand new projects: one with Bare React Native, and one with NX React Native. Followed exact same setup instructions step-by-step. Bare React Native works, NX React Native has this error.

So it definitely seems NX related, but can't for the life of me think what in this regard would be different and cause this. AppDelegate files are identical with the exception of self.moduleName and jsBundleURLForBundleRoot, which are both appropriate.

Both builds work if I pull out the component that uses reanimated.

[ilmatic]

SUCCESS!

It is most certainly Nx related. My knowledge of dependency loading is not the deepest so this is a bit of a guess, but Nx doesn't seem pick up on peer dependencies of implicit dependencies (the ones it establishes by analyzing source code). The reason this was a problem was that Nx's sync-deps step didn't update the target's package.json with the react-native-reanimated: "*" entry that would signal Nx React Native to scan the package and install the corresponding Pods if necessary. So I didn't have a Reanimated Pod at all.

So if you use Nx and run into this, add

{
    "dependencies": {
        "react-native-reanimated": "*"
    }
}

to the package.json of your target. Then run the npx nx pod-install [target], and you should be good to go!

[SanjaySargam]

@ilmatic

npx nx pod-install [target]a

Here what is target

[ilmatic]

[target] is the name of the Nx app that you're building in React Native. So in my Nx workspace, which is called my-app, I have an app target called mobile, which was created using npx nx g @nx/react-native:app mobile.

So for me, I would run npx nx pod-install mobile

[ilmatic]

Note that npx nx pod-install would only be an appropriate command to use if you're working on a Nx monorepo. If you have a Bare React Native project, it'd be npx pod-install ios. I believe Expo has its own pod install command but I don't know it off-hand.

[SanjaySargam]

Note that npx nx pod-install would only be an appropriate command to use if you're working on a Nx monorepo. If you have a Bare React Native project, it'd be npx pod-install ios. I believe Expo has its own pod install command but I don't know it off-hand.

I am using react-native cli instead of expo

[martinezguillaume]

@nikolal

npx react-native-clean-project

Wow, many many thanks, I didn't know this package but it works very very well. My app is now building

my stack :

"react-native": "0.72.4",
"react-native-reanimated": "^3.4.2",

[nikolal]

@nikolal Can you please explain in detail ? I am also facing with the same error

Hey @SanjaySargam ,

Just run npx react-native-clean-project in terminal. It will ask you to install the package and you can just follow the steps. Just answer Y for all IOS steps and N to all Android steps unless you want to clean Android project too.

[prayaslashkari]

@nikolal Getting this error in production. Any idea about that?

[olasamuel486]

Go too your babel config. js file and add These to you code plugins : [ 'react-native-reaanimated/plugins'] and go back too you Terminal and restart with these command line npm start -- ---reset--cache

[marioposada]

I'm working on:

"react-native": "0.70.13",
"react-native-reanimated": "^3.4.2",

and had to downgrade reanimated to : 3.0.0 and fix my issue!

[yanni-fe]

Hey @cheynewallace, thanks for submitting this issue. Is your AppDelegate written in Swift by chance?

I am facing this issue now. And my AppDelegate is written in Swift and doesn't confirm to RCTAppDelegate. Since I just add RN to my native app.

I find in the document "If you are using Reanimated in a brownfield app, make sure to initialize the native library manually."

my question is how to initialize the native library manually?

[davidwinograd1]

Any solution?