[KeyboardAvoidingView] Possible bug on android when typing on text input

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
  }
});

[404sand808s]

Did you ever end up solving this issue?

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