iou90
React Native Webview auto Height not display large content in flatlist [Android]
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
@ViktorOsadchyi
Will style={{ opacity: 0.99 }} fix the emptiness issue?
And if this issue can also reproduce with react-native-webview ?
FYI: https://github.com/react-native-webview/react-native-webview/issues/1915
@iou90 I used style={{ opacity: 0.99 }} and it didn't work for me. I think the problem is that I am using a webview with high height content inside a flatlist
I have never been able to find a solution to this problem with this library. I tried using react-native-webview and it worked for me, however I had to calculate the height of the webview content myself
@ViktorOsadchyi
I can not reproduce this issue with:
OS version: Android 12 emulator
react-native version: 0.69.1
react-native-webview version: 11.22.7
react-native-autoheight-webview version: 1.6.4
Can you test with the same conditions as above?
Just a heads up. I'm seeing the same issue on Android, although we're using https://github.com/formidable-webview/webshell for autoheight, which works similar to this library.
The issue is most likely upstream in react-native-webview.
I see this in Flipper which may be relevant:
Possibly related: https://stackoverflow.com/questions/62080137/android-webview-does-not-display-web-page-even-though-the-page-has-successfully
Opened https://github.com/react-native-webview/react-native-webview/issues/2683
I solved my problem using the react-native-webview library, on which react-native-autoheight-webview is built However, I had to write my own script to calculate the height and embed it in injectedJavaScript
It seems that this solved the problem and now the content is always displayed.
@ViktorOsadchyi this issue may not always reproduce. It's possible something you're doing makes it less likely to occur, but it will still occur in other cases. I'm doing some manual height adjustments as well and not using this library, and I have a case where I can always trigger this bug.
i fixed this with removeClippedSubviews={false} on flatlist, and overflow: 'hidden' on the webview style
DON'T USE THIS LIBRARY.
Lib can be replaced by WebView injectedJavaScript.
const webViewScript = `
setTimeout(function() {
window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight);
}, 300);
true; // note: this is required, or you'll sometimes get silent failures
`;
<WebView
style={ {height}}
originWhitelist={['*']}
source={{
html,
}}
onMessage={(event) => {
console.log('event : ', event);
setHeight(parseInt(event.nativeEvent.data));
}}
scrollEnabled
injectedJavaScript={webViewScript}
javaScriptEnabled
/>
It automatically adjusts to fit the HTML content height.
For more information, please refer to the following. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
@choijiho0021
Your comment did not work either. It does do SOMETHING but it is not accurate at all. It's not your fault, but the height value is wrong.
