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

Question

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 1

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..

Answer 2

I fix bug scroll Webview inside ScrollView. I override func onTouchEvent if not only Webview catch event onTouch call requestDisallowInterceptTouchEvent(true);.

You can try my repo https://github.com/thepday12/react-native-webview

• package.json

  "react-native-webview": "https://github.com/thepday12/react-native-webview",

• Using

  import WebView from 'react-native-webview';

• Source from https://github.com/react-native-community/react-native-webview/?