Jitsi-meet: Jitsi meet black screen and crash in release build

[Mayank8290]

I am integration jitsi meet in my react native project, Jitsi meet SDK not working properly, it's crashing in a release build and in debug build it's giving black screen in first time and then works on second time,

I got below error in release build
TypeError: Cannot read property 'Direction' of null, js engine: Hermes, stack:

I tried everything, I tried npm package of jitsi meet, when using npm package I got black empty screen in debug build and crash on release build,
then I try to manually implement the SDK, In this case it's working fine in debug build but crashing on a release build.

Nothing works for React Native android release build. I am using react native version 0.62

Steps to reproduce:

1. Create empty react native project with react-navigation and gesture handler.
2. Install jitsi meet npm package and you can also try with a manual install.
3. Make a release build.

Expected behavior:

it should not be given a black screen and works on release build but nothing working.

Actual behavior:

It's crashing on release build with multiple errors
TypeError: Cannot read property 'Direction' of null, js engine: Hermes, stack:

[Mayank8290]

I also tried with jitsi sdk version 2.5.1 , in debug build everything working fine but in release build getting the error ==

JitsiMeetUncaughtExceptionHandler FATAL ERROR
com.facebook.react.common.JavascriptException: TypeError: null is not an object (evaluating 't(r(d[1])).default.Direction'), stack:

[l3d00m]

Duplicate of #6860 ?

[saghul]

Yep, a duplicate indeed.

[luixxiul]

@Mayank8290 thanks for the report anyway!

[Mayank8290]

this should be duplicate of the other issue but I have provide more error, like this crash, happen in every version of jitsi meet SDK with react native.

[Mayank8290]

Nothing is working, tried everything.

[l3d00m]

Well, then leave your comments there if you haven't already. Opening a new issue will definitely not accelerate the process, providing better info (what you did) does though.

[baotoan1905]

@Mayank8290 Check this comment for issue "black screen at the first time". Solution number 2 works for me.
For issue number 2, I got the same issue, I figured out that it was because of I enabled proguard. Here is the error I catch in release mode using appcenter. Did anyone encounter it before ? Or if you know what to put into proguard, please share with me. Many thanks.

com.facebook.react.common.JavascriptException: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. This error is located at: in R in l in R in Unknown in A in S in Unknown in RCTView in l in Styled(l) in b in c in _ in Unknown in b in RCTView in RCTView in b

[Mayank8290]

@baotoan1905 please try to disable proguard then install release apk , and also share your react native version i am using 0.62 and it's crashes even after disable the proguard.

[baotoan1905]

@Mayank8290 I have found it here, it fixed my issue.
Just need to add these proguard rules

# WebRTC

-keep class org.webrtc.** { *; }
-dontwarn org.chromium.build.BuildHooksAndroid

# Jisti Meet SDK

-keep class org.jitsi.meet.** { *; }
-keep class org.jitsi.meet.sdk.** { *; }

# We added the following when we switched minifyEnabled on. Probably because we
# ran the app and hit problems...

-keep class com.facebook.react.bridge.CatalystInstanceImpl { *; }
-keep class com.facebook.react.bridge.ExecutorToken { *; }
-keep class com.facebook.react.bridge.JavaScriptExecutor { *; }
-keep class com.facebook.react.bridge.ModuleRegistryHolder { *; }
-keep class com.facebook.react.bridge.ReadableType { *; }
-keep class com.facebook.react.bridge.queue.NativeRunnable { *; }
-keep class com.facebook.react.devsupport.** { *; }

-dontwarn com.facebook.react.devsupport.**
-dontwarn com.google.appengine.**
-dontwarn com.squareup.okhttp.**
-dontwarn javax.servlet.**

# ^^^ We added the above when we switched minifyEnabled on.

# Rule to avoid build errors related to SVGs.
-keep public class com.horcrux.svg.** {*;}

For your issue, are you using hermes ? if yes please try to disable it and try again.
One more thing I have encountered before was that inside android/app/build.gradle I have to put these code since I'm using other packages in my project too. You might check if the error come from some of your third party libraries and add them there too

implementation(project(':react-native-jitsi-meet')) {
      exclude group: 'com.facebook.react',module:'react-native-locale-detector'
      exclude group: 'com.facebook.react',module:'react-native-vector-icons'
      exclude group: 'com.facebook.react',module:'react-native-community-async-storage'
      exclude group: 'com.facebook.react',module:'react-native-webview'
      exclude group: 'com.facebook.react',module:'react-native-community_netinfo'
      exclude group: 'com.facebook.react',module:'react-native-svg'
      exclude group: 'com.facebook.react',module:'react-native-fetch-blob'
      exclude group: 'com.facebook.react',module:'react-native-push-notification'
    }

[Mayank8290]

I tried your solutions, this is the error I got when opening the jitsi video conference page.

com.facebook.react.common.JavascriptException: TypeError: null is not an object (evaluating 't(r(d[1])).default.Direction'), stack:

[baotoan1905]

@Mayank8290
Please send an example or a minimal version of your project if possible. I can help to look into it.
My project configuration ( for your reference)
React-native 0.61.5
react-native-jitsi-meet 2.1.1
Proguard enabled
Hermes disabled (jitsi SDK 2.4.0 doesn't support hermes, some guys from jitsi mentioned that we need to upgrade to at least 2.6.0)
My build.gradle (com.android.tools.build:gradle:3.5.2)

project.ext {
    excludeAppGlideModule = true
}

configurations.all {
    resolutionStrategy {
     force "com.facebook.soloader:soloader:0.9.0+"
    }
}

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 24
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "27.1.1"
        googlePlayServicesVersion = "16.0.0"
        firebaseVersion = "17.5.0"
        // glideVersion = "4.11.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.2'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
      mavenLocal()
      maven {
          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
          url("$rootDir/../node_modules/react-native/android")
      }
      maven {
          // Android JSC is installed from npm
          url("$rootDir/../node_modules/jsc-android/dist")
      }
      maven { // <---- Add this block
          url "https://github.com/jitsi/jitsi-maven-repository/raw/master/releases"
      }
      google()
      jcenter()
      maven { url 'https://www.jitpack.io' }
    }
}

[Mayank8290]

Thanks for sharing your configuration, here is my project configuration :

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/material-bottom-tabs": "^5.2.9",
"@react-navigation/native": "^5.4.2",
"@react-navigation/stack": "^5.3.9",
"jsc-android": "^241213.1.0",
"lottie-ios": "^3.0.3",
"lottie-react-native": "^3.4.0",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-jitsi-meet": "^2.1.1",
"react-native-safe-area-context": "^2.0.0",
"react-native-screens": "^2.8.0",
"react-native-vector-icons": "^6.6.0"

React Native Version 0.62.2
Hermes is disabled and same 2.4.0 sdk of jitsi meet .
Proguard is disabled

and other configuration is the same as yours.

I also tried jitsi sdk 2.9.0 with Hermes enabled I got the same direction kind of error in release build.
TypeError: Cannot read property 'Direction' of null, js engine: Hermes, stack:

[baotoan1905]

@Mayank8290 What is your build tool version, did you try to upgrade it ? Mine is com.android.tools.build:gradle:3.5.2

[Mayank8290]

previous was 3.4.2 , changes to 3.5.2 the error is the same.
E/JitsiMeetSDK: JitsiMeetUncaughtExceptionHandler FATAL ERROR
com.facebook.react.common.JavascriptException: TypeError: null is not an object (evaluating 't(r(d[1])).default.Direction'), stack:

[adamthewan]

I'm also facing this issue with com.android.tools.build:gradle:4.0.0

It looks like an issue with react-native-gesture-handler

[adamthewan]

https://github.com/skrafft/react-native-jitsi-meet/issues/117#issuecomment-636263779

@Mayank8290 this solved it for me. Solution 2

[Mayank8290]

Can you send your minimal project configuration , and did u tested in release build .

[tanhx2008]

I'm also facing this issue, did you solve it? @Mayank8290

[thomas-cruz]

Why is this closed? This hasn't been fixed

[dharmendrashah]

yes

[Evanfeenstra]

Same problem here, with same error "TypeError: null is not an object (evaluating 't(r(d[1])).default.Direction')"

[Marinaarimany]

Same problem here with implementation ('org.jitsi.react:jitsi-meet-sdk:2.10.0') ! :'(

[Marinaarimany]

Même problème ici avec l'implémentation ('org.jitsi.react: jitsi-meet-sdk: 2.10.0')! : '(

@saghul will you have a solution to this problem please ? Thank you

[saghul]

We don't maintain react-native-jitsi-meet, hence can't support it. If you can reproduce the issue with the SDK samples then I can look into it.

[ZeroCool00]

@saghul I run android application in release variant
And I found this error, hope it can help fixing this error

[ZeroCool00]

I have installed react-native-webview package and this error is gone, but I am getting another error

[ZeroCool00]

Now I install rn-sound lib, and no class define error gone, but have another one