Skip to main content

Crash when used with react-navigation

  • The YoutubePlayer causes a crash immediately on navigating to another screen, and also sometimes when navigating to the screen that contains the component.
  • crashes are observed only on android
  • only some android versions have this issue (likely tied to google chrome version)
info

This will happen if you have any webviews inside a screen.

This is not exclusive to the youtube player.

Solutions#

Pick one that fits your need

Don't try to implement ALL of them.

1. Tweak react-navigation config#

use a transition animations that only involves translations. (documentation)#

<Stack.Screen  component={ScreenWithWebview}  options={{    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,  }}/>

disable transition animations on screens that have the youtube player. (documentation)#

<Stack.Screen  component={ScreenWithWebview}  options={{    animationEnabled: false,  }}/>

2. Tweak webview props#

change webview opacity to 0.99 (issue comment)#

<YoutubePlayer  webViewStyle={{opacity: 0.99}}  //  {...otherProps}/>

set renderToHardwareTextureAndroid (issue comment)#

<YoutubePlayer  webViewProps={{    renderToHardwareTextureAndroid: true,  }}  //  {...otherProps}/>

tweak androidLayerType (issue comment)#

<YoutubePlayer  webViewProps={{    androidLayerType:      Platform.OS === 'android' && Platform.Version <= 22 ? 'hardware' : 'none',  }}  //  {...otherProps}/>

github threads to follow#

should the library handle this?#

no.

All these are workarounds, and it's the responsibility of core libraries to fix the root cause.