Black screen after updating to react-native v0.66.2

[hypnocill]

Previously, I've used a custom android build of jitsi-meet in an the app with react-native v0.63.4 and react-native-jitsi-meet v2.1.1. After updating the react-native version to v0.66.2, opening a video call inside the app results in a black screen and nothing happens.

I checked these solutions (https://github.com/skrafft/react-native-jitsi-meet/issues/117#issuecomment-636263779) but they seem to not work.

For 1 and 3 - I don't use StatusBar at all in this component.

As for 2: after JitsiMeet.call(url, userInfo); is called, nothing happens. I put console.log()s inside the callbacks onConferenceTerminated onConferenceJoined onConferenceWillJoin passed to and none is called.

Also, the whole component seems to render only once, these are my logs (no second render after JitsiMeet.call() - this call is done on componentDidMount with a 1000ms timeout). I also tried removing that timeout and calling JitsiMeet.call() immediately.

Here's the order in which the events happen. After JitsiMeet.call(), there's not even a new render LOG RENDER LOG Component mounted LOG Jitsi Called LOG After Jitsi Called

Anyone with an idea how to fix that?

JS errors are not shown. Adb logcat had the following output (I had given all the permissions to the app): 1311 4994 W ServiceManager: Permission failure: android.permission.CAMERA_OPEN_CLOSE_LISTENER from uid=10477 pid=24779 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 100 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 101 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 120 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 20 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 21 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 60 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 61 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 62 24779 25309 W CameraManagerGlobal: [soar.cts] ignore the status update of camera: 63 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 100 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 120 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 20 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 21 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 60 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 61 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 62 24779 25071 W CameraManagerGlobal: ignore the torch status update of camera: 63 24779 25309 D com.oney.WebRTCModule.WebRTCModule: Creating video capturer using Camera2 API. 1751 2435 D SlaveWifiManager: getWifiSlaveConnectionInfo 1751 2435 I chatty : uid=1000(system) ConnectivitySer identical 41 lines 1751 2435 D SlaveWifiManager: getWifiSlaveConnectionInfo 1751 2374 D WifiNetworkFactory: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 1751 2374 D UntrustedWifiNetworkFactory: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 1751 2374 D UntrustedWifiNetworkFactory: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 1751 2374 D WifiSlaveNetworkFactory: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 1751 2549 D Ethernet: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 1751 2548 D WIFI_AWARE_FACTORY: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 2898 2898 D PhoneSwitcherNetworkRequstListener: got request NetworkRequest [ TRACK_DEFAULT id=5642, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED Uid: 10477 AdministratorUids: [] RequestorUid: 10477 RequestorPackageName: ***packagename***] ] with score 60 and providerId 6 24779 25317 I JitsiMeetSDK: Using AudioDeviceHandlerConnectionService as the audio device handler 4434 13011 W PSIUtils: MEMORY_SOME|23798276|226718424924912 836 836 I sensors-hal: flush:209, android.sensor.accelerometer/56 836 836 I sensors-hal: flush:215, android.sensor.accelerometer/56 completed 836 873 I sensors-hal: batch:180, android.sensor.gyroscope/58, period=200000000, max_latency=0 836 873 I sensors-hal: batch:189, android.sensor.gyroscope/58, period=200000000, max_latency=0 request completed 836 873 I sensors-hal: activate:147, android.sensor.gyroscope/58 en=1 836 873 I sensors-hal: get_qmi_debug_flag:241, support_qmi_debug : false 836 873 I chatty : uid=1000(system) HwBinder:836_1 identical 1 line 836 873 I sensors-hal: get_qmi_debug_flag:241, support_qmi_debug : false 836 873 I sensors-hal: activate:158, android.sensor.gyroscope/58 en=1 completed 24779 25310 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.BV.LinearGradient.LinearGradientManager 24779 25310 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.oney.WebRTCModule.RTCVideoViewManager 836 873 I sensors-hal: batch:180, android.sensor.accelerometer/56, period=66667000, max_latency=0 836 873 I sensors-hal: batch:189, android.sensor.accelerometer/56, period=66667000, max_latency=0 request completed 836 873 I sensors-hal: activate:147, android.sensor.gyroscope/58 en=0 836 873 I sensors-hal: activate:158, android.sensor.gyroscope/58 en=0 completed 24779 25310 I ReactNativeJS: '2021-11-11T14:42:17.154Z', '[modules/browser/BrowserCapabilities.js]', 'This appears to be react-native, ver: 0.61.5-jitsi.2' 4434 13011 W PSIUtils: MEMORY_FULL|20440544|226719084959549 1751 2370 I MiuiNetworkPolicy: updateUidState uid = 10115, uidState = 19 1311 1311 W Binder:1311_6: type=1400 audit(0.0:73704): avc: denied { search } for name="795" dev="proc" ino=12756308 scontext=u:r:cameraserver:s0 tcontext=u:r:hal_camera_default:s0 tclass=dir permissive=0 1751 7542 I system_server: oneway function results will be dropped but finished with status OK and parcel size 4 1751 2626 I system_server: oneway function results will be dropped but finished with status OK and parcel size 4 1751 2626 I system_server: oneway function results will be dropped but finished with status OK and parcel size 4 1751 2495 I system_server: oneway function results will be dropped but finished with status OK and parcel size 4 1751 2495 I system_server: oneway function results will be dropped but finished with status OK and parcel size 4 4459 4459 D NfcService: Received android.intent.action.BATTERY_CHANGED 6783 6783 I BatteryInfoReceiver: ACTION_BATTERY_CHANGED

[saheemhussain]

Blank screen here in 0.64.2 as well.

[imanesaurus]

Hi guys, I've some workaround or solution about this issue. Seems like the component is not updated even we tried to add setTimeout. That's why we always got blank screen. So the solution is passed the url or "key" as a props, on useEffect, and adding it as dependency. It works for me in RN66.4

const [room, setRoom] = useState("");
const [onCall, setOncall] = useState(false);

const showCall  = () => {
  setOnCall(true)
  setRoom("newRoom");
}

if (onCall) {
  <JitsiComponent room={room} />
}

On Jitsi Component, passed the room props

   const joinCall = () => {
    const url = `https://meet.jit.si/${props.room}`
    const userInfo = {
      displayName: `Name`,
      avatar: `/avatar`
    };

    JitsiMeet.call(url, userInfo);
  }

  useEffect(() => {
    joinCall();
   // added it as dependency so it will rerender the component
  }, [props.room])`

Class component may need component did updated (Not tested yet)

  componentDidUpdated(prevProps) {
    if (this.props.room !== prevPropsRoom) joinCall()
  }

Hopefully it will works for you guys

[saheemhussain]

Best so

Hi guys, I've some workaround or solution about this issue. Seems like the component is not updated even we tried to add setTimeout. That's why we always got blank screen. So the solution is passed the url or "key" as a props, on useEffect, and adding it as dependency. It works for me in RN66.4

const [room, setRoom] = useState("");
const [onCall, setOncall] = useState(false);

const showCall  = () => {
  setOnCall(true)
  setRoom("newRoom");
}

if (onCall) {
  <JitsiComponent room={room} />
}

On Jitsi Component, passed the room props

   const joinCall = () => {
    const url = `https://meet.jit.si/${props.room}`
    const userInfo = {
      displayName: `Name`,
      avatar: `/avatar`
    };

    JitsiMeet.call(url, userInfo);
  }

  useEffect(() => {
    joinCall();
   // added it as dependency so it will rerender the component
  }, [props.room])`

Class component may need component did updated (Not tested yet)

  componentDidUpdated(prevProps) {
    if (this.props.room !== prevPropsRoom) joinCall()
  }

Hopefully it will works for you guys

Solution that worked for me was to use react-native version 0.63.4

[riyas145]

@saheemhussainchicmic are able to touch those button ? button functions are working fine for you?

[saheemhussain]

@saheemhussainchicmic are able to touch those button ? button functions are working fine for you?

For, anything above react-native 0.63.4? No, buttons didn't work for me.

[riyas145]

any solutions for that ?

[riyas145]

@saheemhussainchicmic did u find any solution for the latest RN version?

[dgreasi]

Got the same problem with 0.64.2 react native only on android. I use a custom jitsi-meet for my needs.

In my case the solution was to delete a setTimeout that i had in my main useEffect.

[saheemhussain]

android

I ended up using RN 0.63.4. I didn't try the latest react-native-jitsi-meet release yet though.

[riyas145]

@dgreasi can u please help how can i use jitsi-meet for react native ?

[saheemhussain]

No issue, but I am occupied for a couple of days. If that's ok, how would we connect?

[riyas145]

@saheemhussainchicmic if possible can u please share demo code ?

[saheemhussain]

There's nothing new in the code that's not in the Example app. Just upgrade jitsi-meet sdk to 3.10.2 in node_modules, for both Android and iOS, and RN 0.63.4

[riyas145]

After Updating that that all functions are working ? if you don't mind can u please tell me where I will need to change the versions

[riyas145]

I'm Getting this error pls help @saheemhussainchicmic

[saheemhussain]

I'm Getting this error pls help @saheemhussainchicmic

I don't think this is jitsi related. Can you share the full logs?

[riyas145]

@saheemhussainchicmic thanks for your help man now issue got fixed i'm using RN 0.63.4 jazakallah khair.

[saheemhussain]

@saheemhussainchicmic thanks for your help man now issue got fixed i'm using RN 0.63.4 jazakallah khair.

Masha Allah! May Allah bless you, brother!

[ricardodolnl]

My screen is also black on android. Running react native version 0.67.2

[rcidt]

@RicardoDolNL I solved my black screen issue by upgrading to the latest react-native-safe-area-context

In you project do yarn remove react-native-safe-area-context then yarn add react-native-safe-area-context.

Clean and rebuild your app.

[dogankablan]

I found a solution. It works for me. You can try it.

346

[jdpithwa]

@RicardoDolNL I solved my black screen issue by upgrading to the latest react-native-safe-area-context

In you project do yarn remove react-native-safe-area-context then yarn add react-native-safe-area-context.

Clean and rebuild your app.

@rcidt: I also tried this solution, but not able to solve problem. the problem is JITSIMEETView launched, but not onconfereneceWillJoin or onConferenceJoin methods are called. Could anyone please help here?

[MahmudHasanMenon]

I am also using RN version 0.66.4. 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.

[dancosta-fed]

Same issue on RN 0.69.3.

Haven't been able to figure out the issue yet. But I'm also facing the black screen on first access. After the second, things work fine.

Was anyone able ti figured this out?

[nppull]

I found the cause jitsi meet does not work with reanimated v2

[hypnocill]

@dogankablan did you find a solution?

[sakshamv30]

@dogankablan any solution?

[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

[mehthabt]

i dont have any reanimated lib installed, still it shows black screen