Native part of Reanimated doesn't seem to be initialized on Android

[Holofox]

What happened?

Hello!

There was a need to add a react-navigation/drawer and connect the react-native-reanimated dependency. I'm currently using jitsi-meet with commit ce727d8 (tried also the latest changes 1376f59).

package.json

"@react-navigation/drawer": "6.7.1",
"react-native-reanimated": "3.14.0",

babel.config.js

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

On iOS everything works great, but on Android there is a problem when going to the router with drawer:

ERROR  Error: [Reanimated] Native part of Reanimated doesn't seem to be initialized.
See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#native-part-of-reanimated-doesnt-seem-to-be-initialized for more details. 

ConferenceDrawerNavigator.tsx

import {Dimensions} from "react-native";
import ChatWebView from "../../../../../chat/components/native/ChatWebView";
import {screen} from "../../../routes";
import Conference from "../../../../../conference/components/native/Conference";
import React from "react";
import {createDrawerNavigator} from "@react-navigation/drawer";

const ConferenceDrawer = createDrawerNavigator();

const ConferenceDrawerNavigator = () => {
    return (
        <ConferenceDrawer.Navigator
            screenOptions = {{
                headerShown: false,
                drawerPosition: 'right',
                drawerStyle: {
                    width: Dimensions.get('window').width,
                },
            }}
            drawerContent = { (props) => <ChatWebView { ...props } /> } >
            <ConferenceDrawer.Screen
                name = { screen.conference.main }
                component = { Conference } />
        </ConferenceDrawer.Navigator>
    )
}

export default ConferenceDrawerNavigator;

ConferenceNavigationContainer.tsx

<ConferenceStack.Screen
    // This component changed to ConferenceDrawerNavigator from Conference
    component = { ConferenceDrawerNavigator }
    name = { screen.conference.main }
    options = { conferenceScreenOptions } />

I'm new to React Native, can you please tell me what could be causing this? Is there anything that might be preventing this from happening in Jitsi right now? I tried different dependency versions, but it didn't solve the problem.

I understand that my problem does not apply to the stable version of Jitsi Meet, but I really need help to understand the problem. Any comments will help figure this out.

Platform

• Chrome (or Chromium based)
• Firefox
• Safari
• Other desktop browser
• Android browser
• iOS browser
• Electron app
• Android mobile app
• iOS mobile app
• Custom app using a mobile SDK

Browser / app / sdk version

9.2.2

Relevant log output

No response

Reproducibility

• The problem is reproducible on meet.jit.si

More details?

No response

[saghul]

Unfortuately Reanimated is a tricky one to integrate, because we don't rely on Application inheriting from ReactApplication, which, last I checked, Reanimated relied upon.

[Holofox]

@saghul, now it’s clear, I’ll go the other way, thanks!

software-mansion/react-native-reanimated#2719

[Holofox]

With great difficulty, but I solved the problem. To do this, we had to implement the following changes:

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java:

// ...
    static List<ReactPackage> getReactNativePackages() {
        List<ReactPackage> packages
            = new ArrayList<>(Arrays.asList(
            // ...
            new com.swmansion.reanimated.ReanimatedPackage() {
                @Override
                public ReactInstanceManager getReactInstanceManager(ReactApplicationContext reactContext) {
                    return ReactInstanceManagerHolder.getReactInstanceManager();
                }
            },
            // ...
            ));
// ...

android/sdk/build.gradle:

dependencies {
    // ...
    implementation project(':react-native-reanimated')
    // ...
}

android/build.gradle:

allprojects {
// ...
    project.ext.react = [
        enableHermes: false,
    ]
// ...
}

android/gradle.properties:

// ...
hermesEnabled=false

android/settings.gradle:

// ...
include ':react-native-reanimated'
project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')

FYI @saghul

[saghul]

Great to hear!