Skip to main content

Crash when used with react-navigation

  • The PeertubePlayer 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 peertube 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 peertube player. (documentation)​

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

2. Tweak webview props​

change webview opacity to 0.99 (issue comment)​

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

set renderToHardwareTextureAndroid (issue comment)​

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

tweak androidLayerType (issue comment)​

<PeertubePlayer
  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.