Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Swordsman-Inaction opened this issue Jul 18, 2016 · 29 comments
Labels
Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@Swordsman-Inaction
Copy link
Contributor

Swordsman-Inaction commented Jul 18, 2016

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

position

height

height

padding

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:

part_position

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:

inside_position

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

@Swordsman-Inaction
Copy link
Contributor Author

Swordsman-Inaction commented Jul 22, 2016

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

@sibelius
Copy link

@nicklockwood KeyboardAvoidindView can handle this scenario?

@inetfuture
Copy link

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

@lprhodes
Copy link
Contributor

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
Copy link

qualifyapp commented Sep 17, 2016

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
Copy link
Contributor Author

Swordsman-Inaction commented Sep 17, 2016

Reopen it since it still exists.
Thanks, @qualifyapp

@jhack32
Copy link

jhack32 commented Sep 20, 2016

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

@jrwm
Copy link

jrwm commented Dec 13, 2016

@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
Copy link

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
Copy link

otoinsa commented Jan 12, 2017

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
Copy link

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

@buskerone
Copy link

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

@binzailani3136
Copy link

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?

@shergin shergin added the Platform: iOS iOS applications. label Mar 16, 2017
@drblmb
Copy link

drblmb commented Apr 12, 2017

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
Copy link

jdgarzon64 commented Apr 24, 2017

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

@jbethuel
Copy link

@drblmb it works perfectly.. thanks

@alvaromb
Copy link
Contributor

alvaromb commented Jun 9, 2017

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
Copy link

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
Copy link
Contributor

shergin commented Jul 18, 2017

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
Copy link

@Jp3rd
Copy link

Jp3rd commented Oct 13, 2017

@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
Copy link

stale bot commented Dec 12, 2017

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.

@stale 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 stale bot closed this as completed Dec 19, 2017
@johnfdhartman
Copy link

johnfdhartman commented Feb 1, 2018

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
Copy link

jomla97 commented Apr 13, 2018

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

@drblmb
Copy link

drblmb commented Apr 13, 2018

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

@CorinneKelly
Copy link

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
Copy link

drblmb commented Apr 26, 2018

@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
Copy link

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
Copy link

turnipdabeets commented May 4, 2018

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

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests