[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

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.

@drblmb

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

@drblmb

@drblmb it works perfectly.. thanks

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.

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

drblmb commented on Apr 12, 2017

jdgarzon64 commented on Apr 24, 2017

jbethuel commented on May 17, 2017

alvaromb commented on Jun 9, 2017

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