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"