title: ReactNative - FlexBox UI messed up on keyboard open
body: <p>I am trying to make react native UI using FlexBox. But when keyboard pops up, it messes up the UI. Take a look at screenshots and code. I think something is wrong with my FlexBox code.
  It is trying to divide remaining screen space between elements according to given flex value.</p>
  
  <p><a href="https://i.stack.imgur.com/SWrs6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/SWrs6.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/PPH3k.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/PPH3k.jpg" alt="enter image description here"></a></p>
  
  <pre><code>            &lt;View style={loginWrapperStyle}&gt;
                  &lt;Card&gt;
                      &lt;View style={logoWrapperStyle}&gt;
                          &lt;Image
                              source={require('./logo.png')}
                              style={logoStyle} /&gt;
                      &lt;/View&gt;
                      &lt;View style={loginFormStyle}&gt;
                          &lt;TextBox 
                              placeholder='Useraname/Email'
                              autoCorrect={false}
                              value={this.state.username}
                              onChangeText={(val) =&gt; this.setState({ username: val })} /&gt;
  
                          &lt;TextBox 
                              placeholder='Password'
                              secureTextEntry
                              autoCorrect={false}
                              value={this.state.password}
                              onChangeText={(val) =&gt; this.setState({ password: val })} /&gt;
                      &lt;/View&gt;
  
                      &lt;View style={loginButtonWrapperStyle}&gt;
                          &lt;Button&gt;
                              Login
                          &lt;/Button&gt;
                      &lt;/View&gt;
                  &lt;/Card&gt;
              &lt;/View&gt;
  
  const styles = {
      loginWrapperStyle: {
          padding: 15,
          backgroundColor: '#7CB142',
          flex: 1,
      },
      logoWrapperStyle: {
          flex: 2
      },
      logoStyle: {
          flex: 1,
          width: null,
          height: null,
          resizeMode: 'contain',
          marginTop: 10
      },
      loginFormStyle: {
          flex: 1
      },
      loginButtonWrapperStyle: {
          flex: 1,
          padding: 15,
          justifyContent: 'center',
          alignItems: 'center',
      }
  };
  </code></pre>