title: React Native KeyboardAvoidingView not working properly
body: <p>I am trying to use the KeyboardAvoidingView with behavior="padding".</p>
  
  <p>When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it.</p>
  
  <p>I have also with KeyboardAvoidingView height property with offset. It was working few components like 2 TextInputs. But when I add all the components the UI goes insane and behave jumbled up.</p>
  
  <p>Any any idea whats happening over here?</p>
  
  <p>Here the <a href="https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580" rel="nofollow noreferrer">link</a> of tutorial which I have followed.</p>
  
  <pre><code>render() {
      return (
          &lt;View style={styles.backgroundContainer}&gt;
              &lt;Loader
                  loading={this.state.isLoading} /&gt;
              &lt;KeyboardAvoidingView
                  keyboardVerticalOffset={10}
                  style={styles.mainContainer}
                  behavior='padding' &gt;
                  &lt;View style={styles.formContainer}&gt;
                      &lt;View style={[styles.centerContainer, { marginTop: 40 }]}&gt;
                          &lt;Image source={require('./../../Resources/logo.png')} /&gt;
                          &lt;Text style={{ fontWeight: 'bold', color: 'gray', fontSize: 25 }}&gt;AppName&lt;/Text&gt;
                          &lt;Text style={styles.loginMsg}&gt; Login to your Account &lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.inputFieldsContainer}&gt;
                          &lt;Image style={{ width: 30, height: 30, margin: 5 }} source={require('./../../Resources/logo.png')} /&gt;
                          &lt;TextInput
                              placeholder='Email'
                              returnKeyType='next'
                              keyboardType='email-address'
                              onChangeText={(value) =&gt; this.setState({ userEmail: value })}
                              onSubmitEditing={() =&gt; this.passwordInput.focus()}
                              style={styles.inputFields} /&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.inputFieldsContainer}&gt;
                          &lt;Image style={{ width: 30, height: 30, margin: 5, }} source={require('./../../Resources/logo.png')} /&gt;
                          &lt;TextInput
                              returnKeyType='go'
                              secureTextEntry
                              placeholder='Password'
                              ref={(input) =&gt; this.passwordInput = input}
                              onChangeText={(value) =&gt; this.setState({ password: value })}
                              style={styles.inputFields} /&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.buttonContainer}&gt;
                          &lt;Button
                              fontSize='8'
                              color='gray'
                              title='Remember Me'
                              onPress={() =&gt; {
                                  console.log('Remember Me Clicked');
                              }} /&gt;
                          &lt;Button
                              color='gray'
                              title='Forgot Password?'
                              onPress={() =&gt; {
                                  console.log('Forgot Password Clicked');
                              }} /&gt;
                      &lt;/View&gt;
                      &lt;TouchableOpacity
                          style={styles.buttonLogin}
                          onPress={() =&gt; {
                                  console.log('Login Clicked');
                          }}
                      &gt;
                          &lt;Text style={{ fontSize: 20, fontWeight: 'bold', color: 'white' }}&gt;Login&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;View style={{ height: 1, backgroundColor: 'gray', marginTop: 20, marginBottom: 1 }}&gt;
                      &lt;/View&gt;
                      &lt;View style={[styles.centerContainer, { marginBottom: 10 }]}&gt;
                          &lt;Text style={styles.loginMsg}&gt;Don't have a Account&lt;/Text&gt;
                          &lt;TouchableOpacity
                              style={styles.buttonRegister}
                              onPress={() =&gt; navigate('Register')} &gt;
                              &lt;Text style={styles.buttonRegisterText}&gt;REGISTER NOW&lt;/Text&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
                  &lt;View style={{ height: 10, backgroundColor: '#628499', }}&gt;
                  &lt;/View&gt;
              &lt;/KeyboardAvoidingView&gt;
          &lt;/View&gt;
      );
  }
  const styles = StyleSheet.create({
  backgroundContainer: {
      flex: 1, backgroundColor: 'green'
  },
  mainContainer: {
      flex: 1, margin: 25,
      borderWidth: 1, borderRadius: 5, borderColor: 'gray',
      backgroundColor: 'white',
      justifyContent: 'space-between'
  },
  formContainer: {
      flex: 1, paddingLeft: 25, paddingRight: 25
  },
  centerContainer: {
      alignItems: 'center', marginBottom: 10,
  },
  loginMsg: {
      margin: 10,
      fontSize: 20, color: 'gray'
  },
  inputFieldsContainer: {
      flexDirection: 'row', margin: 10,
      borderWidth: 1, borderRadius: 5, borderColor: 'gray',
  },
  inputFields: {
      flexGrow: 1,
      marginTop: 5, marginBottom: 5,
      height: 30,
      backgroundColor: 'rgba(255,255,255,0.4)',
      paddingHorizontal: 10,
  },
  buttonContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between'
  },
  buttonLogin: {
      alignItems: 'center', height: 40, marginTop: 10, marginLeft: 50, marginRight: 50, padding: 5,
      backgroundColor: '#2980b9',
      borderWidth: 1, borderRadius: 5, borderColor: 'gray'
  },
  buttonRegister: {
      alignItems: 'center', height: 40,
      marginLeft: 50, marginRight: 50
  },
  buttonRegisterText: {
      fontSize: 20, fontWeight: 'bold', color: 'gray'
  },
  loading: {
      position: 'absolute',
      left: 0, right: 0, top: 0, bottom: 0,
      alignItems: 'center', justifyContent: 'center'
  }, });
  </code></pre>