App crashes in android

None of the solutions in other issues are working for me. So I’ve created new issue here.

There’s a “YouTube” button which will open separate youtube app. The video will then be played in youtube app. If the youtube app is closed, the react native app will crash. I’ve tested it in real devices like samsung and others. How to solve the issue?

Have a look at the video here: https://youtu.be/0hUF6dhcjnQ

Code:

<YouTube
	videoId={this.props.navigation.getParam("youtubeId")} 
	play 
	fullscreen 
	loop // control whether the video should loop when ended
	onReady={this.handleReady}
	onChangeState={e => this.setState({ status: e.state })}
	onChangeQuality={e => this.setState({ quality: e.quality })}
	onError={e => this.setState({ error: e.error })}
	style={{ alignSelf: 'stretch', height: this.state.height }}
	apiKey='........'
/>

Err log:

020-03-14 10:28:09.892 11857-11893/com.rnTest E/YouTubeAndroidPlayerAPI: Embed config is not supported in RemoteEmbeddedPlayer. 2020-03-14 10:28:10.605 11857-11857/com.rnTest E/RecyclerView: No adapter attached; skipping layout 2020-03-14 10:28:16.540 11857-11857/com.rnTest E/RecyclerView: No adapter attached; skipping layout 2020-03-14 10:28:23.152 11857-11857/com.rnTest E/AndroidRuntime: FATAL EXCEPTION: main Process: com.rnTest, PID: 11857 java.lang.IllegalStateException: This YouTubePlayer has been released at nfp.aa(PG:65) at nfp.i(PG:192) at amvz.dispatchTransaction(PG:118) at dne.onTransact(PG:6) at android.os.Binder.transact(Binder.java:635) at com.google.android.youtube.player.internal.d$a$a.a(Unknown Source:18) at com.google.android.youtube.player.internal.s.play(Unknown Source:2) at com.inprogress.reactnativeyoutube.YouTubePlayerController$1.run(YouTubePlayerController.java:315) at android.os.Handler.handleCallback(Handler.java:790) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:164) at android.app.ActivityThread.main(ActivityThread.java:7000) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:441) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

Crash report in firebase crashlytics:

Fatal Exception: java.lang.IllegalStateException This YouTubePlayer has been released

nfp.aa (PG:65)
nfp.i (PG:192)
amvz.dispatchTransaction (PG:118)
dne.onTransact (PG:6)
android.os.Binder.transact (Binder.java:635)
com.google.android.youtube.player.internal.d$a$a.a (Unknown Source:18)
com.google.android.youtube.player.internal.s.play (Unknown Source:2)
com.inprogress.reactnativeyoutube.YouTubePlayerController$1.run (YouTubePlayerController.java:315)
android.os.Handler.handleCallback (Handler.java:790)
android.os.Handler.dispatchMessage (Handler.java:99)
android.os.Looper.loop (Looper.java:164)
android.app.ActivityThread.main (ActivityThread.java:7000)
java.lang.reflect.Method.invoke (Method.java)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:441)
com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1408)

[oxilor]

As @m-inan said, you should only render the react-native-youtube if the current screen is focused. In react-navigation (>= v5) you can use the useIsFocused hook for it.

import React, { useRef } from 'react';
import { View } from 'react-native';
import YouTube from 'react-native-youtube';
import { useIsFocused } from '@react-navigation/native';

const Video: React.FC = () => {
  const player = useRef<YouTube>(null);
  const focused = useIsFocused();

  return (
    <View>
      {focused && <YouTube apiKey='apiKey' videoId='videoId' ref={player} />}
    </View>
  );
};

export default Video;

It allows you to avoid app crashes.

[neilakoh]

@oxilor yep that sorted out my issue 😃 thank you so much . .