Keyboard hides content for Android React Native webview

Question

I am using React Native's <WebView> component.

The documentation has no mention of how to handle the keyboard hiding the webview when the webview's HTML contains an <input> which becomes focused on in Android.

Has anyone managed to solve this? I have found a library that seems to work for regular <View>, but not a <WebView>.

score 10 · Answer 1 · answered Jan 23 '20 at 21:51

10

you can wrap your WebView with a KeyboardAvoidingView

  <KeyboardAvoidingView
    behavior={Platform.select({ ios: "position", android: null })}
    enabled
    contentContainerStyle={{ flex: 1 }}
    keyboardVerticalOffset={Platform.select({ ios: offset, android: 20 })}
    style={{ flexGrow: 1 }}
  >
    <WebView/>
  </KeyboardAvoidingView>

answered Jan 23 '20 at 21:51

Luis

1,242
11
18

1

May I know what's the value of `offset`? I had to set it to `-50` on iOS in order to get my iPhone6 display the first input at the beggining of the view when it's focused... – Dimitri Kopriwa Jun 13 '20 at 10:57

score 3 · Accepted Answer · edited May 23 '17 at 12:15

Have you thought about responding to system level events for the keyboard appearing and disappearing, then adjusting the WebView size appropriately?

There is an old question about how to handle this, it may or may not still be relevant. This answer in particular shows how to handle keyboard events. https://stackoverflow.com/a/33585501/1403

DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
  if (!frames.endCoordinates) return;
  this.setState({keyboardSpace: frames.endCoordinates.height});
});
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
  this.setState({keyboardSpace:0});
});

You could use the frames.endCoordinates.height value to alter the height of your WebView, ensuring that the content is not hidden behind the keyboard.

score 0 · Answer 3 · answered Jul 19 '16 at 20:27

0

Just raising awareness that this can also be simply achieved by using react-native-keyboard-spacer if you are not in for intricate keyboard control.

import KeyboardSpacer from 'react-native-keyboard-spacer';

class DemoApp extends Component {
  render() {
    return (
      <View>
        <WebView ... />
        <KeyboardSpacer/>
      </View>
    );
  }
}

answered Jul 19 '16 at 20:27

Hady

2,597
2
29
34

Eventhough the readme says it's iOS only, the KeyboardSpacer works on Android as well. – Christoph Göttert May 02 '18 at 08:51
It works pretty badly on Android, sometimes adds too much space – cort Jun 20 '18 at 16:17

score 0 · Answer 4 · answered Aug 31 '20 at 10:17

I used WebView.onTouchStart and ScrollView.scrollTo. This is work like charm for me.

import { useRef } from "react";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from "react-native-responsive-screen";

const scrollRef = useRef();

const scrolldown = () => {
   scrollRef.current.scrollTo((wp("100%") * 2) / 3);
};

<ScrollView ref={scrollRef} >
...

<WebView onTouchStart={scrolldown} >
...

Keyboard hides content for Android React Native webview

4 Answers4