Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When rendering iframes with <HTML />, Android crashes while navigating back to stack screen

When enabling screens in react-native-screens, and having a screen which renders an <HTML /> component passed with an iframe HTML element, the app crashes while pressing the back button to return to the home screen. Full reproduction here.

Environment

  • React Native: 0.61.5
  • react-native-render-html: 4.2.2
  • react-native-webview: 10.3.2
  • react-native-screens: 2.8.0
  • react-native-render-html-table-bridge: 0.6.1

Crash log

07-29 17:41:49.173  6901  6901 F crashpad: dlopen: dlopen failed: library "libandroidicu.so" not found: needed by /system/lib/libharfbuzz_ng.so in namespace (default)
--------- beginning of crash
07-29 17:41:49.176  6410  6441 F libc    : Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c in tid 6441 (RenderThread), pid 6410 (com.newmednav)
07-29 17:41:49.340  6904  6904 F DEBUG   : *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
07-29 17:41:49.340  6904  6904 F DEBUG   : Build fingerprint: 'google/sdk_gphone_x86_arm/generic_x86_arm:11/RPB2.200611.009/6625208:userdebug/dev-keys'
07-29 17:41:49.340  6904  6904 F DEBUG   : Revision: '0'
07-29 17:41:49.340  6904  6904 F DEBUG   : ABI: 'x86'
07-29 17:41:49.340  6904  6904 F DEBUG   : Timestamp: 2020-07-29 17:41:49+0545
07-29 17:41:49.340  6904  6904 F DEBUG   : pid: 6410, tid: 6441, name: RenderThread  >>> com.newmednav <<<
07-29 17:41:49.340  6904  6904 F DEBUG   : uid: 10152
07-29 17:41:49.340  6904  6904 F DEBUG   : signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c
07-29 17:41:49.340  6904  6904 F DEBUG   : Cause: null pointer dereference
07-29 17:41:49.340  6904  6904 F DEBUG   :     eax efbc2cb0  ebx eed5c69c  ecx eed52a80  edx 00000000
07-29 17:41:49.341  6904  6904 F DEBUG   :     edi d139ae90  esi 00000000
07-29 17:41:49.341  6904  6904 F DEBUG   :     ebp c086ed48  esp c086eb50  eip ee698c1c
07-29 17:41:49.425  6904  6904 F DEBUG   : backtrace:
07-29 17:41:49.425  6904  6904 F DEBUG   :       #00 pc 00247c1c  /system/lib/libhwui.so (android::uirenderer::skiapipeline::GLFunctorDrawable::onDraw(SkCanvas*)+1548) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #01 pc 00303a57  /system/lib/libhwui.so (SkDrawable::draw(SkCanvas*, SkMatrix const*)+87) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #02 pc 002f4606  /system/lib/libhwui.so (SkBaseDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+38) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #03 pc 00659291  /system/lib/libhwui.so (SkGpuDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+353) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #04 pc 002d9dc0  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+48) (BuildId: 434a9b68672e1dd2b15599730362463d)
like image 935
Deepak Bhattarai Avatar asked Jul 30 '20 10:07

Deepak Bhattarai


Video Answer


2 Answers

This was caused by an incompatibility between react-native-webview and react-native-screens, which you must depend on if you are using @react-navigation/* packages.

EDIT: there seems to have been a regression since. It's being tracked here.

Fixed in [email protected]

See CHANGELOG in https://github.com/software-mansion/react-native-screens/releases/tag/2.12.0

If you can't upgrade react-native-screens

There are 3 workarounds:

WebView opacity

const tagsStyles = {
    iframe: {
        opacity: 0.99
    },
    // If you are using @native-html/table-plugin
    table: {
        opacity: 0.99
    }
}

And use this prop when rendering:

return <HTML tagsStyles={tagsStyles} ... />

Disabling hardware acceleration

In android/app/src/main/AndroidManifest.xml:

<activity
  android:hardwareAccelerated="false"
/>

Disabling native screens

From your App.js file:

// import {enableScreens} from 'react-native-screens';

// enableScreens();
like image 69
Jules Sam. Randolph Avatar answered Oct 11 '22 17:10

Jules Sam. Randolph


One more fix is to disable animation for react-navigation in navigationOptions.

static navigationOptions = () => ({
  animationEnabled: false,
});
like image 31
Gregory Galushka Avatar answered Oct 11 '22 16:10

Gregory Galushka