Black screen Android

[ricardodolnl]

My screen stays black on android. I have no errors whatsoever, but JitsiMeetView does not load because the onConferenceWillJoin does also not fire. I'm on react native 0.67.2

[alihaydar56]

Same issue,did you find any solution for that?

[ricardodolnl]

Haha no not yet, that's why I created the ticket. But if I find one I'll let you know. But I'm hoping someone here has the solution.

[CharlieJ213]

The native code doesn't work. They upgraded the sdk version in the build.gradle, but never got rid of any of the deprecated methods. The whole view relies on a Listener class that isn't there anymore.

[vphutane27]

I had the same issue, it seems related to react native status bar. I was able to solve by adding below code.

import {StyleSheet, StatusBar} from 'react-native';
useEffect(() => {
    StatusBar.setHidden(false, 'none');
    StatusBar.setTranslucent(false);
    StatusBar.setBackgroundColor('#000000'); // optional
    StatusBar.setBarStyle('light-content'); // optional
}, [])

[ricardodolnl]

@vphutane27 that didn't work for me. Probably because of what @CharlieJ213 mentioned. This dependency is not compatible with the newest jitsi meet sdk version. That's why I also don't see things like onConferenceWillJoin fire.

@skrafft, do you have any indication as to when you'll be able to update this dependency to use the newest jitsi meet sdk (v4)?

[vphutane27]

@RicardoDolNL can you try downgrading the react native version, for me, the latest version was not working

[CharlieJ213]

I tried on v0.63.1 because other Jitsi Packages were saying it was best to use with v0.59 - v0.64 inclusive but it still didn't work. This package works on iOS for React Native 0.67. I'm convinced it is the Native android code that is messing things up.

The following 2 files use a class called JitsiMeetViewListener that has been deprecated since the Jitsi SDK was upgraded to 3.7.0 in the build.gradle file

https://github.com/skrafft/react-native-jitsi-meet/blob/master/android/src/main/java/com/reactnativejitsimeet/RNJitsiMeetViewManager.java

https://github.com/skrafft/react-native-jitsi-meet/blob/master/android/src/main/java/com/reactnativejitsimeet/RNJitsiMeetView.java

[alihaydar56]

I tried on v0.63.1 because other Jitsi Packages were saying it was best to use with v0.59 - v0.64 inclusive but it still didn't work. This package works on iOS for React Native 0.67. I'm convinced it is the Native android code that is messing things up.

The following 2 files use a class called JitsiMeetViewListener that has been deprecated since the Jitsi SDK was upgraded to 3.7.0 in the build.gradle file

https://github.com/skrafft/react-native-jitsi-meet/blob/master/android/src/main/java/com/reactnativejitsimeet/RNJitsiMeetViewManager.java

https://github.com/skrafft/react-native-jitsi-meet/blob/master/android/src/main/java/com/reactnativejitsimeet/RNJitsiMeetView.java

So,did you find a solution to work in andorid?

[CharlieJ213]

Unfortunately, I'm not a native developer. I can read and develop some Java, but not Android. I've been trying, but not getting anywhere useful. The way I have left it at the moment is the JitsiMeetSDK initialises a Native (Java-Side, org.jitsi.meet.sdk.JitsiMeetView) JitsiMeetView, but this means that the on the Javascript side, the <JitsiMeetView> component does nothing

[alihaydar56]

Unfortunately, I'm not a native developer. I can read and develop some Java, but not Android. I've been trying, but not getting anywhere useful. The way I have left it at the moment is the JitsiMeetSDK initialises a Native JitsiMeetView, but this means that the on the Javascript side, the <JitsiMeetView> component does nothing

Thanks for your reply. I dont agree JitsiMeetView component does nothing,because at first time it show black screen,but then u try yo start meeting second time,it works fine for android.

[CharlieJ213]

Sorry, when I said the JitsiMeetView component does nothing. I meant that in relation to this new Android code I am trying to write. Not in the current version of this package

[CharlieJ213]

Hello @skrafft any movement on this at all?

[MahmudHasanMenon]

I am also getting the same issue but when i relaod my screen it connect to a meeting. I use < JitsiMeetView> in entry point of React-native project hence i can reload by shaking android device and it works but generally when a screen render it remains black and no error shows. iOS working fine. RN version : 0.66.4

[dogankablan]

I was looking for the solution of this problem for a long time. Today I solved the problem by trying a different way.

node_modules > react-native-jitsi-meet > android > build.gradle

dependencies {
    implementation ('org.jitsi.react:jitsi-meet-sdk:3.7.0') {
      transitive = true
    }
}

in its place

dependencies {
    implementation ('org.jitsi.react:jitsi-meet-sdk:3.+') {
      transitive = true
    }
}

currently working for me.

You may encounter some errors while getting a release. Especially the package that jitsi uses may conflict with the package you use. There is a solution for that too.

YouProject>Android>App>Build.gradle

implementation(project(':react-native-jitsi-meet')) {
  ...
      exclude group: 'com.facebook.react', module:your conflicting package
...
    }

[dogukan9]

I was looking for the solution of this problem for a long time. Today I solved the problem by trying a different way.

node_modules > react-native-jitsi-meet > android > build.gradle

dependencies {
    implementation ('org.jitsi.react:jitsi-meet-sdk:3.7.0') {
      transitive = true
    }
}

in its place

dependencies {
    implementation ('org.jitsi.react:jitsi-meet-sdk:3.+') {
      transitive = true
    }
}

currently working for me.

You may encounter some errors while getting a release. Especially the package that jitsi uses may conflict with the package you use. There is a solution for that too.

YouProject>Android>App>Build.gradle

implementation(project(':react-native-jitsi-meet')) {
  ...
      exclude group: 'com.facebook.react', module:your conflicting package
...
    }

Thank you for your answer dogan. I tried but it give me Could not find com.yqritc:android-scalablevideoview:1.0.4 error for the fix it ı add jcenter() but still have black screen

[riyas145]

Touch screen are working? And are able to get release build ?

[dogankablan]

@riyas145 I did not observe any problems with the touch screen. I was able to get a release build, but there were some conflicting packages before I did. I exclude those packages .

[sakismts]

From what I ve seen the black screen happens cause the createViewInstance inside the RNJitsiMeetViewManager is called after the call function inside the RNJitsiMeetModule. As a result doesnt pass the if null check. A workaround is call the call function after the createViewInstance or use a different logic which already other libraries do.

[jdpithwa]

@sakismts: Could you please provide further details here?

[jdpithwa]

@skrafft : Any update on this? as we have to release our product to market. it would be great if you can provide solution as soon as possible.

[MahmudHasanMenon]

I downgrade react-native-reanimated to v1.13.3 and the black screen issue resolved for me. Don't know why but i investigate jitsi codebase and found there was react-native-reanimated version v1.13.3. Anyone can try this solution.

[MarinaAmy]

I downgrade react-native-reanimated to v1.13.3 and the black screen issue resolved for me. Don't know why but i investigate jitsi codebase and found there was react-native-reanimated version v1.13.3. Anyone can try this solution.

Thank you for your solution, the black screen has disappeared but I don't have the bottom bar to be able to control the camera, microphone and to hang up. Do you have a solution for me please?

My version of react native: 0.63.3 and Jitsi in implementation ('org.jitsi.react:jitsi-meet-sdk:3.+') and the library "react-native-jitsi-meet": "^2.2.0 "

Thank you :)

[jensonjohn001]

Thank you for your answer dogan. I tried but it give me Could not find com.yqritc:android-scalablevideoview:1.0.4 error for the fix it ı add jcenter() but still have black screen

@dogukan9 I am facing same issue. How did you solve it?

[dancosta-fed]

From what I ve seen the black screen happens cause the createViewInstance inside the RNJitsiMeetViewManager is called after the call function inside the RNJitsiMeetModule. As a result doesnt pass the if null check. A workaround is call the call function after the createViewInstance or use a different logic which already other libraries do.

Hi @sakismts, I'm facing this black screen issue. It's been awhile, and nothing works for me. I got intriguied with your answer. Could you possibly explain what you have done with that? Or what you would do? I've got no experience with Java-Android, so I couldn't figure out how to do it.

Here's my repo just in case: https://github.com/dancosta-fed/jitsApp

[dancosta-fed]

@skrafft : Any update on this? as we have to release our product to market. it would be great if you can provide solution as soon as possible.

Were you able to come up with a solution for this issue? I'm trying to figured out what Sakismts said it above, but no success so far.

[TacticCoder]

@skrafft : Any update on this? as we have to release our product to market. it would be great if you can provide solution as soon as possible.

Were you able to come up with a solution for this issue? I'm trying to figured out what Sakismts said it above, but no success so far.

What is the react-native-reanimated and react-native version that you are using?

[dancosta-fed]

@skrafft : Any update on this? as we have to release our product to market. it would be great if you can provide solution as soon as possible.

Were you able to come up with a solution for this issue? I'm trying to figured out what Sakismts said it above, but no success so far.

What is the react-native-reanimated and react-native version that you are using?

Well... my react-native version is 0.69.3. But this "react-native-reanimated", I'm not using it.. or at least, not intentionally. Even tried to find it on my project, as I read some people saying we should get the newest version and all.. but I'm not using it... (and honestly, don't know what it's for)

[TacticCoder]

Maybe your peer deps are using it, go to yarn.lock and look for "react-native-reanimated"

[dancosta-fed]

react-native-reanimated

Don't have the yarn.lock, as I'm using npm i. But I've looked for it on my package-lock.json and there was nothing either.

Edit: By the way, this is my repo: https://github.com/dancosta-fed/jitsApp

[TacticCoder]

Another thing to check, run the app and open LogCat to intercept errors that react-native doesn't catch. You can run it from the ADB cli or just go into random Application with android Studio open LogCat and select your app package name

[dancosta-fed]

First of all, Thanks for the reply.

Regarding the "react-native-reanimated", I don't have it anywhere on my project. But that brings me to a question... I do not have a yarn.lock file. You think that is related somehow?

Regarding the LogCat and all.. I've just turned on my computer. I'm going to try those now. Will let you know the outcome. Thanks again.

Daniel Costa

On Wed, Aug 3, 2022 at 7:05 AM Dor Perez @.***> wrote:

Another thing to check, run the app and open LogCat to intercept errors that react-native doesn't catch. You can run it from the ADB cli or just go into random Application with android Studio open LogCat and select your app package name

— Reply to this email directly, view it on GitHub https://github.com/skrafft/react-native-jitsi-meet/issues/346#issuecomment-1203745150, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQT2IZ2VOAC4CHTB3QMZ2ATVXI74ZANCNFSM5NPSP7NQ . You are receiving this because you commented.Message ID: @.***>

[dancosta-fed]

Hey... So, I've been spending all morning testing possibilities to see what LogCat gives me. Haven't got much luck.

LogCat returns: android.system.suspend@1.0-service: Error opening kernel wakelock stats for: wakeup5: Permission denied Well, I've tried a few things to get rid of that wakelock error. Follow this stackoverlfow answer https://stackoverflow.com/a/56922905/18455264. I've already had asked the permission for internet.. just needed to add: android:usesCleartextTraffic="true".

Still no success.

Another common error I'm seen on LogCat every time I run the app is this: E netmgr : qemu_pipe_open_ns:62: Could not connect to the 'pipe:qemud:network' service: Invalid argument But most people say I should be using android:usesCleartextTraffic="true". Which, I am.

Do those errors spark anything for you? Other than what the internet is saying...

[dancosta-fed]

Hey... So, I've been spending all morning testing possibilities to see what LogCat gives me. Haven't got much luck.

LogCat returns: android.system.suspend@1.0-service: Error opening kernel wakelock stats for: wakeup5: Permission denied Well, I've tried a few things to get rid of that wakelock error. Follow this stackoverlfow answer https://stackoverflow.com/a/56922905/18455264. I've already had asked the permission for internet.. just needed to add: android:usesCleartextTraffic="true".

Still no success.

Another common error I'm seen on LogCat every time I run the app is this: E netmgr : qemu_pipe_open_ns:62: Could not connect to the 'pipe:qemud:network' service: Invalid argument But most people say I should be using android:usesCleartextTraffic="true". Which, I am.

Do those errors spark anything for you? Other than what the internet is saying...

Any Help? From anybody?

[sakismts]

@dancosta-fed so What I ve done is inside the RNJitsiMeetViewManager to have a function with an annotation @ReactProp. There I set the RNJitsiMeetConferenceOptions (I copied the code that exists in the call function in the RNJitsiMeetModule) Also the .getJitsiMeetView().join(options) is copied to the function we created in the RNJitsiMeetViewManager. So now my view in RN accept props so my view will be <JitsiMeetView options={myptions} ....../>

[sakismts]

About the tooldbar that is not work updating please to update to jitsi-meet 5+

[dancosta-fed]

@dancosta-fed so What I ve done is inside the RNJitsiMeetViewManager to have a function with an annotation @ReactProp. There I set the RNJitsiMeetConferenceOptions (I copied the code that exists in the call function in the RNJitsiMeetModule) Also the .getJitsiMeetView().join(options) is copied to the function we created in the RNJitsiMeetViewManager. So now my view in RN accept props so my view will be <JitsiMeetView options={myptions} ....../>

Thank you for thaking the time. I've tried doing it like you said, but I'm new to Java, so I'm not sure if I'm doing it all right... well, I've created the the function inside the RNJitsiMeetViewManager... and it looks like this: @ReactProp(name = "options") public void JitisiFix(String url, ReadableMap userInfo, ReadableMap meetOptions, ReadableMap meetFeatureFlags) { if (mJitsiMeetViewReference.getJitsiMeetView() != null) { RNJitsiMeetUserInfo _userInfo = new RNJitsiMeetUserInfo(); if (userInfo != null) { if (userInfo.hasKey("displayName")) { _userInfo.setDisplayName(userInfo.getString("displayName")); } if (userInfo.hasKey("email")) { _userInfo.setEmail(userInfo.getString("email")); } if (userInfo.hasKey("avatar")) { String avatarURL = userInfo.getString("avatar"); try { _userInfo.setAvatar(new URL(avatarURL)); } catch (MalformedURLException e) { } } } RNJitsiMeetConferenceOptions options = new RNJitsiMeetConferenceOptions.Builder() .setRoom(url) .setToken(meetOptions.hasKey("token") ? meetOptions.getString("token") : "") .setSubject(meetOptions.hasKey("subject") ? meetOptions.getString("subject") : "") .setAudioMuted(meetOptions.hasKey("audioMuted") ? meetOptions.getBoolean("audioMuted") : false) .setAudioOnly(meetOptions.hasKey("audioOnly") ? meetOptions.getBoolean("audioOnly") : false) .setVideoMuted(meetOptions.hasKey("videoMuted") ? meetOptions.getBoolean("videoMuted") : false) .setUserInfo(_userInfo) .setFeatureFlag("add-people.enabled", meetFeatureFlags.hasKey("addPeopleEnabled") ? meetFeatureFlags.getBoolean("addPeopleEnabled") : true) .setFeatureFlag("calendar.enabled", meetFeatureFlags.hasKey("calendarEnabled") ?meetFeatureFlags.getBoolean("calendarEnabled") : true) .setFeatureFlag("call-integration.enabled", meetFeatureFlags.hasKey("callIntegrationEnabled") ?meetFeatureFlags.getBoolean("callIntegrationEnabled") : true) .setFeatureFlag("chat.enabled", meetFeatureFlags.hasKey("chatEnabled") ?meetFeatureFlags.getBoolean("chatEnabled") : true) .setFeatureFlag("close-captions.enabled", meetFeatureFlags.hasKey("closeCaptionsEnabled") ?meetFeatureFlags.getBoolean("closeCaptionsEnabled") : true) .setFeatureFlag("invite.enabled", meetFeatureFlags.hasKey("inviteEnabled") ?meetFeatureFlags.getBoolean("inviteEnabled") : true) .setFeatureFlag("android.screensharing.enabled", meetFeatureFlags.hasKey("androidScreenSharingEnabled") ?meetFeatureFlags.getBoolean("androidScreenSharingEnabled") : true) .setFeatureFlag("live-streaming.enabled", meetFeatureFlags.hasKey("liveStreamingEnabled") ?meetFeatureFlags.getBoolean("liveStreamingEnabled") : true) .setFeatureFlag("meeting-name.enabled", meetFeatureFlags.hasKey("meetingNameEnabled") ?meetFeatureFlags.getBoolean("meetingNameEnabled") : true) .setFeatureFlag("meeting-password.enabled", meetFeatureFlags.hasKey("meetingPasswordEnabled") ?meetFeatureFlags.getBoolean("meetingPasswordEnabled") : true) .setFeatureFlag("pip.enabled", meetFeatureFlags.hasKey("pipEnabled") ?meetFeatureFlags.getBoolean("pipEnabled") : true) .setFeatureFlag("kick-out.enabled", meetFeatureFlags.hasKey("kickOutEnabled") ?meetFeatureFlags.getBoolean("kickOutEnabled") : true) .setFeatureFlag("conference-timer.enabled", meetFeatureFlags.hasKey("conferenceTimerEnabled") ?meetFeatureFlags.getBoolean("conferenceTimerEnabled") : true) .setFeatureFlag("video-share.enabled", meetFeatureFlags.hasKey("videoShareButtonEnabled") ?meetFeatureFlags.getBoolean("videoShareButtonEnabled") : true) .setFeatureFlag("recording.enabled", meetFeatureFlags.hasKey("recordingEnabled") ?meetFeatureFlags.getBoolean("recordingEnabled") : true) .setFeatureFlag("reactions.enabled", meetFeatureFlags.hasKey("reactionsEnabled") ?meetFeatureFlags.getBoolean("reactionsEnabled") : true) .setFeatureFlag("raise-hand.enabled", meetFeatureFlags.hasKey("raiseHandEnabled") ?meetFeatureFlags.getBoolean("raiseHandEnabled") : true) .setFeatureFlag("tile-view.enabled", meetFeatureFlags.hasKey("tileViewEnabled") ?meetFeatureFlags.getBoolean("tileViewEnabled") : true) .setFeatureFlag("toolbox.alwaysVisible", meetFeatureFlags.hasKey("toolboxAlwaysVisible") ?meetFeatureFlags.getBoolean("toolboxAlwaysVisible") : false) .setFeatureFlag("toolbox.enabled", meetFeatureFlags.hasKey("toolboxEnabled") ?meetFeatureFlags.getBoolean("toolboxEnabled") : true) .setFeatureFlag("welcomepage.enabled", meetFeatureFlags.hasKey("welcomePageEnabled") ?meetFeatureFlags.getBoolean("welcomePageEnabled") : false) .build(); mJitsiMeetViewReference.getJitsiMeetView().join(options); } }

========================================

On my index, I've done this: `import React, { useEffect } from 'react'; import { StyleSheet } from 'react-native'; // import { DevSettings } from 'react-native';

import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';

const Jitsi = () => { const onConferenceTerminated = (nativeEvent) => { / Conference terminated event / console.log('ENCERROU A CONFERENCIA', nativeEvent); };

const onConferenceJoined = (nativeEvent) => { / Conference joined event / console.log('ENTROU NA CONFERENCIA ===>', nativeEvent); };

const onConferenceWillJoin = (nativeEvent) => { / Conference will join event / console.log('VAI ENTRAR NA CONFERENCIA', nativeEvent); };

const calling = () => { const url = 'https://meet.jit.si/', const userInfo = { displayName: 'User', email: 'user@example.com', avatar: 'https:/gravatar.com/avatar/abc123', }; const options = { audioMuted: false, audioOnly: false, videoMuted: false, subject: 'your subject', token: 'your token', }; // eslint-disable-next-line no-unused-vars const meetFeatureFlags = { addPeopleEnabled: true, calendarEnabled: true, callIntegrationEnabled: true, chatEnabled: true, closeCaptionsEnabled: true, inviteEnabled: true, androidScreenSharingEnabled: true, liveStreamingEnabled: true, meetingNameEnabled: true, meetingPasswordEnabled: true, pipEnabled: true, kickOutEnabled: true, conferenceTimerEnabled: true, videoShareButtonEnabled: true, recordingEnabled: true, reactionsEnabled: true, raiseHandEnabled: true, tileViewEnabled: true, toolboxAlwaysVisible: false, toolboxEnabled: true, welcomePageEnabled: false, }; return JitsiMeet.call(url, userInfo, options.meetFeatureFlags); };

useEffect(() => { JitsiMeet.endCall(); }, []);

return ( <JitsiMeetView options={calling} style={styles.container} onConferenceTerminated={onConferenceTerminated} onConferenceJoined={onConferenceJoined} onConferenceWillJoin={onConferenceWillJoin} /> ); };

export default Jitsi;

const styles = StyleSheet.create({ container: { display: 'flex', flex: 1, height: '100%', width: '100%', }, loadingBackground: { justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, }, }); `

The build goes fine like that. But, the app breaks and this is the message:

and finally, on my gradle.build my jitsi-meet is: 'org.jitsi.react:jitsi-meet-sdk:5.0.2'

Once again, thank you for the help! In the meanwhile, I'm trying to figure out this issue or another work around.. I'll come back if I do so. :D

[nppull]

I downgrade react-native-reanimated to v1.13.3 and the black screen issue resolved for me. Don't know why but i investigate jitsi codebase and found there was react-native-reanimated version v1.13.3. Anyone can try this solution.

Maybe the cause of the error is due to Reanimated v2.

[pavalep]

use RN 0.66.1 react-native-gesture-handler@2.1.0 "react-native-reanimated-v1" --->1.13.5

implementation ('org.jitsi.react:jitsi-meet-sdk:5.1.0') { exclude group: 'com.facebook.react',module:'react-native-google-signin' exclude group: 'com.facebook.react',module:'react-native-reanimated' exclude group: 'com.facebook.react',module:'react-native-gesture-handler' exclude group: 'com.facebook.react',module:'react-native-screens' exclude group: 'com.facebook.react',module:'react-native-safe-area-context' exclude group: 'com.facebook.react',module:'react-native-async-storage' exclude group: 'com.facebook.react',module:'react-native-async-storage_async-storage' transitive = true }

for actual code: use

setTimeout(()=>{ const userinfo={....} const options ={...} const meetFeatureFlags={...} jitsiMeet.call(ur,.....)

setTimeout(()=>{ setJitsiVisible(false) setTimeout(()=>{ setJitsiVisible(true) },100) },200) },1000)

[AhmedSamir74]

This issue have 2 reasons 1- Conflict with react-native-reanimated you should use this version 1.13.3 2- Conflict with react-native-gesture-handler you should use this version 2.2.1

[sakshamv30]

@ricardodolnl Any solid resolutions? I tried everything as mentioned in the above thread, but nothing worked.

[ricardodolnl]

@sakshamv30 no sorry man. I haven't worked on this project lately anymore.

[eversonps]

I also faced this problem recently using this package. I created a readme explaining how I did jitsi meet work on react native.

https://github.com/eversonps/example-react-native-jitsi-meet#readme