[android] screens + scrollview + webview crash

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.

[compojoom]

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

[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: https://github.com/react-native-community/react-native-webview/issues/1338