MIGRATED: WebView not scrollable when under ScrollView

Question

MIGRATED: WebView not scrollable when under ScrollView

Closed this issue 5 years ago · 36 comments

Migrated from facebook/react-native#20347.

Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.3
CPU: x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
Memory: 29.76 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.1.4 - /usr/local/bin/node
npm: 4.6.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.1 AI-173.4720617
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: ^16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-rename: 2.2.2
Description
WebView component when placed under ScrollView loses its ability to scroll content. However, if scrollEnabled={false} is passed to ScrollView, WebView is scrollable again.

Reproducible Demo
This render function would suffice:

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <WebView source={{ uri: 'http://localhost/somepage-with-scrollable-content' }}
                 style={{ height: 300 }}/> {/* this webview is not scrollable now */}
      </ScrollView>)
  }
}

This has also been mentioned in issue #10723 but it was closed without any solution

dinhtu0802 commented 5 years ago

+1

Answer 1 · 2018-12-11T10:24:32.000Z

Is there a chance for this fix any soon?

Answer 2 · 2018-12-14T19:13:43.000Z

@vvusts The way the core team handles issues in this repo is we will review them, tag them, get more info, and then ask the community for help fixing them. Then we will review, test, suggest changes, and eventually merge and deploy PRs that fix issues. So it's possible someone else might fix it, but if you want to try, it's much appreciated.

Answer 3 · 2019-03-29T17:02:06.000Z

Hey @jamonholmgren @vvusts @mehulmpt @masako-yamada 👋,

I've just tried to reproduce with the provided example and also slightly tweaked it but cannot reproduce on the latest webview:

Here's the code I tried:

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>)
  }
}

Here's a Video of Android & iOS scrolling:

https://imgur.com/a/HGZ1Kye

I'll go ahead and close this issue for now; but if you can provide a repro I'll be happy to open it again.

Thank you

Answer 4 · 2019-04-08T12:08:22.000Z

@Salakar I think the provided example is incomplete. The webviews are only not scrollable when the ScrollView itself has a scrollbar.

This only happens on Android. On iOS the webviews are still scrollable.

See this example:

<ScrollView>
    <WebView
        source={{ uri: 'https://github.com/react-native-community/react-native-webview/issues/22' }}
        style={{ height: 200 }}
    />
    <WebView source={{ uri: 'https://bbc.co.uk/news' }} style={{ height: 200 }} />
    <View style={{ height: 200, backgroundColor: 'red' }} />
    <View style={{ height: 200, backgroundColor: 'blue' }} />
    <View style={{ height: 200, backgroundColor: 'green' }} />
</ScrollView>

Answer 5 · 2019-05-16T17:03:50.000Z

I can attest to this issue. I have a React Native App which I test with an iPhone XS and a Samsung Galaxy S5 (on Android 6.0 Marshmellow) running Expo. WebViews inside ScrollViews are not scrollable on Android if the scrollEnabled property is set to {true} on the WebView. This not an issue on iOS, only on Android.

Answer 6 · 2019-05-29T07:49:03.000Z

I'm also experiencing the same issue, only on Android devices. All good on iOS as @JuanDavidLopez95 mentioned.

Answer 7 · 2019-06-05T02:26:11.000Z

reproducible with this example https://snack.expo.io/r1E6viX0N

Note when the height is large enough to exceed the current screen size, the webpage is not scrollable, when the height is small and within the current screen size, the webpage is scrollable.
And it only happens in Android devices

@Salakar There's allso a related stackoverflow discussion and proposed fix
https://stackoverflow.com/questions/13257990/android-webview-inside-scrollview-scrolls-only-scrollview

@masako-yamada already provided the pending PR... #281

Answer 8 · 2019-06-08T09:35:34.000Z

Auto height WebView example can be useful

https://gist.github.com/epeli/10c77c1710dd137a1335#gistcomment-2938357

Answer 9 · 2019-06-19T22:56:53.000Z

@jamonholmgren as above comment, the issue is only happening in Android, I believe this is a bug

Answer 10 · 2019-07-02T05:45:41.000Z

I am using react-native version 0.56
I am also facing the same issue not able to scroll the webpage in webview (android). it works fine in IOS
how to solve this issue?

Answer 11 · 2019-07-24T11:38:58.000Z

This is not related to RN as I am getting the same on 59.10.
I saw this PR: #281
Is there any chance for this to be merged any time soon?

Answer 12 · 2019-08-10T17:14:31.000Z

reproducible with this example https://snack.expo.io/r1E6viX0N

Note when the height is large enough to exceed the current screen size, the webpage is not scrollable, when the height is small and within the current screen size, the webpage is scrollable.
And it only happens in Android devices

@Salakar There's allso a related stackoverflow discussion and proposed fix
https://stackoverflow.com/questions/13257990/android-webview-inside-scrollview-scrolls-only-scrollview

@masako-yamada already provided the pending PR... #281

we don't want to edit something about the native, so can ur team test and merge the fix into master.

Answer 13 · 2019-09-11T02:11:46.000Z

I have tested this PR #281 and it solves the issue of nesting the webview inside a scrollview, but there is no traction on this ticket? It would be great if some attention could be made to this.

Answer 14 · 2019-09-11T02:24:58.000Z

@Titozzz (I saw you as the top contributor) as the comment above, do you mind to take a look on PR #281 ?

Answer 15 · 2019-11-11T00:12:11.000Z

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

Answer 16 · 2019-11-25T16:54:27.000Z

i still experience this issue..

Answer 17 · 2019-11-26T10:11:44.000Z

same here, the PR is reverted, so this issue is not resolved yet

Answer 18 · 2019-11-26T10:30:17.000Z

Actually its ok my issue was that i used fixed height for my webview and the height was bigger than the space left. So i make the height shorter and its ok now

…

On Tue, 26 Nov 2019 at 11:11 gasolin ***@***.***> wrote: same here, the PR is reverted, so this issue is not resolved yet — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#22>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACI6ANACL3K7NK4GGU6W44LQVTY6DANCNFSM4FUCEN3Q> .

Answer 19 · 2019-11-29T15:03:46.000Z

I applied change from this PR and it work fine. But this PR is not part of npm package.

Answer 20 · 2019-12-02T23:28:16.000Z

Any workaround except for manually merging the PR changes?

Answer 21 · 2020-05-04T12:40:01.000Z

Hi, I am similarly facing this issue, kindly let me know if and how you all managed to make it work finally? thanks

Answer 22 · 2020-07-20T15:53:36.000Z

I faced a similar issue when trying to put an overflowing WebView inside ScrollView. If I just put a normal WebView, ScrollView will work as intended but the height of WebView will become fixed and some of the contents are hidden. So what I did is I created a custom component autoheight WebView to make everything visible.

https://gist.github.com/jkga/4ee1c366d46a3eba9045f88c58d3bc37

Answer 23 · 2020-07-24T05:30:51.000Z

@jkga That's clever, I like it.

Answer 24 · 2020-08-18T13:55:13.000Z

This should be re-opened, I'm still having this issue on the latest versions.

Answer 25 · 2020-08-19T17:41:31.000Z

@jkga and @jamonholmgren, it's (almost) a feature of @formidable-webview/webshell. The addition to your gist is that the height will update each time the content layout change, such as with screen orientation changes, or if the layout is affected by asynchronous script after DOM is mounted. To that regard, it's a little more accurate!

For a complete guide, see: https://formidable-webview.github.io/webshell/docs/autoheight

Answer 26 · 2020-08-20T07:07:43.000Z

I see similar issue. This issue should be reopened. @jamonholmgren

When the page is not long enough to be scrolled, the webview is scrollable. However once the page becomes longer and it needs to be scrolled, the webview scroll is difficutl. Seems it is the scroll/swipe/drag gesture is capatured by scrollview but not the webview.

Answer 27 · 2020-08-20T10:39:26.000Z

I managed to get it working in a non-ideal manner in my project, as I was using a webview inside https://github.com/jeremybarbet/react-native-modalize. Disabling pan gestures with panGestureEnabled={false} fixed the WebView scrolling. Hopefully this helps somebody.

Answer 28 · 2020-11-20T10:23:06.000Z

          <WebView
            scrollEnabled={true}
            style={{height: Dimensions.get('window').height-70, width: Dimensions.get('window').width, flex: 1}}
            automaticallyAdjustContentInsets={false}
           />

This code has solved my issues. The screen height of your phone must be smaller than the webview so it can scroll. Thank you :)

Answer 29 · 2021-03-24T11:14:03.000Z

https://stackoverflow.com/a/51513193

this is a solution for me

Answer 30 · 2021-04-19T15:36:39.000Z

workaround would be to set scrollEnabled to false (somehow conditionally) on ScrollView during usage of WebView, then it works fine

Answer 31 · 2021-12-17T12:52:09.000Z

I fixed this issue

Answer 32 · 2022-04-12T06:30:07.000Z

Solved it by following one of the the answers in this SO - link

I just added nestedScrollEnabled=true just like from a normal nested ScrollView
<ScrollView> <WebView nestedScrollEnabled source={{uri:'https://www.website.com' }} /> </ScrollView>

Answer 33 · 2022-07-05T03:09:34.000Z

Hello, this link has expired

Answer 34 · 2022-07-05T07:34:25.000Z

@haohongyang1 Were you referring to my link? Link is still working but here it is again. https://stackoverflow.com/questions/63568982/how-to-make-webview-scrollable-in-react-native-webview

The solution is basically the same as the one I mentioned on my previous comment which is by adding the nestedScrollEnabled in the nested WebView.

Answer 35 · 2024-04-17T02:01:52.000Z

Anyone still looking for, @Leorenzo 's way is helped me:

     <WebView
        source={{ uri: uriWithQueryParams }}
        allowFileAccessFromFileURLs={true}
        domStorageEnabled={true}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
        originWhitelist={['*']}
        onShouldStartLoadWithRequest={() => true}
        scrollEnabled={true}
        nestedScrollEnabled
        style={{
          backgroundColor: COLORS.grey900,
        }}
      />