Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebView ScrollEnabled={false} Bug w/ Keyboard iOS Only #20793

Closed
PvanHengel opened this issue Aug 22, 2018 · 2 comments
Closed

WebView ScrollEnabled={false} Bug w/ Keyboard iOS Only #20793

PvanHengel opened this issue Aug 22, 2018 · 2 comments
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@PvanHengel
Copy link

PvanHengel commented Aug 22, 2018 •
edited
Loading

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"
  }
});```
@react-native-bot react-native-bot added Platform: iOS iOS applications. Component: WebView Related to the WebView component. labels Aug 22, 2018
@react-native-bot
Copy link
Collaborator

It looks like you are using an older version of React Native. Please update to the latest release, v0.56 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

@Titozzz Titozzz mentioned this issue Sep 10, 2018
Closed
@Titozzz
Copy link
Collaborator

Titozzz commented Sep 10, 2018

Migrated to react-native-webview/react-native-webview#13 and this issue can be closed.

@kelset kelset closed this as completed Sep 24, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Sep 24, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@hramos @Titozzz @PvanHengel @kelset @react-native-bot