React-native: WebView inside ScrollView not working

[leovanhaaren]

I noticed that, on version 0.16.0, putting a WebView inside a ScrollView results in a blank page, no error is thrown. Replacing the ScrollView with a normal View fixes this problem, but gives no way of scrolling through a list with for example a header component and a WebView body. Anyone?

[facebook-github-bot]

Hey leovanhaaren, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[skevy]

@leovanhaaren Thanks for the report! Would you be able to put together a simple test case and post the link here?

[leovanhaaren]

https://github.com/leovanhaaren/ScrollViewWebView

It shows 2 WebViews, the top half in a normal View and the bottom one in a ScrollView. I can imagine this being related to the page being not loaded yet. But can't get it to work.

[leovanhaaren]

Added url now

https://github.com/leovanhaaren/ScrollViewWebView

[kameswararao]

I am facing the same issue. Any updates here?

[zhaoyu18]

+1

[BilalBudhani]

Hey did anyone happened to get through this issue? I'm facing the same problem currently. WebView doesn't appear inside ScrollView. I'm on 0.21.0.

[avishayil]

Issue still persist.

[jaygarcia]

OK, this isn't a problem per-say. It's a behavioral expectation issue. (i'm on .22rc4)

First thing to realize is that webview seems to automatically resize itself. In the below example (copied & modified from @leovanhaaren's post above), we can see that the top web view, self-sizes, based on it's parent's dimensions.

  render() {
    var source =  {uri: 'http://google.com'};
    return (
      <View style={styles.container}>
        <View style={{borderWidth:3, borderColor : '#FF0000', flex:1}}>
          <WebView source={source} style={{}} />
        </View>
        <ScrollView style={{borderWidth:3, borderColor : '#0000FF', flex:1}}>
            <WebView source={source} style={{height: 250}}/>
        </ScrollView>
      </View>
    );
  }
}

Demo:

The web view shows up fine in a scroll view, _but you must give it a size_.

Now, what happens when you have a regular <View/> in place of a <WebView/> that self-sizes based on it's parent flex:1?

    var source =  {uri: 'http://google.com'};
    return (
      <View style={styles.container}>
        <View style={{borderWidth:3, borderColor : '#FF0000', flex:1}}>
          <View source={source} style={{flex:1, backgroundColor: '#AAAAFF'}} />
        </View>
        <ScrollView style={{borderWidth:3, borderColor : '#0000FF', flex:1}}>
          <View source={source} style={{flex:1, backgroundColor: '#AAAAFF'}} />
        </ScrollView>
      </View>
    );

No View appears. Why? Because it seems that ScrollView doesn't allow children to flex themselves.
Demo:

In the case where the web view is not given a height:

    var source =  {uri: 'http://google.com'};
    return (
      <View style={styles.container}>
        <View style={{borderWidth:3, borderColor : '#FF0000', flex:1}}>
          <WebView source={source} style={{}} />
        </View>
        <ScrollView style={{borderWidth:3, borderColor : '#0000FF', flex:1}}>
            <WebView source={source} style={{}}/>
        </ScrollView>
      </View>
    );

The WebView itself is not even in the tree:

But...
Same thing happens when you have the View in scrollview with flex:1 example above.

Call me cray, but I think this issue can be closed. ;)

[satya164]

Closing based on the answer by @jaygarcia

[aferust]

the issue still exists for android :(

[carlovenus]

You need to set the height for the Webview.

[Athaphian]

This issue still persists in react native 0.53:

<ScrollView style={{
    borderColor: 'blue',
    borderWidth: 1,
    overflow: 'hidden'
}}>
    <WebView
        source={{uri: 'https://en.wikipedia.org/wiki/Financial_crisis'}}
        style={{
            height: 8000,
            width: '100%'
        }}
    />
    <Text>ABCD</Text>
</ScrollView>

The webview gets a height of 0 and there seems to be no way to get it to show.

[alainib]

Any fix or hack if we the webview content can have variable height ?

[mjugger]

I was having the same problem with my ScrollView setup. I found this package that helped me:
https://www.npmjs.com/package/react-native-webview-autoheight
I think I could implement this from scratch, but I just don't have the time at this point in my project

[0LING0]

give webview a fixed height, it can works, i use android emulator.