Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: Screenshot 2022-08-29 at 17 02 57

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

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:8 (2 by maintainers)

Top GitHub Comments

2reactions

ViktorOsadchyicommented, Sep 6, 2022

@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

1reaction

andreialecucommented, Sep 22, 2022

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

Top Results From Across the Web

Issues · iou90/react-native-autoheight-webview - GitHub

An auto height webview for React Native. Contribute to iou90/react-native-autoheight-webview development by creating an account on GitHub.

How to make React Native Webview auto height

Show activity on this post. I will suggest you use the react-native-autoheight-webview which gives you the auto height webview for React Native ......

react-native-autoheight-webview - npm

An auto height webview for React Native, even auto width for inline html. Latest version: 1.6.5, last published: 2 months ago.

ScrollView - React Native Archive

In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent...

Common bugs in React Native ScrollView and how to fix them

Because FlatList only renders elements that are currently showing on the screen — not all the elements at once — it is capable...