react-native-keyboard-aware-scroll-view not working properly

Question

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and react-native-keyboard-aware-scroll-view v 0.2.1.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';


class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.renderScene = this.renderScene.bind(this);
    this.state={
      username: '',
      password: ''
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
    <KeyboardAwareScrollView>
      <View style={styles.container}>
        <Spinner visible={this.state.visible} />
        <StatusBar barStyle="light-content" hidden={true}/>
        <View style={styles.topContainer}>
          <View style={styles.bannerContainer}>
            <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image style={styles.mark} source={require('***')} />
            </View>
          </View>
          <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}

                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Password"
                            returnKeyType="done"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            >
                        </TextInput>
                      </View>
                </View>
                <TouchableOpacity style={styles.forgotContainer}>
                </TouchableOpacity>
            </View>

        </View>

        <TouchableHighlight
          underlayColor="#D6AB00"
          onPress={this.login}
          style={styles.signInButtonContainer}>
          <Text style={styles.signInText}>Sign In</Text>
        </TouchableHighlight>

      </View>
    </KeyboardAwareScrollView>

    );
  }

Answer 1

To make it working in android with expo I had to add a few more things, hope this will help

<KeyboardAwareScrollView extraScrollHeight={100} enableOnAndroid={true} 
   keyboardShouldPersistTaps='handled'>
       <ScrollView>
      </ScrollView>
</KeyboardAwareScrollView>

Answer 2

Personally solved this by using flex...

  <KeyboardAwareScrollView contentContainerStyle={{flex: 1}}>
    <View style={{flex: 1}}>

Answer 3

Settings that worked for me

    bounces={false}
    showsVerticalScrollIndicator={false}
    style={{marginBottom:150}}
    enableOnAndroid={true}
    scrollEnabled={true}
    extraScrollHeight={100}
    keyboardShouldPersistTaps='handled'
    scrollToOverflowEnabled={true}
    enableAutomaticScroll={true}