React-native-webview: Keyboard overlaps on webview in android

Created on 6 Dec 2019 · 3Comments · Source: react-native-webview/react-native-webview

I am using this plugin. In ios it is working fine but in android keyboard overlaps on webview content. Webview contains inputbox at bottom of the screen like chat window. After clicking on input box keyboard coming on webview.

Stale bug report

Source

ranshine

👍2

Most helpful comment

Actually using KeyboardAvoidingView (https://facebook.github.io/react-native/docs/keyboardavoidingview) and enabling it only for Android fixes this.

<KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
      enabled={Platform.OS === "android"}
    >
  {/* Webview and stuff */}
</KeyboardAvoidingView>

clementoriol on 23 Jan 2020

🎉8 😄5 ❤3 🚀2

All 3 comments

We have the same issue here.
The expected behavior would be the same as the standard Chrome, where the browser adds some padding to the bottom of the window, making sure the keyboard doesn't overlap on critical elements (like a submit button).

clementoriol on 23 Jan 2020

Actually using KeyboardAvoidingView (https://facebook.github.io/react-native/docs/keyboardavoidingview) and enabling it only for Android fixes this.

<KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
      enabled={Platform.OS === "android"}
    >
  {/* Webview and stuff */}
</KeyboardAvoidingView>

clementoriol on 23 Jan 2020

🎉8 😄5 ❤3 🚀2

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