title: KeyboardAvoidingView not Working Properly
body: <h2>KeyboardAvoidingView not Working Properly</h2>
  <p>I am trying to use the KeyboardAvoidingView with <code>behavior=&quot;padding&quot;</code>.</p>
  <p>For some reason, when I'm trying to enter any text in <code>TextInput</code>, there's a space below the TextInput. Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here?</p>
  <p><a href="https://i.stack.imgur.com/Calck.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Calck.jpg" alt="Whats-App-Image-2018-01-24-at-5-07-46-PM" /></a></p>
  <pre><code>  render() {
      return (
  
        &lt;KeyboardAvoidingView  style={{ flex: 1}}  behavior=&quot;padding&quot;&gt;
        &lt; View
            style={{
              flex: 1,
             
            backgroundColor: &quot;#FFFFFF&quot;,
           
          }}
        &gt;
          
          &lt;ScrollView
            contentContainerStyle={{ justifyContent: &quot;flex-end&quot;, flex: 1 }}&gt;
                  &lt;ChatInfo /&gt;
                &lt;/ScrollView&gt;
  
          
            &lt;View style={styles.container}&gt;
            &lt;TextInput
              style={styles.input}
              underlineColorAndroid=&quot;transparent&quot;
              autoCapitalize=&quot;none&quot;
              onChangeText={text =&gt; this.setState({ text: text })}
              value={this.state.text}
            /&gt;
  
            &lt;TouchableOpacity
              style={styles.submitButton}
              onPress={this.submitName}
            &gt;
              &lt;Text style={styles.submitButtonText}&gt; SEND &lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
         
        &lt;/ View&gt;
        &lt;/KeyboardAvoidingView&gt;
      );
    }
  }
  
  export default connect()(ChatScreen);
  
  const styles = StyleSheet.create({
    input: {
      margin: 2,
      paddingLeft: 15,
      flex: 1,
      height: 40,
      padding: 10,
      fontSize: 14,
      fontWeight: &quot;400&quot;
    },
  
        container: {
          borderTopWidth: 1,
          minWidth: &quot;100%&quot;,
          borderColor: &quot;#cccccc&quot;,
          height: 44,
          flexDirection: &quot;row&quot;,
          justifyContent: &quot;space-between&quot;,
          backgroundColor: &quot;#fff&quot;
          
        },
  
    submitButtonText: {
      color: &quot;#0a9ffc&quot;,
      fontSize: 14,
      fontWeight: &quot;500&quot;
    },
  
    submitButton: {
      backgroundColor: &quot;#fff&quot;,
      padding: 10,
      margin: 2,
      height: 40,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;center&quot;
    }
  });
  </code></pre>