react navigation stack + react native screens + react native webview will crash (null pointer dereference) when the pop stack

[gaodeng]

Current Behavior

react navigation stack + react native screens + react native webview will crash (null pointer dereference) when the pop stack

Expected Behavior

working fine

How to reproduce

react navigation stack + react native screens + react native webview will crash (null pointer dereference) after the pop webview's stack screen

Your Environment
latest

software	version
iOS or Android	ANDROID
react-navigation
react-navigation-stack
react-native-gesture-handler
react-native-safe-area-context
react-native-screens
react-native
expo
node
npm or yarn

[yzalvov]

Same here. Both, Android emulator and real device. I use react-native-community WebView, and the following trick solved the problem for me. No more crashes.

...
<WebView
  androidHardwareAccelerationDisabled={true}
...

Credits to @emeraldsanto on stackoverflow.

[satya164]

This seems like something which needs to be fixed in react-native-webview. Closing since it's not actionable for us and workaround is mentioned.

[Nantris]

The updated solution for this is androidLayerType="software", since androidHardwareAccelerationDisabled is now deprecated.

[andreialecu]

Leaving this here for future readers:

androidLayerType="software" has been making certain web content render as transparent/invisible for us. I would be able to long press to select text, and things like links would be clickable (and trigger navigation) but still everything would basically be invisible (as if rendered with opacity: 0).

Some HTML would render properly, but other wouldn't. Be careful with androidLayerType="software".

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Hmoulvad]

I can confirm by adding androidLayerType="software" it works. Adding prop androidHardwareAccelerationDisabled doesn't seem to do anything.

[Aszurar]

With me the androidHardwareAccelerationDisabled property didn't solve it , I even tried disabling hardware acceleration directly in AndroidManifest with <activity android:hardwareAccelerated="false" /> , it even solved the problem, but the app's performance/fluidity dropped a lot, it got low fps so I don't think it's viable.

The androidLayerType="software" property avoided the crash of react native render html/react native webview with videos, but when using it, it made the videos not work anymore(the video no longer showed image, only sound) and as mentioned above, sometimes it visually affected some HTML.

So, taking a look at the possible values it could receive, I used it as: androidLayerType="hardware" and it worked perfectly, whether on the emulator or physical Android device.
(https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#androidlayertype)

Any problems using with the value as hardware?

import RenderHtml from 'react-native-render-html';
...
    <RenderHtml
      renderers={{ iframe: IframeRenderer }}
      WebView={WebView}
      defaultWebViewProps={{
        androidLayerType: 'hardware',
      }}
      contentWidth={width * 0.9}
      source={{ html: html.replace(/src="\/\//g, 'src="https://') }}
      customHTMLElementModels={{ iframe: iframeModel }}
      renderersProps={{ iframe: { scalesPageToFit: true } }}
    />

[LunatiqueCoder]

androidHardwareAccelerationDisabled did not work for me, but the following solution did:

react-native-webview/react-native-webview#811 (comment)

    <WebView
      style={{ opacity: 0.99 }}
    />