React-native Display of AutoHeightWebView causes crash in Android 10 and Android 11 - react-native

Question

I seldom ask a question but want to see whether someone has a similar experience.
In coding a react-native app, I've included the component AutoHeightWebView on a page (together with other components, such as text and images.)
A strange behaviour occurs is that when the app is installed in physical devices:
For devices of Android 9 and below: normal
For devices of Android 10 and 11: app will crash when this page is displayed (say navigated from another page)
The following is extract of the code
import React, {Component} from 'react';
import AutoHeightWebView from 'react-native-autoheight-webview'
import { Dimensions } from 'react-native'
// other imports
export default class NdetailScreen extends Component {
render(){
return (
<View style={{ flex: 1, alignItems: 'center' }}>
<ScrollView style={{flex:1}}>
<Image
resizeMode={'contain'}
style={{ width: '100%', height: 200 }}
source={{uri: this.state.homepic}}
/>
<AutoHeightWebView
style={{ width: Dimensions.get('window').width , marginTop: 0 }}
source={{ uri: 'https://xxxxxx.com/nshow.php?serial=' + this.props.route.params.unitserial + '&lang=' + this.props.route.params.lang }}
scalesPageToFit={false}
viewportContent={'width=device-width, user-scalable=no'}
/>
<View style={{height:80}}><Text> ... other text </Text></View>
</ScrollView>
</View>
)
}
}
The strange thing is, if I remove the following block, everything works fine (in the Android 10 and 11 smartphones):
<AutoHeightWebView
style={{ width: Dimensions.get('window').width , marginTop: 0 }}
source={{ uri: 'https://xxxxxx.com/nshow.php?serial=' + this.props.route.params.unitserial + '&lang=' + this.props.route.params.lang }}
scalesPageToFit={false}
viewportContent={'width=device-width, user-scalable=no'}
/>
Any advice ?

Answer 1

I believe it is a bug of AutoHeightWebView (because I have already used the most up-dated version of AutoHeightWebView and my expo / npm versions are all up-to-date.
After repeatedly observing the "crash" behaviour, I have found that if I've removed the AutoHeightWebView part, there will NOT be any crash. So it can be run without problem in an Android 10/11 devices. After that if I re-added the AutoHeightWebView part -- there will be no crash ! (you know it can be done by real-time updating of code when the device is connected to the expo development platform)
So if the AutoHeightWebView part is already there while I navigate to the screen, it will crash in the Android 10/11 devices, but if it is "added" LATER, it will be fine.
Hence, I have used a trick to fix the problem.
change the code so that the AutoHeightWebView part will NOT be rendered when the page is first loaded
in the componentDidMount() part, add a setTimeout function (say 0.5 second) to change a control state so that the AutoHeightWebView will be rendered again after 0.5 seconds when the page is loaded
The following is the code
constructor() {
super();
this.state={xxtime4:0}
}
componentDidMount() {
setTimeout(() => {
this.setState({xxtime4:'10'});
}, 500);
}
kenlist3() {
if (this.state.xxtime4==0) {
return null
} else {
return (
<AutoHeightWebView
style={{ width: Dimensions.get('window').width , marginTop: 0 }}
source={{ uri: 'https://www.xxxxx.com/displaytext.php' }}
scalesPageToFit={false}
viewportContent={'width=device-width, user-scalable=no'}
/>
)
} }
In this way, if I use {this.kenlist3()}, it will be able to display the AutoView in all the physical devices. (including Android 10/11).
I just hope that in future this bug will be fixed by the developer so that I do not need to use such a "trick". But at least it is fine for the time being.
Hope that the above can also help someone.