title: React Native - KeyboardAvoidingView with Sticky Footer
body: <p>I'm trying to make a sticky footer with the <code>KeyboardAvoidingView</code> component in React Native. I'm very close to accomplishing this task, however, when they keyboard comes up, the footer is moving up but shrinking in height at the same time.</p>
  
  <p>Here's what it looks like before the keyboard comes up:</p>
  
  <p><a href="https://i.stack.imgur.com/M5tFD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M5tFD.png" alt="enter image description here"></a></p>
  
  <p>And here's what it looks like after the keyboard comes up:</p>
  
  <p><a href="https://i.stack.imgur.com/ZqGfR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZqGfR.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the submit container is smaller than it is before there is a keyboard.</p>
  
  <p>Here's my current code:</p>
  
  <pre><code>render() {    
    return (
      &lt;KeyboardAvoidingView style={{ flex: 1 }} behavior="padding"&gt;
        &lt;View style={{ flex: 1, }}&gt;
          &lt;TextInput
            placeholder="Username"
            value={this.state.username}
            style={Styles.textInput}
            onChangeText={(username) =&gt; this.setState({ username })}
            autoCorrect={false}
          /&gt;
          &lt;TextInput
            style={Styles.textInput}
            placeholder="Email"
            value={this.state.email}
            onChangeText={(email) =&gt; this.setState({ email })}
            autoCorrect={false}
          /&gt;
        &lt;/View&gt;
        &lt;View style={{ height: 100, backgroundColor: 'blue' }}&gt;
          &lt;Text&gt;Submit&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/KeyboardAvoidingView&gt;
    );
  </code></pre>
  
  <p>What am I doing wrong?</p>