react-native - How do I scroll a Webview inside scrollview for android?

Garvita C picture Garvita C · May 4, 2017 · Viewed 11.6k times · Source

I want to use WebView inside ScrollView for my react native app. But if I do so, I am not able to scroll my webview, unless I disable the scroll on scrollview. However, I need the scroll in both scrollview as well as webview. Any suggestions or solutions on how to accomplish this?

Answer

Tijo Thomas picture Tijo Thomas · Jul 25, 2018

I am also searching for this issue on the internet for the last 2-3 days and I have got an awesome solution for this ...

npm install --save react-native-webview-autoheight

After installing this with no issues

import MyWebView from "react-native-webview-autoheight";

<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
  <View
    style={{ flex: 1, flexDirection: "column", backgroundColor: "white" }}
    pointerEvents={"none"}
  >
    <Text>Hi I am at top</Text>
    <MyWebView
      //sets the activity indicator before loading content
      startInLoadingState={true}
      source={{
        uri:
          "https://stackoverflow.com/questions/43781301/react-native-how-do-i-scroll-a-webview-inside-scrollview-for-android"
      }}
    />
    <Text>Hi I am at bottom</Text>
  </View>
</ScrollView>

it works perfectly for me..