React-native: iOS Keyboard displays over TextInput field preventing user from seeing it.

[mcgsoftware]

When a field is displayed in lower part of screen and user taps on it to enter text, the keyboard displays on top of the field forcing the user to scroll to see the field again. The correct behavior should be to slide the underlying window up when the keyboard is being displayed so it doesn't cover the input field.

Replicate bug: Using the UIExplorer text input demo screen, try entering text into a TextField that is on bottom of screen. Keyboard displays on top of TextField and hides the text field from view.

[erikthedeveloper]

:+1: I've also been trying to find a work around for this in the meantime (i.e. something along the lines of onFocus={this._slideViewUpToShowInputElement(refName)}

[bpeters]

:+1:

[tjwudi]

Could you give us an example @erikthedeveloper , I can't get this work :( Thanks!

[ziyadparekh]

:+1:

[wangzhe1995]

I can't do work
the error message is not a function

[stirman]

Ahh, good call @erikthedeveloper. Hopefully this behavior will be baked in soon!

[wangzhe1995]

@stirman how do you do , can show me show source

[wangzhe1995]

I have a good solution of http://stackoverflow.com/questions/29313244/how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus

[brentvatne]

If the solution that @wangzhe1995 linked to does not work for anybody, ping me and I'll re-open the issue! :smile:

[alejomendoza]

It would be awesome to see a component/example of a messaging view where the keyboard slides up with the input field. :+1:

[comountainclimber]

As of React Native 0.29 you can use React Native's <KeyboardAvoidingView/>

https://github.com/facebook/react-native/commit/8b78846a9501ef9c5ce9d1e18ee104bfae76af2e

[otoinsa]

KeyboardAvoidingView does not work...
https://github.com/facebook/react-native/issues/8855

[mitesh1301]

Hi All,
i just resolve this issue with alternative solution, by using the animation, Hope this will help

import { Animated, Keyboard} from 'react-native';

constructor(props) {
super(props);

//For the keyboard
this.keyboardHeight = new Animated.Value(0);

}

//For key board
componentWillMount () {
console.log("Keyboard componentWillMount")
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}

componentWillUnmount() {
console.log("Keyboard componentWillUnmount")
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}

keyboardWillShow = (event) => {
console.log("keyboardWillShow")
Animated.parallel([
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: event.endCoordinates.height,
})
]).start();
};

keyboardWillHide = (event) => {
console.log("keyboardWillHide")
Animated.parallel([
Animated.timing(this.keyboardHeight, {
duration: event.duration,
toValue: 0,
})
]).start();
};
render() {


}