How to make WebView scrollable in react-native-webview?

Question

I have <WebView> that is embedded in a <Card.Content> as I am using react-native-paper. I am trying to have WebView scrollable. The webview shows but not scrollable.

Code I am using:

  <Card theme={{ roundness: 20 }} style={{ margin: 10, height: height*0.8 }} elevation={14}>
     <Card.Content style={{ flex: 1 }}>
        <View style={{ justifyContent: "center", alignItems: "center" }}>
              <WebView
              style={{ width: width * 0.8, height: height * 0.9 }}
              allowsBackForwardNavigationGestures={false}
              source={{ uri: "https://paypal.com"}}
              pullToRefreshEnabled={false}
              javaScriptEnabled
              startInLoadingState
              decelerationRate="normal"
              scalesPageToFit={Platform.OS == "android"?  false : true}
              originWhitelist={['*']}
              domStorageEnabled={true}
              scrollEnabled
              renderError={e => { console.log(e); }}
              />
        </View>
     </Card.Content>
  </Card>

How can I make WebView scrollable?

score 8 · Answer 1 · answered Mar 01 '22 at 10:32

8

Just add nestedScrollEnabled=true props i webview component

<ScrollView
    <WebView nestedScrollEnabled source={{uri:'https://www.website.com' }} />
 </ScrollView>

answered Mar 01 '22 at 10:32

Mustafa Uysal

173
2
5

score 2 · Answer 2 · answered Aug 24 '20 at 21:48

2

I guess you can try to wrap your WebView inside a ScrollView like this:

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <WebView
          source={{
            uri:
              'https://github.com/react-native-community/react-native-webview/issues/22'
          }}
          style={{ height: 100 }}
        />

        <WebView
          source={{ uri: 'https://bbc.co.uk/news' }}
          style={{ height: 100 }}
        />
      </ScrollView>
    );
  }
}

Also, you can use react-native-autoheight-webview

answered Aug 24 '20 at 21:48

MohamadKh75

2,582
5
28
54

can you please explain why you are using two webviews in scrollview? I did not get it. – 0x01Brain Aug 25 '20 at 00:08
I tried your method but did not work. I will give a try the library you mentioned. – 0x01Brain Aug 25 '20 at 00:08
I added two webviews just for testing! – MohamadKh75 Aug 25 '20 at 09:23
I found the issue thank you for helping, the issue was that I was using margin on `` view. I removed the margin and I got it scrollable now. Not sure why margin affected the `` scrolling. – 0x01Brain Aug 26 '20 at 07:43
If your question has been answered, please make sure to accept and vote up an answer for further references. – MohamadKh75 Aug 26 '20 at 11:00

score 1 · Answer 3 · answered Dec 03 '21 at 00:08

I was stuck with this issue.

Problem definition

Webview was inside ScrollView and Webview was taking height greater than ScrollView thats why the ScrollView was stealing the scroll event and I was not able to scroll through the webpage.

Solution

Make Webview fit the Scrollview height. For this we need to use flexGrow in contentContainerStyle

Simple Example

   return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView
        style={{ width: '100%' }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <WebView source={{ uri: contentUrl }} originWhitelist={['*']} />
      </ScrollView>
    </SafeAreaView>
  );

{flex: 1} and { width: '100%' } are important otherwise content will not be visible.

Thank you for the width 100%. How is some software this dumb? — ThaJay, Aug 01 '23 at 15:34

How to make WebView scrollable in react-native-webview?

3 Answers3

Problem definition

Solution

Simple Example