UNAUTHORIZED_OVERLAY Android bug

Currently experiencing this issue on Android. iOS is working fine.

Running: react native: 0.44 react-native-youtube: 1.0.0-alpha-4 Device: Galaxy Note 5 (real device)

I always get UNAUTHORIZED_OVERLAY error when playing the video inline, it just shows a black screen, no controls whatsoever. If the video starts as fullscreen it works perfectly fine, as soon as it goes inline it complains.

I’ve used previous version on RN 0.39 and it all works fine, my coding appears to be fine too. It seems to be a bug with RN 0.44.

<YouTube videoId={videoId} play={true}
           fullscreen={false} loop={false}
           controls={1}
           onReady={(e)=>{this.setState({ready:true})}}
           apiKey={apiKey}
           style={{width:300, height:150}}
           onError={(e) => {this.YTerror(e)}}
/>

Any solutions?

[ben54260]

I discover that Youtube view will show when change the orientation of screen, and no need to set fullscreen nor play.

So I solved this problem by change a bit of the height in the styles after onReady event be triggered. (initial height is 301)

onReady={e => this.setState({ height: 300 })} style={{ alignSelf: 'stretch', height: this.state.height, backgroundColor: 'black', marginVertical: 10 }}

[LonelyCpp]

The native youtube player has several constraints like this, and is too restrictive. One of the solutions seems to be to use webviews in app. More reasons why its not very reliable - https://github.com/PierfrancescoSoffritti/Android-YouTube-Player#why-does-this-library-exist

I’ve written a simple wrapper around the webplayer with react-native-webview. You can check it out https://github.com/LonelyCpp/react-native-youtube-iframe 😃