react-native-webview: WebView rerender crashes on Android API 28+

Bug description:

I tried to use this library: https://github.com/jarden-digital/react-native-recaptchav3. It uses JS in a WebView to fetch a captcha token from the web.

When I render the component then initially nothing bad happens and everything works. I get the captcha token and I can use it later. The error happens when I get the token and go back to a previous app screen (not WebView page) which destroys the WebView. When I rererender the WebView then the app exits due to an error.

I consider this a normal use as I want to create a form that has a captcha where user can go back and retry at any time.

Related issues: I get a different stacktrace than https://github.com/facebook/react-native/issues/25494. One user posted a similar stack trace to mine in that same thread: https://github.com/facebook/react-native/issues/25494#issuecomment-516324822. I think that stacktrace is related to this issue as the library from his stacktrace is a different one than OP’s and the same as from my stacktrace.

I also registered this issue: https://github.com/jarden-digital/react-native-recaptchav3/issues/14. But as it’s a more general issue I decided to register one here as well.

I think these people have a fix for a similar crash but it didn’t work for me: https://github.com/celo-org/celo-monorepo/blob/db83744270f29ec748cdee422f08d3e9c4c40af7/packages/mobile/src/components/WebView.tsx

I can’t catch this error using an ErrorBoundary component as it instantly kills the whole app. It’s an error outside of JS.

This didn’t help: hardwareAccelerationDisabledAndroid={true}, this didn’t help too: style={{opacity: 0.99}}.

To Reproduce: Use recaptcha component from the library as it’s intended in the README file. This should also impact other similar libraries. Not only the ones intended for captchas.

Regular use:

  1. Render the form component.
  2. Component renders normally and executes the JS.
  3. Render a different screen of the app.
  4. Render the same form screen again.
  5. App crashes.

The crash persists if I switch to a different activity via onPause:

  1. Render the form component.
  2. Component renders normally and executes the JS.
  3. Switch to a different app, let’s say Settings.
  4. Render the Form again.
  5. App crashes.

The crash doesn’t persist if I kill the app completely (prevents the crash for the next render):

  1. Render the form component.
  2. Component renders normally and executes the JS.
  3. Go to task switcher, kill the app.
  4. Open the app and render the form component again.
  5. Normal render.
  6. Render a different screen of the app.
  7. Render the same form screen again.
  8. App crashes.

Expected behavior: Rerendering and onPause+onResume should not result in a crash.

Screenshots/Videos: I have this stack trace from logcat:

03-14 14:57:10.313  8401  8424 F libc    : Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c in tid 8424 (RenderThread), pid 8401 (rtisment._APPNAME_)
03-14 14:57:10.396  8543  8543 F DEBUG   : *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
03-14 14:57:10.396  8543  8543 F DEBUG   : Build fingerprint: 'google/sdk_gphone_x86/generic_x86:10/QSR1.200715.002/6695061:userdebug/dev-keys'
03-14 14:57:10.396  8543  8543 F DEBUG   : Revision: '0'
03-14 14:57:10.396  8543  8543 F DEBUG   : ABI: 'x86'
03-14 14:57:10.396  8543  8543 F DEBUG   : Timestamp: 2021-03-14 14:57:10+0200
03-14 14:57:10.396  8543  8543 F DEBUG   : pid: 8401, tid: 8424, name: RenderThread  >>> com.invertisment._APPNAME_ <<<
03-14 14:57:10.396  8543  8543 F DEBUG   : uid: 10133
03-14 14:57:10.396  8543  8543 F DEBUG   : signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c
03-14 14:57:10.396  8543  8543 F DEBUG   : Cause: null pointer dereference
03-14 14:57:10.396  8543  8543 F DEBUG   :     eax 00000000  ebx ef3ae9ac  ecx ef3a6548  edx f2b76460
03-14 14:57:10.396  8543  8543 F DEBUG   :     edi c617a190  esi 00000000
03-14 14:57:10.396  8543  8543 F DEBUG   :     ebp c617a088  esp c617a070  eip eeeb19ba
03-14 14:57:10.428  8543  8543 F DEBUG   : 
03-14 14:57:10.428  8543  8543 F DEBUG   : backtrace:
03-14 14:57:10.428  8543  8543 F DEBUG   :       #00 pc 002ad9ba  /system/lib/libhwui.so (SkSurface::getCanvas()+26) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #01 pc 0037cd4f  /system/lib/libhwui.so (android::uirenderer::skiapipeline::GLFunctorDrawable::onDraw(SkCanvas*)+2191) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #02 pc 003f4c34  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+612) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #03 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #04 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #05 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.428  8543  8543 F DEBUG   :       #06 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #07 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #08 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #09 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #10 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #11 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #12 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #13 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #14 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #15 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #16 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #17 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #18 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #19 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #20 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #21 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #22 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #23 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #24 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #25 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #26 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #27 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #28 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #29 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #30 pc 003f4b8d  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+445) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #31 pc 00379552  /system/lib/libhwui.so (SkCanvas::drawDrawable(SkDrawable*, SkMatrix const*)+306) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #32 pc 0062770a  /system/lib/libhwui.so (android::uirenderer::$_22::__invoke(void const*, SkCanvas*, SkMatrix const&)+42) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #33 pc 001f8f90  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::drawContent(SkCanvas*) const+2080) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #34 pc 002584d2  /system/lib/libhwui.so (android::uirenderer::skiapipeline::RenderNodeDrawable::forceDraw(SkCanvas*)+258) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #35 pc 002b02c2  /system/lib/libhwui.so (android::uirenderer::skiapipeline::SkiaPipeline::renderLayersImpl(android::uirenderer::LayerUpdateQueue const&, bool)+626) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #36 pc 002ad40d  /system/lib/libhwui.so (android::uirenderer::skiapipeline::SkiaPipeline::renderFrame(android::uirenderer::LayerUpdateQueue const&, SkRect const&, std::__1::vector<android::sp<android::uirenderer::RenderNode>, std::__1::allocator<android::sp<android::uirenderer::RenderNode>>> const&, bool, android::uirenderer::Rect const&, sk_sp<SkSurface>, SkMatrix const&)+93) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #37 pc 002ad0b0  /system/lib/libhwui.so (android::uirenderer::skiapipeline::SkiaOpenGLPipeline::draw(android::uirenderer::renderthread::Frame const&, SkRect const&, SkRect const&, android::uirenderer::LightGeometry const&, android::uirenderer::LayerUpdateQueue*, android::uirenderer::Rect const&, bool, android::uirenderer::LightInfo const&, std::__1::vector<android::sp<android::uirenderer::RenderNode>, std::__1::allocator<android::sp<android::uirenderer::RenderNode>>> const&, android::uirenderer::FrameInfoVisualizer*)+352) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #38 pc 002ba04c  /system/lib/libhwui.so (android::uirenderer::renderthread::CanvasContext::draw()+332) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #39 pc 0038e884  /system/lib/libhwui.so (android::uirenderer::renderthread::CanvasContext::prepareAndDraw(android::uirenderer::RenderNode*)+276) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #40 pc 0038e75b  /system/lib/libhwui.so (android::uirenderer::renderthread::CanvasContext::doFrame()+59) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #41 pc 0039961b  /system/lib/libhwui.so (android::uirenderer::renderthread::RenderThread::dispatchFrameCallbacks()+219) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #42 pc 00399cc0  /system/lib/libhwui.so (_ZNSt3__110__function6__funcIZN7android10uirenderer12renderthread12RenderThread22drainDisplayEventQueueEvE3$_1NS_9allocatorIS6_EEFvvEEclEv$b51e00ba6ca56620b1a513bb80fe7121+32) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #43 pc 002cf38f  /system/lib/libhwui.so (android::uirenderer::WorkQueue::process()+255) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #44 pc 002cf0ff  /system/lib/libhwui.so (android::uirenderer::renderthread::RenderThread::threadLoop()+127) (BuildId: 10d1e316b7aa14d35052a448bd944fde)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #45 pc 00014166  /system/lib/libutils.so (android::Thread::_threadLoop(void*)+342) (BuildId: 288ba3aff5b46dbd7e74be954af88b83)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #46 pc 00013aa6  /system/lib/libutils.so (thread_data_t::trampoline(thread_data_t const*)+246) (BuildId: 288ba3aff5b46dbd7e74be954af88b83)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #47 pc 0011a8e5  /apex/com.android.runtime/lib/bionic/libc.so (__pthread_start(void*)+53) (BuildId: 471745f0fbbcedb3db1553d5bd6fcd8b)
03-14 14:57:10.429  8543  8543 F DEBUG   :       #48 pc 000af6a7  /apex/com.android.runtime/lib/bionic/libc.so (__start_thread+71) (BuildId: 471745f0fbbcedb3db1553d5bd6fcd8b)

Environment:

  • OS: Manjaro Linux
  • OS version: 5.10
  • react-native version: ~0.63.4
  • react-native-webview version: ^11.2.4

Devices I tested: Android emulator with API 30 - crashes Android emulator with API 29 - crashes Android emulator with API 27 - works Android physical with API 21 - works (android 7.0)

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 19
  • Comments: 42 (1 by maintainers)

Commits related to this issue

Most upvoted comments

I also was faced with a crash when I was trying to navigate to a non-webview component. The solution for me was to add the androidLayerType prop inside the WebView component

<WebView
    androidLayerType="software"
    ....//....
/>

The workaround that worked for me was:

...
              <Stack.Navigator
                screenOptions={{
                  animationEnabled: Platform.select({
                    ios: true,
                    android: false,
                  }),
...

It looks like android 12 (SDK 31) has a “bounce” animation for scrollviews. This also triggers the crash ☹️

fortunately the opacity workaround still works.

Also started getting crashes on Android 12 recently, seems to be related to WebViews inside a ScrollView (the new overscroll effect)

signal 11 (SIGSEGV), code 1 (SEGV_MAPERR)
SkSurface::getCanvas()

<ScrollView overScrollMode="never" seems to fix it too

a workaround is to set the style of WebView to opacity: 0.99, to prevent the crash

It looks like android 12 (SDK 31) has a “bounce” animation for scrollviews. This also triggers the crash ☹️

fortunately the opacity workaround still works.

Thanks, @markstreich. <ScrollView overScrollMode="never" fixed it for us as well.

Tip: If you want to disable it globally, the easiest way is probably to do it in your styles.xml file.

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    {...}
    <item name="android:overScrollMode">never</item>
</style>

Reference: https://stackoverflow.com/a/17283061

Hello @Invertisment , I have found the solution for this issue as below: Use navigationOptions: { animationEnabled: false } for 4.X react-navigation version and Use options={{animationEnabled: false}} for 5.x react-navigation version. Please refer this: https://github.com/LonelyCpp/react-native-youtube-iframe/issues/101#issuecomment-768052900

opacity=0.99 or react-navigation animationEnabled=false works for me. androidLayerType="software" has a very bad impact on performances. overScrollMode ="never" is invalid because I’m not using scrollView

Another solution to fix this is to mount the html view after the interaction manager is complete.

  const [isFocused, setIsFocused] = useState(false)
  const navigation = useNavigation()

  useFocusEffect(
    useCallback(() => {
      InteractionManager.runAfterInteractions(() => setIsFocused(true))
    }, [])
  )

// This is needed to make sure the component is removed from the dom
// before the navigation animation starts
  useEffect(
    useCallback(() => {
      const unsubscribe = navigation.addListener('beforeRemove', () => {
        setIsFocused(false)
      })
      return unsubscribe
    }, [])
  )

return (
  <>
    {isFocused ? <WebView {...yourProps} /> : <LoadingView />}
  </>
)

这是来自QQ邮箱的假期自动回复邮件。 您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。

<Stack.Screen options={{ animation:“none” }} />

worked for me.

I got this error as well. Disabling react-navigation animations worked for me, but <WebView androidLayerType="software" /> also did the trick, and I didn’t have to disable all the animations for Android.

This issue still exists but the opacity workaround worked for me:

import { forwardRef } from "react"
import { StyleSheet } from "react-native"
import { WebView, WebViewProps } from "react-native-webview"

const CustomWebView = forwardRef((props: WebViewProps) => {
  return <WebView {...props} style={styles.webView} />
})

export default CustomWebView

const styles = StyleSheet.create({
  webView: {
    opacity: 0.99,
  },
})

@pepemiso16 I hope you are using WebView inside View and others properties like opacity:0.99 in style, injectedJavaScript, useWebKit. You can refer below sample:

Set WebView inside View:

<View>
<WebView
  ref={(ref) => (this.WebView = ref)}
  useWebKit={true}
  source={{html: htmlContent}}
  scrollEnabled={false}
  useWebKit={true}
  originWhitelist={['*']}
  style={{
    height: webViewHeight,
    backgroundColor: 'transparent',
    marginHorizontal: 20,
    opacity: 0.99,
  }}
  javaScriptEnabled={true}
  onMessage={this.onWebViewMessage}
  injectedJavaScript={webViewScript}
/>
</View>

Set injectedJavaScript:

const webViewScript = `
  setTimeout(function() { 
    window.ReactNativeWebView.postMessage(document.body.scrollHeight)
  }, 500);
  true; // note: this is required, or you'll sometimes get silent failures
`;

Set dynamic Height:

onWebViewMessage = (event) => {
    this.setState({webViewHeight: Number(event.nativeEvent.data)});
  };

I am hoping that above code may resolve your issue.

Thank you. I decided to use a different library that shows the WebView in a different way. I may come back to this one some day later as I didn’t want to spend too much time on it. Let the owners of WebView decide whether to close this issue. They may want to at least be aware of it.