App crashes in android

[bbeckkk]

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)

[mayconmesquita]

+1

[arjundalal]

I am Also getting the same issue please help me to resolve it

[m-inan]

Im using the React Navigation V5. This example works for me.

import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import YoutTube from 'react-native-youtube';
import { useNavigation } from '@react-navigation/native';

import { Api } from 'src/constants';

export default function () {
  const { addListener } = useNavigation();
  const [play, setPlay] = useState(true);

  useEffect(() => {
    const unsubsfocus = addListener('focus', () => {
      console.log('focus');
      setPlay(true);
    });
    const unsubsblur = addListener('blur', () => {
      console.log('blur');
      setPlay(false);
    });

    return () => {
      unsubsfocus();
      unsubsblur();

      setPlay(false);
    };
  }, [addListener]);

  return (
    <View style={styles.container}>
      {play && (
        <YoutTube
          apiKey={Api.GoogleAPI}
          play={play}
          resumePlayAndroid={false}
          videoId="KVZ-P-ZI6W4"
          style={styles.video}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    flex: 1,
  },
});

[superphil0]

We are also getting this error in Production
had like 7 crashes or so, please let me know if someone knows a fix

[bbeckkk]

If we can just remove Youtube button (please see the image below), then it will be alright. Can we remove the "YouTube" button or disable it?

[ApWin]

The Same Issue. !!!!!!!!!

[psdewar]

+1 does any fork of this repo have a fix?

[johnbowdenatfacet]

Also having this issue

[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 . .