Bug description:
We use multiple webview components on one screen along with native listings in flatlist.
On iOS, there are no problems with display and performance. However, on Android, we encountered a crash when displaying several webview components. This issue was fixed by adding renderToHardwareTextureAndroid, androidHardwareAccelerationDisabled and style={{ opacity: 0.99 }}
We also noticed that large content is no longer displayed if the webview component is inside a flatlist
If you use androidHardwareAccelerationDisabled={false}, the content is sometimes displayed, but the behavior gets even weirder because sometimes the content still disappears.
At the same time, the height of the component is correctly calculated and the scrollbar looks correct, but instead of content, there is emptiness
Source:
const content = `
<!DOCTYPE html>
<html>
<body style="margin: 0; padding: 0;">
<div>
<a href="https://reactnative.dev/"></a>
<img style="width: 350px; height: 300px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png" />
</div>
<div>
<a href="https://reactnative.dev/"></a>
<img style="width: 350px; height: 300px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png" />
</div>
<div>
<a href="https://reactnative.dev/"></a>
<img style="width: 350px; height: 300px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png" />
</div>
</body>
</html>
`
const WebView = () => {
const bottomComponent = () => (
<AutoHeightWebView
cacheEnabled={true}
onLoad={handleOnLoad}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
source={{ html: content }}
renderToHardwareTextureAndroid={true}
androidHardwareAccelerationDisabled
androidLayerType={
Platform.OS === 'android' && Platform.Version <= 22
? 'hardware'
: 'none'
}
style={{ opacity: 0.99 }}
/>
)
return (
<FlatList
contentContainerStyle={{ flexGrow: 1, paddingVertical: 1 }}
data={[]}
renderItem={() => <></>}
keyExtractor={(item) => item.id.toString()}
showsHorizontalScrollIndicator={false}
ListFooterComponent={bottomComponent}
/>
)
}
Screenshots/Videos:
Environment:
- OS: Android
- OS version: 9, 10, 11, 12
- react-native version: 0.67.3
- react-native-webview version: 11.17.2
- react-native-autoheight-webview version: 1.6.1
Bug description:
We use multiple webview components on one screen along with native listings in flatlist.
On iOS, there are no problems with display and performance. However, on Android, we encountered a crash when displaying several webview components. This issue was fixed by adding
renderToHardwareTextureAndroid,androidHardwareAccelerationDisabledandstyle={{ opacity: 0.99 }}We also noticed that large content is no longer displayed if the webview component is inside a flatlist
If you use androidHardwareAccelerationDisabled={false}, the content is sometimes displayed, but the behavior gets even weirder because sometimes the content still disappears.
At the same time, the height of the component is correctly calculated and the scrollbar looks correct, but instead of content, there is emptiness
Source:
Screenshots/Videos:
Environment: