WebView ScrollEnabled={false} Bug w/ Keyboard iOS Only #20793
Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 283.97 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.11.1 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 5.6.0 - /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:
Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
npmPackages:
react: 16.3.1 => 16.3.1
react-native: ~0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
Description
When using a WebView with the scrollEnabled prop set to false, the scrolling is disabled as expected, however, if the user focus a text area within the webview, and the keyboard displays, the scroll view automatically scrolls up to offset for the keyboard, there is no way for the user to scroll back down to see the content at the top of the page because scrolling is disabled. When scrollEnabled is set to true, and the keyboard is shown, the page should not scroll up to avoid they keyboard (or at least there should be a prop to adjust this). Note that if you use window.scrollTo(0,0) on a timer, it will scroll up, but then scroll back into view.
Reproducible Demo
Create a new empty app using CRNA, edit the app.js to match the code below. Run in an ios simulator tap into the editor area (eg a row where you see numbers). Notice that the header scrolls off the screen
import React from "react";
import { StyleSheet, Text, View, TextInput, WebView } from "react-native";
export default class App extends React.Component {
render() {
const sampleScrollText = Array.from({ length: 100 }, () =>
Math.floor(Math.random() * 40)
).join("<br/>");
const sampleHtml = `<html style=\"height: 100%; width: 100 %\"><head><meta charset=\"utf-8\"/><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /></head><body style=\"backgroundColor:'green'\"><div>WEbview Test Header Will scroll out of view on focus..</div><div style=\"height:400px;overflow-y:scroll;-webkit-overflow-scrolling: touch;\"><div contentEditable='true'>${sampleScrollText}</div></div></body></html> `;
return (
<View style={styles.container}>
<Text>TOP</Text>
<TextInput placeholder="testing123" />
<WebView
style={{ width: 500 }}
scrollEnabled={false}
source={{ html: sampleHtml }}
/>
<Text>BOTTOM</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 15,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});```