Xcode – React Native Error – The native part of Reanimated doesn't seem to be initialized

I am working on a new React Native project and am trying to get Drawer Navigation configured in the app.

I’ve followed the installation steps as per the documentation:

1. Installed react-navigation/drawer, react-native-gesture-handler & react-native-reanimated
2. Added ‘react-native-reanimated/plugin’ to the babel.config.js file
3. Run Pod Install + rebuilt android/iOS projects
4. Reset npm cache

Note, I have generated the project using forcereact, however, this doesn’t have react-navigation/drawer or reanimated pre-installed.

When running the app through Android Studio, I have no issues. The app builds with no errors and running the app on the emulator or on an android devices is working as expected.

In Xcode the project builds correctly, however, when I try to run the app on the iOS emulator, I receive the following error after metro finishes bundling:

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
 
ERROR  Error: Requiring module "node_modules/react-native-reanimated/src/index.ts", which threw an exception: TypeError: Cannot read property 'installCoreFunctions' of undefined, js engine: hermes
 
ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 
ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Here is my package.json:

{
    "name": "TenantApp",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "sdkDependencies": {
        "SalesforceMobileSDK-Android": "https://github.com/forcedotcom/SalesforceMobileSDK-Android.git#v10.2.0",
        "SalesforceMobileSDK-iOS": "https://github.com/forcedotcom/SalesforceMobileSDK-iOS.git#v10.2.0"
    },
    "dependencies": {
        "@react-native-masked-view/masked-view": "^0.2.7",
        "@react-navigation/drawer": "^6.6.2",
        "@react-navigation/native": "^6.0.2",
        "@react-navigation/stack": "^6.0.7",
        "@types/react-native-vector-icons": "^6.4.13",
        "create-react-class": "^15.7.0",
        "date-fns": "^2.30.0",
        "react": "18.1.0",
        "react-native": "0.70.1",
        "react-native-circular-progress-indicator": "^4.4.2",
        "react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v10.2.0",
        "react-native-gesture-handler": "^2.9.0",
        "react-native-reanimated": "^3.1.0",
        "react-native-redash": "^18.1.0",
        "react-native-safe-area-context": "^3.3.0",
        "react-native-screens": "^3.6.0",
        "react-native-svg": "^13.9.0",
        "react-native-vector-icons": "^9.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/preset-env": "^7.1.6",
        "@babel/runtime": "^7.12.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "@types/jest": "^26.0.18",
        "@types/react": "^18.0.20",
        "@types/react-native": "^0.70.1",
        "@types/react-test-renderer": "^17.0.1",
        "babel-jest": "^26.6.3",
        "eslint": "^7.15.0",
        "jest": "^26.6.3",
        "metro-react-native-babel-preset": "^0.72.1",
        "react-native-codegen": "^0.0.7",
        "react-test-renderer": "18.1.0",
        "rimraf": "3.0.2",
        "ts-jest": "^26.4.4",
        "typescript": "^4.8.3"
    },
    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\.(js)$": "node_modules/babel-jest",
            "\.(ts|tsx)$": "node_modules/ts-jest/preprocessor.js"
        },
        "testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\.snap$",
            "node_modules/"
        ],
        "cacheDirectory": ".jest/cache"
    }
}

Index.js:

import 'react-native-gesture-handler';

import { AppRegistry } from 'react-native';
import { App } from './app.tsx';


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

App.tsx:

import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import HomeScreen from './src/views/HomeScreen';

interface DrawerIcon {
    focused: boolean;
    color: string; 
    size: number;
}

const redPageStyle = { headerStyle: { backgroundColor: '#a83e32', borderBottomColor: 'orange', borderBottomWidth: 4 }, headerTitleAlign: 'center', headerTintColor: '#fff', sceneContainerStyle: { backgroundColor: '#a83e32' } };
const standardPageStyle = { headerStyle: { backgroundColor: '#a83e32',  borderBottomColor: 'orange', borderBottomWidth: 4 }, headerTitleAlign: 'center', headerTintColor: '#fff', sceneContainerStyle: { backgroundColor: '#ededed' } };

const homeScreenOptions = { 
    headerTitle: 'Tenant App',
    drawerIcon: ({ focused, size }: DrawerIcon) => ( <Icon name='home' size={size} color={(focused ? '#fff' : '#325ea8')} /> ), 
    ...redPageStyle 
};

const Drawer = createDrawerNavigator();

export const App = function() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <NavigationContainer>
                <Drawer.Navigator initialRouteName='Home' screenOptions={menuScreenOptions}>
                    <Drawer.Screen name='Home' component={HomeScreen} options={homeScreenOptions} />                
                </Drawer.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    );
}

const menuScreenOptions = {
    drawerStyle: { 
        width: 330
    },
    drawerActiveBackgroundColor: '#325ea8',
    drawerActiveTintColor: '#fff',
    drawerInactiveTintColor: '#333',
    drawerLabelStyle: {
        marginLeft: -15,
        fontSize: 18,
    },
    drawerItemStyle: {
        marginBottom: 7
    }
}

babel.config.js:

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['react-native-reanimated/plugin']
};

For context:

• Xcode version = Version 14.3 (14E222b)

• Emulator = iPhone 14 Pro – iOS 16.4

I cannot seem to work out what the issue is, I’ve done a bunch of searching online and nothing seems to work:

1. Delete node_modules folder and reinstall

2. Downgrade react-native-reanimate

3. Reset cache

4. Recreate the react native project from scratch

Everything online seems to point to issues with the babel.config.js file, however if this was the case, I would expect that the Android version wouldn’t work either.