[android] screens + scrollview + webview crash

[aniltirola]

I have 2 Screens:

• HomeScreen (first Screen in App)
• Details (second route in stacknavigator)
• screens enabled with enableScreens
• then I put some components in a scrollscreen:
  • a webview
  • a long textview
  • a button to navigate to the detailscreen
• then I start the app
• scroll down to the end (the webview is now out of view)
• press the button for navigation
• crash

Crash can be avoided by using one of the following 3 fixes (you only need one):

• not enabling screens (that means not using 'enableScreens()')
• OR passing to Webview: 'style={{ opacity: 0.99}}'
• OR passing to Webview: 'androidHardwareAccelerationDisabled'

Some Context

There is another issue which is not exactly the same but nearly. You can find it here:

react-native-webview/issues/429

But that issue is not exactly the same, because the people in that thread tell, that it was fixed in chrome 73 or 75 (different comments).

So I started a new thread here, because I use chrome 78 and detect this behaviour only in combination scrollview + webview + react-native-screens + stacknavigator.

Environment to reproduce:

• Android: pure react-native with following dependencies:

"react-native": "0.61.4",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-screens": "^2.0.0-alpha.7",
"react-native-webview": "^7.4.3",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3"

• Android: same buggy behaviour in expoclient with sdk35 with following deps:

"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-screens": "~1.0.0-alpha.23",
"react-native-web": "^0.11.7",
"react-native-webview": "7.0.5",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3"

Here is the code:

/*
This code leads to appcrash. Reproduce:

Reproduce:
- Scroll down to the end
- Webview should no be invisible (if it is still visible, then increase the const LIMIT_NUMBER_OF_LINES)
- Press the orange button (for navigation)
- app crashes

app doesn't crash if:
- not enabling screens (that means not using 'enableScreens()')
- OR passing to Webview: 'style={{ opacity: 0.99}}'
- OR passing to Webview: 'androidHardwareAccelerationDisabled'

upgrade to latest chrome does not help, crash on emualator
and on real device
chrome-version emulator:       78.0.3904.90
chrome-version on real device: 78.0.3904.62
*/



import React from "react";
import { Text, View, ScrollView, Button } from "react-native";
import { WebView } from "react-native-webview";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { enableScreens } from 'react-native-screens';

enableScreens();

const LIMIT_NUMBER_OF_LINES = 100

produceLongText = function () {
  let t = ''
  for (let i = 1; i <= LIMIT_NUMBER_OF_LINES; i++) {
    t += '' + i + ' :long text on ' + "\n"
  }
  return t
}

class HomeScreen extends React.Component {
  render() {
    return (
      <ScrollView style={{ flex: 1 }}>
        <View style={{ padding: 20 }}>
          <Button color='gray' title='No Bug: navigate to Details' onPress={
            () => this.props.navigation.navigate('Details')}
          />
        </View>
        
        <View style={{width: '100%', height: 200, borderColor: 'red', borderWidth: 2 }}>
          <WebView
            //style={{ opacity: 0.99}}
            //androidHardwareAccelerationDisabled
            source={{ html: "<h1 style='font-size: 50px'>Webview: Hello world!</h1>" }}
          />
        </View>
        <Text style={{ fontSize: 30 }}>
          {produceLongText(100)}
        </Text>
        <View style={{ padding: 20 }}>
          <Button 
            color='orange' title='Buggy: navigate to Details'
            onPress={() => this.props.navigation.navigate('Details')}
          />
        </View>
      </ScrollView>
    )
  }
}


DetailScreen = () => 
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text style={{ fontSize: 30 }}>DetailScreen</Text>
  </View>

const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Details: DetailScreen
});

export default createAppContainer(AppNavigator)

Be aware, when you test this code with expo-sdk35 you cannot use enableScreens. You must use the legacy code useScreens.

[LasseSLambertsen]

I've got a very similar issue, when navigation from a Screen with a WebView the app crashes.
Tried your "solutions" they also resolve issue with me

[oliverdolgener]

I can confirm crashes like that on Android using a setup like yours. It produces Signal 11 errors

[ChristianDein]

If we add "androidHardwareAccelerationDisabled" to the WebView tag, we get the following Error.

I/services.chedr: Background concurrent copying GC freed 99321(4MB) AllocSpace objects, 56(972KB) LOS objects, 38% free, 9MB/15MB, paused 1.053ms total 195.928ms
W/cr_AwContents: WebView.destroy() called while WebView is still attached to window.
D/AndroidRuntime: Shutting down VM
E/AndroidRuntime: FATAL EXCEPTION: main
Process: *******************+
java.lang.IllegalStateException: ScreenContainer is not attached under ReactRootView
at com.swmansion.rnscreens.ScreenContainer.findRootFragmentActivity(ScreenContainer.java:122)
at com.swmansion.rnscreens.ScreenContainer.getFragmentManager(ScreenContainer.java:138)
at com.swmansion.rnscreens.ScreenContainer.getOrCreateTransaction(ScreenContainer.java:143)
at com.swmansion.rnscreens.ScreenContainer.detachScreen(ScreenContainer.java:168)
at com.swmansion.rnscreens.ScreenContainer.onUpdate(ScreenContainer.java:219)
at com.swmansion.rnscreens.ScreenContainer.updateIfNeeded(ScreenContainer.java:202)
at com.swmansion.rnscreens.ScreenContainer.access$000(ScreenContainer.java:21)
at com.swmansion.rnscreens.ScreenContainer$1.doFrame(ScreenContainer.java:34)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:174)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
at android.view.Choreographer.doCallbacks(Choreographer.java:761)
at android.view.Choreographer.doFrame(Choreographer.java:693)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

[mahavirvataliya]

+1

[laurentlucian]

+1

[Jekiwijaya]

this is the expo link: https://snack.expo.io/@jekiwijaya/react-native-screens-webview

[pqminh]

enableScreens()
navigate to screen has a webview make app crash.

[WoLewicki]

Does the issue still exist in v. 2.4.0?

[omrip2]

This issue exists in v. 2.4.0

[folowing]

I found the main code cause this crash is below method inside Screen.java

  public void setTransitioning(boolean transitioning) {
    if (mTransitioning == transitioning) {
      return;
    }
    mTransitioning = transitioning;
    super.setLayerType(transitioning ? View.LAYER_TYPE_HARDWARE : View.LAYER_TYPE_NONE, null);
  }

if the webview set androidHardwareAccelerationDisabled={true} would temporarily fix it
or

super.setLayerType(transitioning ? View.LAYER_TYPE_SOFTWARE : View.LAYER_TYPE_NONE, null);

[NappyPirate]

This issue still exists in version 2.7.0. Setting androidHardwareAccelerationDisabled={true} on the webview does temporarily fix it, but I would like to see a better solution. The react-native-webview repo is also tracking a similar issue: react-native-webview/react-native-webview#1338

[compojoom]

I can also confirm that this happens with 2.7.0. A temporary fix as already mentioned is androidHardwareAccelerationDisabled={true}

[jasper-fu]

any updates?

[WoLewicki]

I am closing this issue to keep the discussion about react-native-webview in one place. Please see #105 for more information.

[GFean]

androidHardwareAccelerationDisabled worked for me, thanks a lot

[dasemrah]

androidHardwareAccelerationDisabled benim için çalıştı, çok teşekkürler

thanks

[NoatToan]

I found that this issue still exists.
my package.json:

 "react-native-screens": "^3.4.0",
 "react-native-webview": "^11.23.1",

Solution:
I made sure the scrollview was rendered by using setTimeout basically. Render webview after that to solve issue.