[KeyboardAvoidingView] Cannot handle several `TextInput`s at the same time? Question

[Swordsman-Inaction]

react-native-cli: 0.2.0
react-native: 0.29.2

IOS, on Mac

Use KeyboardAvoidingView according to:
Source:
https://github.com/facebook/react-native/blob/0.29-stable/Libraries/Components/Keyboard/KeyboardAvoidingView.js
Example:
https://github.com/facebook/react-native/blob/0.29-stable/Examples/UIExplorer/KeyboardAvoidingViewExample.js

Problem:
I have a View which contains several TextInputs, so I added KeyboardAvoidingView on the root of the view, like this:

<KeyboardAvoidingView behavior="height" style={styles.container}>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="O"
        />
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="LOL"
        />
      </KeyboardAvoidingView>

I'v tried all three behaviors: position, height and padding, they all act strangely:
position

height

padding

Then I tried to just wrap the last TextInput with KeyboardAvoidingView, like this:

      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="O"
        />
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
        <KeyboardAvoidingView behavior="position" style={{alignSelf: 'stretch'}}>
          <TextInput
            style={styles.textInput}
            placeholder="lol"
            defaultValue="LOL"
          />
        </KeyboardAvoidingView>
      </View>

when I choose position for behavior, it's like this:

Seems like every TextInput can trigger the KeyboardAvoidingView's behavior.

Another problem:
When KeyboardAvoidingView is wrapped with a position: 'absolute' View, it doesn't work at all, like this:

      <View style={styles.container}>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="O"
        />
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <TextInput
          style={styles.textInput}
          placeholder="lol"
          defaultValue="L"
        />
        <View style={{position: 'absolute', top: 470, right: 0, left: 0, bottom: 0}}>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <KeyboardAvoidingView behavior="position" style={{alignSelf: 'stretch'}} >
            <TextInput
              style={styles.textInput}
              placeholder="lol"
              defaultValue="LOL"
            />
          </KeyboardAvoidingView>
        </View>
      </View>

Behavior:

Question:
Did I use KeyboardAvoidingView in a wrong way? Or it can not handle multiple TextInputs

[Swordsman-Inaction]

https://github.com/APSL/react-native-keyboard-aware-scroll-view is a great one.

[sibelius]

@nicklockwood KeyboardAvoidindView can handle this scenario?

[inetfuture]

And why it's not documented? Is it because it's not production ready?

[lprhodes]

I'm seeing the same thing - It'd be great to get some comment on whether we can use KeyboardAvoidindView and whether it supports multiple text fields

[qualifyapp]

This issue should not have been closed with a link to a third party solution. The problem persists, and the problem lies within this repository. Using another repository is ultimately not the answer.

[Swordsman-Inaction]

Reopen it since it still exists.
Thanks, @qualifyapp

[jhack32]

Try adjusting the style
For example, <KeyboardAvoidingView behavior="position" style={{alignItems: 'center',}}>

[jrwm]

@Swordsman-Inaction I am encountering the same situation as you did. This problem persists in version 0.39.2 of React Native.

APSL/react-native-keyboard-aware-scroll-view works fine though. Thanks you for sharing it ;)

[keeleycarrigan]

Yea it seems like KeyboardAvoidingView isn't working for me at all, and I think @Swordsman-Inaction pointed out why. The views they are in are absolutely positioned. This is (I believe) impossible to avoid when using NavigationExperimental because all the scenes are absolutely positioned to do the animations properly.

[otoinsa]

This component does not work in any expected way, it surely does some weird stuff;

It would be good to update documentation with multiple inputs/scroll view, if we are not using it right. However I tried (seemingly) all the possible scenarios, also setting contentContainerStyle; just got really tired of it after 3 hrs of no acceptable result...

Maybe you should implement keyboard-aware-scroll approach :D

[anahitsk123]

Is issue solved yet ? I still see it.
The keyboard is covering the TextInput.

[buskerone]

cmon guys I think this is a very important feature in an mobile app! ESSENTIAL!