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

Swordsman-Inaction · 2016-07-18T04:54:24Z

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

The text was updated successfully, but these errors were encountered:

Swordsman-Inaction · 2016-07-22T10:27:48Z

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

sibelius · 2016-07-25T15:03:12Z

@nicklockwood KeyboardAvoidindView can handle this scenario?

inetfuture · 2016-07-29T08:13:16Z

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

lprhodes · 2016-08-25T06:55:28Z

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 · 2016-09-17T05:22:50Z

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 · 2016-09-17T13:15:22Z

Reopen it since it still exists.
Thanks, @qualifyapp

jhack32 · 2016-09-20T21:10:15Z

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

jrwm · 2016-12-13T13:13:05Z

@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 · 2016-12-16T19:03:24Z

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 · 2017-01-12T15:49:13Z

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 · 2017-03-09T13:55:03Z

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

buskerone · 2017-03-09T19:08:12Z

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

binzailani3136 · 2017-03-14T23:20:40Z

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?

drblmb · 2017-04-12T21:37:34Z

KeyboardAvoidingView is very hard to get working. On Android, you don't need it at all thanks to the new android:windowSoftInputMode="adjustResize" setting in the AndroidManifest.xml file. For all of my use cases, this setting works beautifully on Android.

When you have absolute or fixed-size views, KeyboardAvoidingView is simply not working.

jdgarzon64 · 2017-04-24T15:10:16Z

@drblmb thanks, you solve this problem on my android device :D

jbethuel · 2017-05-17T02:37:04Z

@drblmb it works perfectly.. thanks

alvaromb · 2017-06-09T15:17:45Z

I'm the author of react-native-keyboard-aware-scroll-view. I would be happy to:

Integrate my solution into RN core.
Help to improve KeyboardAvoidingView with a similar approach than the one I've used.
Help to improve KeyboardAvoidingView.
Keep maintaining my component as a separated repo.

And I still don't think that linking to a third party solution should close the issue. Keyboard handling should live into the core, IMHO.

douglasjunior · 2017-06-22T19:45:28Z

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

shergin · 2017-07-18T21:48:39Z

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.

baijunjie · 2017-09-10T08:32:26Z

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

Jp3rd · 2017-10-13T13:37:36Z

@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>`

stale · 2017-12-12T14:28:35Z

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.

johnfdhartman · 2018-02-01T08:23:39Z

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.

jomla97 · 2018-04-13T09:11:52Z

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

drblmb · 2018-04-13T13:33:59Z

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

CorinneKelly · 2018-04-26T16:37:09Z

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.

drblmb · 2018-04-26T17:19:32Z

@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.

douglasjunior · 2018-04-26T17:33:11Z

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.

turnipdabeets · 2018-05-04T00:51:09Z

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

Swordsman-Inaction closed this as completed Jul 22, 2016

Swordsman-Inaction reopened this Sep 17, 2016

otoinsa mentioned this issue Feb 21, 2017

iOS Keyboard displays over TextInput field preventing user from seeing it. #415

Closed

shergin added the Platform: iOS iOS applications. label Mar 16, 2017

st0ffern mentioned this issue Jun 9, 2017

Integrate with react-native APSL/react-native-keyboard-aware-scroll-view#130

Closed

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 12, 2017

stale bot closed this as completed Dec 19, 2017

facebook locked and limited conversation to collaborators May 15, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Swordsman-Inaction commented Jul 18, 2016 •

edited

Loading

Swordsman-Inaction commented Jul 22, 2016 •

edited

Loading

sibelius commented Jul 25, 2016

inetfuture commented Jul 29, 2016

lprhodes commented Aug 25, 2016

qualifyapp commented Sep 17, 2016 •

edited

Loading

Swordsman-Inaction commented Sep 17, 2016 •

edited

Loading

jhack32 commented Sep 20, 2016 •

edited

Loading

jrwm commented Dec 13, 2016 •

edited

Loading

keeleycarrigan commented Dec 16, 2016

otoinsa commented Jan 12, 2017

anahitsk123 commented Mar 9, 2017

buskerone commented Mar 9, 2017

binzailani3136 commented Mar 14, 2017

drblmb commented Apr 12, 2017

jdgarzon64 commented Apr 24, 2017 •

edited

Loading

jbethuel commented May 17, 2017

alvaromb commented Jun 9, 2017

douglasjunior commented Jun 22, 2017

shergin commented Jul 18, 2017

baijunjie commented Sep 10, 2017

Jp3rd commented Oct 13, 2017 •

edited

Loading

stale bot commented Dec 12, 2017

johnfdhartman commented Feb 1, 2018 •

edited

Loading

jomla97 commented Apr 13, 2018

drblmb commented Apr 13, 2018 •

edited

Loading

CorinneKelly commented Apr 26, 2018

drblmb commented Apr 26, 2018 •

edited

Loading

douglasjunior commented Apr 26, 2018

turnipdabeets commented May 4, 2018 •

edited

Loading

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

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

Comments

Swordsman-Inaction commented Jul 18, 2016 • edited Loading

Swordsman-Inaction commented Jul 22, 2016 • edited Loading

sibelius commented Jul 25, 2016

inetfuture commented Jul 29, 2016

lprhodes commented Aug 25, 2016

qualifyapp commented Sep 17, 2016 • edited Loading

Swordsman-Inaction commented Sep 17, 2016 • edited Loading

jhack32 commented Sep 20, 2016 • edited Loading

jrwm commented Dec 13, 2016 • edited Loading

keeleycarrigan commented Dec 16, 2016

otoinsa commented Jan 12, 2017

anahitsk123 commented Mar 9, 2017

buskerone commented Mar 9, 2017

binzailani3136 commented Mar 14, 2017

drblmb commented Apr 12, 2017

jdgarzon64 commented Apr 24, 2017 • edited Loading

jbethuel commented May 17, 2017

alvaromb commented Jun 9, 2017

douglasjunior commented Jun 22, 2017

shergin commented Jul 18, 2017

baijunjie commented Sep 10, 2017

Jp3rd commented Oct 13, 2017 • edited Loading

stale bot commented Dec 12, 2017

johnfdhartman commented Feb 1, 2018 • edited Loading

jomla97 commented Apr 13, 2018

drblmb commented Apr 13, 2018 • edited Loading

CorinneKelly commented Apr 26, 2018

drblmb commented Apr 26, 2018 • edited Loading

douglasjunior commented Apr 26, 2018

turnipdabeets commented May 4, 2018 • edited Loading

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

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

Swordsman-Inaction commented Jul 18, 2016 •

edited

Loading

Swordsman-Inaction commented Jul 22, 2016 •

edited

Loading

qualifyapp commented Sep 17, 2016 •

edited

Loading

Swordsman-Inaction commented Sep 17, 2016 •

edited

Loading

jhack32 commented Sep 20, 2016 •

edited

Loading

jrwm commented Dec 13, 2016 •

edited

Loading

jdgarzon64 commented Apr 24, 2017 •

edited

Loading

Jp3rd commented Oct 13, 2017 •

edited

Loading

johnfdhartman commented Feb 1, 2018 •

edited

Loading

drblmb commented Apr 13, 2018 •

edited

Loading

drblmb commented Apr 26, 2018 •

edited

Loading

turnipdabeets commented May 4, 2018 •

edited

Loading