Skip to content

WebView inside ScrollView problem #26858

@oliverdolgener

Description

@oliverdolgener

First things first: I know that the react-native-webview is not a core component anymore but the issue occurs in combination with a core ScrollView component.

We are using a WebView inside a ScrollView to display other RN components above or below the WebView. This worked perfectly fine before upgrading from RN 0.59.10 to 0.60.5 and above. Now we're facing an annoying bug (on Android, iOS works fine) where the ScrollView automatically scrolls to the WebView's position when tapping the WebView (see video). That behaviour only occurs for the first tap after the initial rendering.

WebView_ScrollView

React Native version:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 1.22 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 21, 22, 23, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.3
      System Images: android-19 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.2 => 0.61.2

Steps To Reproduce

  1. create react native App
  2. install react-native-webview dependency
  3. use code snippet from below

Describe what you expected to happen:

The ScrollView should not scroll to the WebView's position. It should keep it scroll position.

Snack, code example, screenshot, or link to a repository:

return (
    <ScrollView>
      <Text style={{ fontSize: 20 }}>Native Component</Text>
      <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</Text>
      <Text style={{ fontSize: 20 }}>WebView</Text>
      <WebView style={{ height: 1000 }} source={{ uri: 'https://www.lipsum.com/' }} />
    </ScrollView>
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: ScrollViewComponent: WebViewRelated to the WebView component.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions