React Native Webview auto Height not display large content in flatlist [Android]

ViktorOsadchyi commented 2 years ago

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

alekszavialov commented 2 years ago

same issue, please check it

iou90 commented 2 years ago

@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

ViktorOsadchyi commented 2 years ago

@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

iou90 commented 2 years ago

@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?

andreialecu commented 1 year ago

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:

andreialecu commented 1 year ago

Opened https://github.com/react-native-webview/react-native-webview/issues/2683

ViktorOsadchyi commented 1 year ago

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.

andreialecu commented 1 year ago

@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.

afonso-tsx commented 1 year ago

i fixed this with removeClippedSubviews={false} on flatlist, and overflow: 'hidden' on the webview style

choijiho0021 commented 1 year ago

DON'T USE THIS LIBRARY.

Lib can be replaced by WebView injectedJavaScript.

스크린샷 2023-06-22 오전 10 23 48

스크린샷 2023-06-22 오전 10 47 15

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

Bellarose143 commented 1 year ago

@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.

omkar2737 commented 7 months ago

@choijiho0021 this worked like a charm

iou90 / react-native-autoheight-webview

React Native Webview auto Height not display large content in flatlist [Android] #241