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

ViktorOsadchyi · 2022-08-29T14:08:15Z

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

The text was updated successfully, but these errors were encountered:

alekszavialov · 2022-08-30T08:08:27Z

same issue, please check it

iou90 · 2022-09-06T05:43:03Z

@ViktorOsadchyi
Will style={{ opacity: 0.99 }} fix the emptiness issue?
And if this issue can also reproduce with react-native-webview ?
FYI: react-native-webview/react-native-webview#1915

ViktorOsadchyi · 2022-09-06T09:01:16Z

@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 · 2022-09-07T09:49:46Z

@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 · 2022-09-22T07:52:54Z

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

andreialecu · 2022-09-22T08:04:02Z

Opened react-native-webview/react-native-webview#2683

ViktorOsadchyi · 2022-09-23T13:04:17Z

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 · 2022-09-23T15:25:00Z

@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 · 2023-02-24T11:27:10Z

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

choijiho0021 · 2023-06-22T01:48:50Z

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

Bellarose143 · 2023-07-07T20:40:00Z

@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 · 2024-02-08T09:02:23Z

@choijiho0021 this worked like a charm

ViktorOsadchyi added the bug label Aug 29, 2022

ViktorOsadchyi assigned iou90 Aug 29, 2022

andreialecu mentioned this issue Sep 22, 2022

Blank webview on Android when displaying large content react-native-webview/react-native-webview#2683

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ViktorOsadchyi commented Aug 29, 2022 •

edited

Loading

alekszavialov commented Aug 30, 2022

iou90 commented Sep 6, 2022

ViktorOsadchyi commented Sep 6, 2022

iou90 commented Sep 7, 2022

andreialecu commented Sep 22, 2022 •

edited

Loading

andreialecu commented Sep 22, 2022

ViktorOsadchyi commented Sep 23, 2022

andreialecu commented Sep 23, 2022 •

edited

Loading

afonso-tsx commented Feb 24, 2023

choijiho0021 commented Jun 22, 2023

Bellarose143 commented Jul 7, 2023 •

edited

Loading

omkar2737 commented Feb 8, 2024

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

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

Comments

ViktorOsadchyi commented Aug 29, 2022 • edited Loading

alekszavialov commented Aug 30, 2022

iou90 commented Sep 6, 2022

ViktorOsadchyi commented Sep 6, 2022

iou90 commented Sep 7, 2022

andreialecu commented Sep 22, 2022 • edited Loading

andreialecu commented Sep 22, 2022

ViktorOsadchyi commented Sep 23, 2022

andreialecu commented Sep 23, 2022 • edited Loading

afonso-tsx commented Feb 24, 2023

choijiho0021 commented Jun 22, 2023

Bellarose143 commented Jul 7, 2023 • edited Loading

omkar2737 commented Feb 8, 2024

ViktorOsadchyi commented Aug 29, 2022 •

edited

Loading

andreialecu commented Sep 22, 2022 •

edited

Loading

andreialecu commented Sep 23, 2022 •

edited

Loading

Bellarose143 commented Jul 7, 2023 •

edited

Loading