react-native-youtube video stop after 2 seconds (on fullscreen works fine) - UNAUTHORIZED_OVERLAY

Viewed 787

I'm using react-native-youtube to play videos from youtube, everything works fine except when I'm trying to play video without fullscreen. this is my code:

render(){
  var idVideo = this.props.navigation.state.params.YTID;
  const YOUR_API_KEY = "paste yout api key here";
 return (


   <View style={Styles.container}>
   <YouTube
      ref={component => {
       this._youTubeRef = component;
      }}
      play={this.state.isPlaying}
      fullscreen={this.state.fullscreen}
      loop={true}
      apiKey="YOUR_API_KEY"
      videoId={idVideo}
      showinfo={true}
      controls={1}
      modestbranding={true}
      onChangeState={e => this.setState({ status: e.state})}
      onChangeQuality={e => this.setState({ quality: e.quality })}
      onError={e => console.warn(JSON.stringify(e))}
      style={[
        Styles.YTPlayer,
        {height: this.state.height},
      ]}
      onReady={e => this.setState({ height: 300 })}
    />


     <View style={[Styles.listContainer, Styles.radius]}>

       <LinearGradient
       colors={[Colors.mainYellowOld, Colors.mainYellow2]}
       style={[Styles.titleContainer]}>
         <View style={[Styles.icAndText]}>
          <Text style={Styles.textTitle}>{this.state.videoInfos.Titre}</Text>

          <View
          style={Styles.logoContainer}>
              <Image
              source={Images.logo}
              style={Styles.imageStyle}
              />
          </View>
        </View>

       </LinearGradient>
      <View style={[Styles.bodyContainer, Styles.radius]}>
          <View style={Styles.containerDesc}>
            <View style={Styles.adressContainer}>
              <Text style={Styles.titleDesc}>Desc box</Text>
              <IconE name="info-with-circle" size={hp('2.5%')} color= {Colors.mainYellow} style={Styles.icDescContainer}/>
            </View>
            <Text style={Styles.descContent}>{this.state.videoInfos.Description}</Text>
          </View>
          <View style={Styles.imageBottomContainer}>
            <Image source={Images.arcolLogo}
              style={Styles.imageBottomStyle}
              resizeMode={'contain'}
            />
          </View>

      </View>
     </View>

   </View>

 );
 }

the onError gives me: {"target":983,"error":"UNAUTHORIZED_OVERLAY"}

ScrollViewStickyHeader.js:10 {"target":983,"error":"UNAUTHORIZED_OVERLAY"}
console.warn    @   ScrollViewStickyHeader.js:10
onError @   Url.js:47
YouTube._this._onError  @   default.js:35
invokeGuardedCallbackImpl   @   TextInput.js:1183
invokeGuardedCallback   @   TextInput.js:1290
invokeGuardedCallbackAndCatchFirstError @   TextInput.js:1280
executeDispatch @   ToolbarAndroid.android.js:228
executeDispatchesInOrder    @   ToolbarAndroid.android.js:249
executeDispatchesAndRelease @   Touchable.js:224
executeDispatchesAndReleaseTopLevel @   Touchable.js:233
forEachAccumulated  @   Touchable.js:216
runEventsInBatch    @   Touchable.js:397
runExtractedEventsInBatch   @   Touchable.js:402
(anonymous) @   TouchableWithoutFeedback.js:221
batchedUpdates$1    @   react-is.development.js:227
batchedUpdates  @   TouchableWithoutFeedback.js:47
_receiveRootNodeIDEvent @   TouchableWithoutFeedback.js:84
receiveEvent    @   TouchableWithoutFeedback.js:84
__callFunction  @   ReactNativeART.js:207
(anonymous) @   ReactNativeART.js:10
__guard @   ReactNativeART.js:154
callFunctionReturnFlushedQueue  @   ReactNativeART.js:10
(anonymous) @   debuggerWorker.js:80

I found a lot of this issue in forums but without any solution

I use the last version of "react-native-youtube": "^2.0.1" and "react-native": "0.59.1"

2 Answers

I found the solution myself, I isolated the page where there is react-native-youtube in a stacknavigator, the cause was the drawer that was above youtube

it is truly an overlapping issue setting height properly will do the job.

style={{
       alignSelf: 'stretch',
       height: dimensions.vh * 25,
       backgroundColor: 'black',
       }}
                             

I tried many things and at the end by hit and trial I was able to see it is because of the height which was getting overlapped from the bottom side and then I made it device height dependent to fit always for each device

Related