Просмотр с клавиатуры - React-Native?

Question

У меня есть экран регистрации «Входы», я хочу, чтобы при выборе пользователем вход не скрывал другой, поэтому я обертываю его внутри <KeyboardAvoidingView> и устанавливаю behavior "padding", но после выбора какого-либо входа я вижу окно View view all мой контент, поэтому я не вижу ничего "просто белый вид"

Так что, возможно, я сделал что-то не так при его использовании, как мне справиться с этим?

ScreenShot

вот мой код

<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 200,
})()}>
  <ScrollView>
    <View style={styles.imgContainer}>
    <Image
    style={styles.imgStyle}
    resizeMode="cover"
    source={require('../../assets/Logo.png')}
    />
    </View>
    <View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-person"
      size={20}
      color="#ddf"
      />
      <TextInput
      onChangeText={value => this.setState({userName: value})}
      value={userName}
      style={styles.inputStyle}
      placeholder="Name"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.NameValid}</Text>
      </View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-at"
      size={20}
      color="#ddf"
      />
      <TextInput
      onChangeText={value => this.setState({email: value})}
      value={email}
      style={styles.inputStyle}
      placeholder="Email"
      keyboardType="email-address"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.emailValid}</Text>
      </View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-call"
      size={20}
      color="#ddf"
      />
      <TextInput
      style={styles.inputStyle}
      placeholder="mobile"
      onChangeText={value => this.setState({phoneNumber: value})}
      value={phoneNumber}
      keyboardType="phone-pad"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.phoneValid}</Text>
      </View>
      <View style={{...styles.inputContainer, marginBottom: 0}}>
      <Icon
      style={styles.iconStyle}
      name="md-lock"
      size={20}
      color="#ddf"
      />
      <TextInput
      secureTextEntry
      style={styles.inputStyle}
      placeholder="Password"
      value={password}
      onChangeText={value => this.setState({password: value})}
      />
      </View>
      <View
    style={{
    marginTop: 0,
    marginLeft: 16,
    marginBottom: 0,
    }}>
    <Text>{this.state.passwordValid}</Text>
    </View>
    </View>
    <View style={styles.buttonsContainer}>
      <TouchableOpacity
      onPress={() => this.signUp()}
      style={styles.btnStyle}>
      <Text style={[styles.textStyle, {color: '#fff', fontSize: 20}]}>
      Sign Up
      </Text>
      </TouchableOpacity>

      <View style={styles.textContainer}>
        <Text style={[styles.textStyle, {opacity: 0.7}]}>
        Do you have account?
        </Text>
        <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
        <Text style={styles.textStyle}> sign In </Text>
        </TouchableOpacity>
      </View>
    </View>
  </ScrollView>
</KeyboardAvoidingView>

Стиль

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imgContainer: {alignItems: 'center', marginVertical: 25},
  imgStyle: {width: 250, height: 150},
  inputContainer: {
    margin: 15,
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 30,
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconStyle: {
    marginLeft: 15,
  },
  inputStyle: {
    padding: 10,
    width: '85%',
    textAlign: I18nManager.isRTL ? 'right' : 'left',
  },
  buttonsContainer: {
    margin: 15,
    marginBottom: 20,
    justifyContent: 'flex-end',
  },
  btnStyle: {
    backgroundColor: '#1E558E',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 15,
    borderRadius: 30,
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 25,
  },
  textStyle: {color: '#1E558E', fontSize: 17},
});