React-native: Elements in KeyboardAvoidingView still covered by keyboard.

[marksbren]

Description

I am trying to add a KeyboardAvoidingView to one page of my application. There is a form at the bottom of the page (using the 'react-native-elements' library). When I open the keyboard, form elements move, but not enough. They keyboard still covers part of the form.

Reproduction Steps and Sample Code

My current render function is below. I have also tried removing elements. Even if there is ONLY the FormInput within the KeyboardAvoidingView (I removed the FormValidationMessage and 2 Button tags) the FormInput tag does not move up enough and is still covered by the keyboard.

render() {
    return (
      <View style={styles.container}>
      <KeyboardAvoidingView behavior="padding">
        <FormInput
          containerStyle = {styles.formInput}
          ref= 'urlinput'
          textInputRef= 'urltext'
          placeholder= "https://www.url.com/...."
          value={this.state.urlTextInput}
          onChangeText={(data) => this.editText(data)}/>
        <FormValidationMessage>{this.state.errorMsg}</FormValidationMessage>
        <Button
          buttonStyle={[styles.button, styles.btnFullWidth, styles.btnText]}
          icon={{name: 'content-paste',color:colors.btnBlue}}
          title='Paste From Clipboard' 
          backgroundColor={colors.white}
          color={colors.btnBlue}
          onPress={(data) => this.pasteUrl()}
        />
        <Button
          buttonStyle={[styles.button, styles.btnFullWidth]}
          //icon={{name: 'cached'}}
          title='Save' 
          disabled={!this.state.inputValid}
          backgroundColor={colors.btnGreen}
          onPress={(data) => this.saveUrl()}
        />
        <View>
          <Text>This is text</Text>
        </View>
        </KeyboardAvoidingView>
      </View>

    )
  }

Solution

I have tried multiple solutions but they have not worked:

1. Removed the Button and FormValidationMessage
2. Wrapped the FormInput in a View
3. Changed the behavior to 'height' and 'position'
4. Added a native Text tag inside the KeyboardAvoidingView

However, the KeyboardAvoidingView still does not move up enough to completely avoid the keyboard.

Additional Information

• React Native version: 0.42.0
• Platform: iOS
• Development Operating System: MacOS Sierra 10.12.4
• Dev tools: iOS Simulator iPhone 6 iOS 10.3

[sellmeadog]

Experiencing the same issues. No permutations of view nesting with KeyboardAvoidingView seem to work with react-native-elements.

[RyanMitchellWilson]

I'm getting this problem as well, any update on this?

[RyanMitchellWilson]

I found a fix for this, there is prop called keyboardVerticalOffset that you can pass to the KeyboardAvoidingView that will change how much the keyboard moves past the textInput.
Sample of my code:

const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

return (
  <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
    <ListView .../>
  <KeyboardAvoidingView/>
)

My listview in this example has a textInput element inside one of the rendered rows and it works perfectly. You can adjust the number of the offset to whatever you'd like that looks best.

Found here https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L97

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[kodayashi]

Hi there, I'm still seeing this. I have a button at the bottom of a signup form and the iOS keyboard covers the button. I'm using react-native 0.50.3. The workaround above only half-works actually. If you switch to a different app, then switch back, the keyboard takes into account the area that was initially covered (i.e. the bug goes away), however the padding fix at this point goes in and adds on top of it, resulting in an odd layout.

EDIT: I'm using react-navigation 1.5.8

[hegelstad]

It might be caused by using navigation libraries that are adding their own headers that aren't calculated into the equation.

[amitbravo]

I am using behavior="padding" but keyboardVerticalOffset is super unstable , on bigger screen phones specially on Android phones , I have to use negative value such as -178 , on my iphone 5s its value equal to +64 doing good. but on ipad there is huge padding between keyboard and input field which look very bad.
I am quite frustrated to get the right value of keyboardVerticalOffset that work perfect on every device. I am using react-native-router-flux , should I get its navigation bar height somehow ? what would be right equation for this ?

[hegelstad]

Try this module (https://github.com/APSL/react-native-keyboard-aware-scroll-view).

It has a lot more thought put into it.