React Native: Update app layout after the keyboard is shown

Question

I'am working right now on the common problem that the keyboard is pushing the app outside the view.

The android:windowSoftInputMode="adjustResize" setting does not work.

Right now i resize the view according to the keyboard by hand like this:

keyboardWillShow(e) {
    setTimeout(()=> {
        this.keyboardOffset = e.endCoordinates.height;
    }, 500)
}

keyboardWillHide(e) {
    this.keyboardOffset = 0;
}

///...

const resultingHeight = windowHeight - this.keyboardOffset - Navigator.NavigationBar.Styles.General.TotalNavHeight;

viewStyle = {
   height: resultingHeight
};

This almost works. But my problem is that the app is getting pushed outside the view, then the keyboardWillShow is getting fired and resizes the view correct and then nothing happens. Android does not update the layout after the keyboard is shown.

EDIT: The other posts on SO didn't help because the adjustResize setting does not work and i use react-native and not native android.

Answer 1

If I recall, keyboardwillShow and keyboardWillHide are not fired on Android.

This behavior should be native to Android, have you tried setting the windowSoftInputMode as follows and not listening for the events?

android:windowSoftInputMode="adjustPan"

If that's not working for you, you could take a look into KeyboardAvoidingView, new with 0.34. it seems to be solving what you are attempting to accomplish.

It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.

KeyboardAvoidingView Docs