[KeyboardAvoidingView] Cannot handle several TextInputs at the same time? Question

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

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

@nicklockwood

@nicklockwood KeyboardAvoidindView can handle this scenario?

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

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

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.

@qualifyapp

Reopen it since it still exists.
Thanks, @qualifyapp

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

@Swordsman-Inaction

@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 ;)

@Swordsman-Inaction

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.

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

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

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

Who solved this important problem?
https://github.com/APSL/react-native-keyboard-aware-scroll-view is working well on iOS as expected but it's not working on Android.
I've tried everything what I can do including KeyboardAvoidingView and other libraries.
But none of them working well on Android.
Is there any library which supports Android very well?

I got a good result using android:windowSoftInputMode="adjustResize" for Android and IQKeyboardManager for iOS.

I also created a library for ease of use.

Just install, no extra code needed:

npm install --save react-native-keyboard-manager

KeyboardAvoidingView does NOT handle TextInputs at all (separately or not).
The whole purpose of KeyboardAvoidingView is reacting on software keyboard appearance events and adjusting own layout accordingly. It can change own position, size, and padding (the most common use case).

KeyboardAvoidingView does NOT change ScrollView padding (aka insets).
KeyboardAvoidingView does NOT scroll ScrollViews to focused TextInputs.

So, usually KeyboardAvoidingView should be used as top-level view container.

https://github.com/baijunjie/react-native-input-scroll-view

@drblmb

@drblmb Hi, is there any example code for you implementation of the android side? Cos I have android:windowSoftInputMode="adjustResize" in. But it still doesn't work. Or am I doing it wrong?

`

    <View style={Styles.container}>
      <View style={Styles.row}>
        <View style={Styles.logoContainer} >
          <View style={Styles.logo} />
        </View>
        <View style={Styles.inputsContainer} >
          <View
          style={Styles.inputsWhiteBox} >
            <View style={Styles.usernameContainer} >
              <TextInput
                ref='username'
                style={textInputStyle}
                value={username}
                editable={editable}
                keyboardType='default'
                returnKeyType='next'
                autoCapitalize='none'
                autoCorrect={false}
                onChangeText={this.handleChangeUsername}
                underlineColorAndroid='transparent'
                onSubmitEditing={() => this.refs.password.focus()}
                placeholder='Username' />
            </View>
            <View style={Styles.lineContainer} >
              <Text style={Styles.line} />
            </View>
            <View style={Styles.usernameContainer} >
              <TextInput
                ref='password'
                style={textInputStyle}
                value={password}
                editable={editable}
                keyboardType='default'
                returnKeyType='go'
                autoCapitalize='none'
                autoCorrect={false}
                secureTextEntry
                onChangeText={this.handleChangePassword}
                underlineColorAndroid='transparent'
                onSubmitEditing={this.handlePressLogin}
                placeholder='Password' />
            </View>
          </View>
        </View >
          <View style={Styles.errorMessageContainer}>
            <ErrorMessage errorMessage={this.props.errorMessage} />
          </View>
        <View style={Styles.buttonsContainer} >
          <View style={Styles.flexBox}>
            <TouchableOpacity style={Styles.loginButtonWrapper} onPress={this.handlePressLogin}>
              <View style={Styles.blueBox}>
                <Text style={Styles.loginText}>Login</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={Styles.flexBox}>
            <TouchableOpacity style={Styles.cancelButtonWrapper} onPress={() => this.props.back()}>
              <View style={Styles.blueBox}>
                <Text style={Styles.loginText}>Cancel</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View style={Styles.loginLaterTextContainer} >
          <Text style={Styles.footerText}>Want to browse first? <Text style={Styles.loginLaterText}
            onPress={this.props.onPressLoginLater} >
            Log in Later
          </Text>
          </Text>
        </View>
      </View>
    </View>

  </KeyboardAvoidingView>`

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

This is still a problem. KeyboardAvoidingView is working fine for iOS but not at all for Android. I would like to use new android:windowSoftInputMode="adjustResize" , but I used create-react-native-app, and I would really prefer not to eject if I don't have to.

+1. This is still very much an issue. Not to even speak of the documentation, which is lacking in a lot of ways.

@Jp3rd

@Jp3rd - sorry for the late reply. You don't use KeyboardAvoidingView at all on Android. Just use the adjustResize setting.

This is definitely still an issue. If there is a solution it has not been made clear here or in the documentation. I think the most common mobile behavior that developers AND users are looking for is to be able to have a user click on a textInput and have the screen slide up so that the active input box is on top of the keyboard. This is easy to accomplish when theres only one textinput on the screen but often there are multiple textInputs on the screen and all three "behaviors" of KeyboardAvoidingView are not useful at all. Please reopen this or at least share a solution if there is one.

@CorinneKelly

@CorinneKelly - I think this issue was closed because there is no reason to use KeyboardAvoidingView for Android applications. So that is really the solution. I have had no problem on IOS using it with multiple text inputs.

For Android applications, add android:windowSoftInputMode="adjustResize" to your manifest XML file.

The problem exists in iOS because the OS itself does not offer a solution, even when we develop native solutions we suffer with it.

When I worked with native iOS apps, I used the IQKeyboardManager for a long time. So, after migrate to RN, I created the react-native-keyboard-manager and it has worked very well.

I think the RN will not create a solution for this now, it's not a trivial thing to do.

@douglasjunior

Thanks @douglasjunior for sharing your bridge, it's really helpful. Seems like the best solution I've seen so far!

Navigation Menu

Repository navigation

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

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[KeyboardAvoidingView] Cannot handle several TextInputs at the same time? Question #8855

Description

Activity

Swordsman-Inaction commented on Jul 22, 2016

sibelius commented on Jul 25, 2016

inetfuture commented on Jul 29, 2016

lprhodes commented on Aug 25, 2016

qualifyapp commented on Sep 17, 2016

Swordsman-Inaction commented on Sep 17, 2016

jhack32 commented on Sep 20, 2016

jrwm commented on Dec 13, 2016

keeleycarrigan commented on Dec 16, 2016

otoinsa commented on Jan 12, 2017

anahitsk123 commented on Mar 9, 2017

buskerone commented on Mar 9, 2017

binzailani3136 commented on Mar 14, 2017

5 remaining items

douglasjunior commented on Jun 22, 2017

shergin commented on Jul 18, 2017

baijunjie commented on Sep 10, 2017

Jp3rd commented on Oct 13, 2017

stale commented on Dec 12, 2017

johnfdhartman commented on Feb 1, 2018

jomla97 commented on Apr 13, 2018

drblmb commented on Apr 13, 2018

CorinneKelly commented on Apr 26, 2018

drblmb commented on Apr 26, 2018

douglasjunior commented on Apr 26, 2018

turnipdabeets commented on May 4, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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