React-native: [KeyboardAvoidingView] Possible bug on android when typing on text input

[scerelli]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

react-native-cli: 2.0.1
react-native: 0.46.1
npm 5.0.3
node 8.1.3
0.27.5

Target Platform: Android 7.1.1 and 8.0
OS: OSX 10.12.5

Steps to Reproduce

1. Place an input inside a flex: 1
2. Type something
3. IT breaks

Expected Behavior

Keep the ui consistent while i'm typing

Actual Behavior

When Input value is not empty the ui looks different

Here a gif that shows the issue: https://cl.ly/1Y2z0J1p1i2L

Reproducible Demo

Code:

Render return

      <View style={{flex: 1}}>
        <Animatable.View animation="scaleDown" easing="ease-out" delay={150} style={[styles.wrapper, {backgroundColor: 'red'}]}>

          <View style={styles.overlay} />
        </Animatable.View>
        <View style={styles.screen}>
          <View style={styles.top}>
            <Animatable.View animation={this.state.entryAnimationEnd ? 'fadeIn' : null} style={styles.welcomeWrapper}>
              <Text style={[styles.welcomeText, styles.welcomeTitle]}>Welcome</Text>
              <Text style={styles.welcomeText}>test</Text>
            </Animatable.View>
          </View>
          <KeyboardAvoidingView style={styles.bottom} behavior="padding">

            <View style={[styles.inputsBg, {top: triangleHeight}]} />
            <TextInput
              ref={(textInput) => this.textInput = textInput}
              autoCapitalize="none"

              validator="url"
              tintColor="#999"
              containerStyle={styles.textField}
              label={I18n.t('login.Platform URL')} />
            <View style={styles.buttonWrapper}>
              <Button
                fullWidth
                onPress={this.bootstrapAttempt}
                disabled={this.props.appConfig.remoteFetching === 'LOADING'}
                type="neutral">
                Go to login
              </Button>
            </View>
          </KeyboardAvoidingView>
        </View>
      </View>

style

export default StyleSheet.create({
  screen: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  textField: {
    marginLeft: 16,
    marginRight: 16
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'black',
    opacity: 0.4,
    zIndex: 1
  },
  bgImage: {
    ...StyleSheet.absoluteFillObject,
    width: null,
    height: null,
    resizeMode: 'cover',
    zIndex: 0
  },
  wrapper: {
    ...StyleSheet.absoluteFillObject
  },
  top: {
    flex: 1
  },
  bottom: {
    flex: 1
  },
  inputsBg: {
    backgroundColor: '#f5f5f5',
    ...StyleSheet.absoluteFillObject
  }
});

[scerelli]

Update: It doesn't happen on Android < 7.

[Nickersoft]

I'm currently experiencing a similar issue on my app... the behavior of my KeyboardAvoidingView is set to "position", and it behaves perfectly on iOS but results in a rather large gap on Android. Would love to hear more about the progress of this issue.

[scerelli]

@Nickersoft i tried all the different behaviors on android thew result doesn't change.

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

[404sand808s]

Did you ever end up solving this issue?