-
Notifications
You must be signed in to change notification settings - Fork 25.1k
Description
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.
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
- create react native App
- install react-native-webview dependency
- 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>
);
