White flashes when loading youtube vid on iOS

[ws333]

Hi,

I get white flashes when loading youtube videos on iOS, this does not happen on Android.
The video starts playing when loaded and everything else is perfect, but the white flashes are still annoying to the users.
Didn't find any other isses that mention this.

The backgroundColor: 'black' styling only seem to affect Android since I tried with 'red' and that caused the same, but red flashing on Android and still white flashes on iOS.

Versions:
"react-native": "0.63.4",
"react-native-youtube": "^2.0.1",

I suspect I need to do something in xcode...

[Sbarcenas]

Same Issue

[lucasbdias]

Same issue

[harpreet-appinventiv]

Hi @ws333, Use onReady function to set height of youtube component as below:

<YouTube
        ref={'youtubePlayerRef'}
        apiKey="Your_API_Key"
        videoId={'4SRiBQeC8Rs'}
        onReady={(e) => this.setState({show:true})}
        style={{ height: this.state.show ? 250 : 0,  width:'100%', backgroundColor:'black', borderRadius:10}}
/>

[ws333]

@harpreet-appinventiv
Thanks for sharing, I will test your suggestion when I get to work on the iOS version again.

[ws333]

The suggestion from @harpreet-appinventiv works like a charm!

For others with this issue and using funtional components and/or a dynamic YouTube component height:

I wrapped the YouTube component in a View to get the dynamic height with onLoayout.

Edit: This solution somehow broke youtube in fullscreen, so I migrated to https://github.com/LonelyCpp/react-native-youtube-iframe

const [showYouTube, setShowYouTube] = useState(false);
const [youTubeContainerHeight, setYouTubeContainerHeight] = useState(0);

function handleOnLayoutYouTubeContainer(event: LayoutChangeEvent) {
  const { height } = event.nativeEvent.layout;
  setYouTubeContainerHeight(height);
}

return (
  <View
    style={{
      ...props.containerStyle,
      borderWidth: showYouTube ? props.containerStyle.borderWidth : 0,
    }}
    onLayout={handleOnLayoutYouTubeContainer}>
    <YouTube
      apiKey={constants.keys.googleApiKey}
      videoId={props.videoState.videoId}
      play
      onReady={(_e) => setShowYouTube(true)}
      style={{
        ...props.style,
        height: showYouTube ? youTubeContainerHeight - Number(props.containerStyle.borderWidth) * 2 : 0,
      }}
    />
  </View>
)