title: How do fix the white keyboard space that shows whenever I use KeyboardAwareView or react-native-keyboard-aware-scroll-view in my Expo react-native?
body: <p>I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this? 
  (<a href="https://i.stack.imgur.com/1c0M6.jpg" rel="noreferrer">https://i.stack.imgur.com/1c0M6.jpg</a>) have tried KeyboardAvoidingView  and react-native-keyboard-aware-scroll-view but the problem still persist</p>
  
  <pre><code>       import React, {Component} from 'react';
         import {StyleSheet,
         ScrollView,
         Text,ActivityIndicator,
         TouchableOpacity,
         TextInput,
          View,
          StatusBar,
         ImageBackground,
          KeyboardAvoidingView} from 'react-native';
  
         import { createStackNavigator, createAppContainer } from 'react- 
          navigation';
          import { KeyboardAwareView } from 'react-native-keyboard-aware- 
          view';
          import { AsyncStorage } from 'react-native';
  
          export default class LoginForm extends Component {
          render() {
           return (
             &lt;KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}&gt;
        &lt;View style={styles.container}&gt;
        &lt;ScrollView style={{flex: 1}}&gt;
      &lt;StatusBar
        backgroundColor="transparent"
        barStyle="default"
        translucent={true}
      /&gt;
          &lt;ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}&gt;
          &lt;View style={styles.title}&gt;
            &lt;Text style={styles.big}&gt;AgroSight&lt;/Text&gt;
            &lt;Text style={styles.small}&gt;An agro based app for farmers and persons&lt;/Text&gt;
            {
            this.state.ActivityLoader ? &lt;ActivityIndicator color='#FFF' size='large' style={styles.Activity} /&gt;: null
          }
          &lt;/View&gt;
  
          &lt;View style={styles.formContainer}&gt;
            &lt;ScrollView style={{flex:1}}&gt;
                &lt;TextInput
                style={styles.input}
                placeholder="Email Address"
                returnKeyType="next"
                keyboardType="email-address"
                autoCapitalize="none"
                autoCorrect={false}
                onSubmitEditing = {() =&gt; this.passwordInput.focus()}
                placeholderTextColor="rgba(255,255,255,.7)"
                name="email"
                onChangeText={(TextInput) =&gt; this.setState({userEmail: TextInput})}
  
              /&gt;
              &lt;TextInput
                style={styles.input}
                placeholder="Password"
                returnKeyType="go"
                secureTextEntry
                ref={(input) =&gt; this.passwordInput = input}
                placeholderTextColor="rgba(255,255,255,.7)"
                name="password"
                onChangeText={(TextInput) =&gt; this.setState({password: TextInput})}
              /&gt;
  
              &lt;TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }&gt;
                &lt;Text style={styles.buttonText}&gt;LOG IN&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;/ScrollView&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.bottomRow}&gt;
            &lt;Text style={styles.signupText}&gt; Don't have account ?
                &lt;Text style={styles.reg} onPress={() =&gt; this.props.navigation.navigate('RegisterScreen')}&gt;REGISTER HERE&lt;/Text&gt;
            &lt;/Text&gt;
          &lt;/View&gt;
          &lt;/ImageBackground&gt;
            &lt;/ScrollView&gt;
              &lt;/View&gt;
      &lt;/KeyboardAwareView&gt;
       );
     }
   }
  
    const styles = StyleSheet.create({
      container: {
       flex: 1,
      },
      title: {
       marginTop: 20,
       alignItems: "center",
       justifyContent:"center",
        height: "30%"
       },
  big: {
    marginTop: 20,
    fontSize: 50,
    color: "white",
    alignItems:"center",
    fontWeight:"bold",
  },
  small: {
    marginTop: 4,
    fontSize: 20,
    color:"#FFF",
    fontWeight:"bold",
    opacity: .8
  },
  bottomRow: {
    padding: 20,
    justifyContent: "center",
    paddingVertical: 20
  },
  signupText: {
    fontSize: 21,
    color:"#FFF",
    fontWeight: "700",
    alignItems: "center"
  },
   reg: {
     color: "#FED81E",
     alignItems: "center"
   },
   formContainer:{
     padding: 20,
     flex:1
   },
    input: {
      height: 50,
      backgroundColor: "green",
      color: "#FFF",
      paddingHorizontal: 10,
      marginBottom: 10,
      borderRadius: 7,
      fontSize: 20,
      paddingVertical: 10
    },
  buttonContainer: {
    backgroundColor: "#FFF",
    paddingVertical: 15,
    borderRadius: 8
  },
  buttonText: {
    textAlign: 'center',
    color:"green",
    fontWeight: '700',
    fontSize: 27
  },
  Activity:{
    position: 'absolute',
    left: 0,
    right: 0,
    top: 150,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 999
     },
   });
  </code></pre>