How to make React Native Webview auto height

Question

I need to render some HTML code in my React Native app. But it seems like the WebView can't be set to auto height. Please help me with this problem. This is my code.

<View style={{
                    paddingLeft: 18,
                    paddingRight: 18,
                    paddingTop: 10,
                    paddingBottom: 10,
                }}>
                    <WebView source={{
                        html: HTML
                    }}
                        javaScriptEnabled={true}
                        style={{
                            height: 200,
                            backgroundColor: colors.white,
                            marginTop: 20
                        }} />
                </View>

As you can see here, I need to define a specific value to the height prop. How can I make its height dynamic, based on the inner HTML content height?

score 3 · Accepted Answer · edited Jun 19 '21 at 07:03

3

I will suggest you use the react-native-autoheight-webview which gives you the auto height webview for React Native.

You can check it here - https://www.npmjs.com/package/react-native-autoheight-webview

edited Jun 19 '21 at 07:03

Dharman

30,962
25
85
135

answered Jun 19 '21 at 06:58

thelovekesh

1,364
1
8
22

2

Note: if there is any height problem , change scalesPageToFit={true} to scalesPageToFit={false} – Ken Lee Jun 19 '21 at 08:49

score -1 · Answer 2 · 2021-06-19T06:57:33.367

-1

I wrap WebView inside a View, and set the height from the View.

<View style={{ height: 200 }}>
  <WebView
    automaticallyAdjustContentInsets={false}
    source={{uri: 'https://player.vimeo.com/video/24156534?title=0&byline=0&portrait=0'}}
  />
</View>

heres where i get the answer pls give him credit... React native: webview height

edited Jun 19 '21 at 06:57

answered Jun 19 '21 at 06:49

minHeight is working as same as height prop – Manas Sanas Jun 19 '21 at 06:53
yes but it has other purposes... why not try it :) – Jun 19 '21 at 06:53
You copied it from here directly - https://stackoverflow.com/questions/35446209/react-native-webview-height – thelovekesh Jun 19 '21 at 06:55
if it works feel free to upvote and check it as answer to help other people if they had the same problem – Jun 19 '21 at 06:56
i dont really want the points i just really love helping people – Jun 19 '21 at 06:57
it is not even the answer to the question. we don't need to wrap webview to set the height anyway. The problem here is how to set the height as dynamic as per the content inside it. – Irfan wani Jul 22 '23 at 03:38

How to make React Native Webview auto height

2 Answers2