13

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.

enter image description here

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.

Michael Malura
  • 1,131
  • 2
  • 13
  • 30
  • 1
    This is not duplicate. I tried the same, and none of the windowSoftInputMode in AndroidManifest solved it. Simply when i use android:windowSoftInputMode="adjustNothing" the view doesn´t disappear but then there is the same problem that the keyboard overlaps over textInput.... – BigPun86 Oct 20 '16 at 14:01
  • I could try to help if you can post the xml layout for that view, if you are using it (sorry, i don't even know a thing about react-native). – Hugo Nov 03 '16 at 16:50
  • what about `android:windowSoftInputMode="adjustResize"`, aaah. you already tried. than your root layout in the xml has wrong attributes. if you have `RelativeLayout`, set this `` – longi Nov 08 '16 at 14:59
  • @longilong i don't have a xml which describes the layout. This is react-native. – Michael Malura Nov 08 '16 at 15:13
  • upps, than sorry for spaming, never heard from that framework before... – longi Nov 08 '16 at 15:51

2 Answers2

3

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

BradByte
  • 11,015
  • 2
  • 37
  • 41
  • I tried the KeyboardAvoidingView. It is almost a working solution. I removed the windowSoftInputMode and used the behavior "height" for the view. There is just one problem left. When the keyboard is closed the view does not resize to its full size anymore. – Michael Malura Nov 08 '16 at 10:38
  • Could you use `keyboardDidClose` for that scenario and manually change the height? – BradByte Nov 08 '16 at 13:16
  • No problem, but we are still struggling with a reliable solution - are you able to build an android app using react-native with a behaviour as "expected"? – Thomas Kekeisen Nov 12 '16 at 18:04
0

KeyboardAvoidingView behaved worse than I expected, so i created my own solution with ScrollView that is wrapping all app (height is set with help of Dimensions), then on any input click - depending where is the input (lower/upper half of the screen - with help of UIManager.measure and TextInputState.currentlyFocusedField) i scroll the view or not - will this work for you? (resizing view to smaller height will not work(look good) in many cases) - i can provide some code

Marcin Pietruszka
  • 86
  • 2