Text inputs covered by Keyboard (React-Native) - react-native

Question

I'm trying to create a new simple app. While in this process, I've decided to start with a login page and a sign up page. These pages have the same styling, where the top third of the screen is a container with a logo in it, and the bottom two thirds is a form with input fields.
The problem that I'm stuck at now is that everything looks great, but when you press one of the inputs then the keyboard covers most of the inputs. I've done a little research and I've tried to apply both ScrollView and KeyboardAvoidingView, but neither of these seem to work properly.
This is how my page is set up:
<View style={styles.screen}>
{this.state.loading && (
<View style={styles.loading}>
<ActivityIndicator
color={primaryColor}
size="large"
/>
</View>
)}
<View style={styles.logoContainer}>
<Image source={require('../../../assets/logo.png')} style={styles.logo} />
</View>
<View style={styles.formContainer}>
<KeyboardAvoidingView
behavior={'padding'}
enabled
style={styles.form}
>
<FloatingLabelInput
blurOnSubmit={false}
editable={true}
keyboardType={'email-address'}
label="Email"
onChangeText={this.handleEmailChange}
onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
ref={(input) => { this.emailInput = input; }}
returnKeyType="next"
value={this.state.email}
/>
<FloatingLabelInput
editable={true}
label="Password"
onChangeText={this.handlePasswordChange}
onSubmitEditing={() => this.signup()}
ref={(input) => { this.passwordInput = input; }}
secureTextEntry={true}
value={this.state.password}
/>
</KeyboardAvoidingView>
<View style={styles.buttonContainer}>
<Button buttonFunction={() => this.signup()} buttonStyle={'primary'} buttonText={'Sign Up'} />
</View>
</View>
</View>
I feel like I've exhausted most solutions, but I must be missing something crucial.

Answer 1

I had added a Content component in your code, which solves your problem. I don't know why issue had gone by removing KeyboardAvoidingView, but if you want to use KeyboardAvoidingView you can do like this.
<View style={styles.container}>
<Content>
<View style={{ alignItems: "center", marginTop: "50%" }}>
<Image source={require('../assets/CustomLogo1.png')} style={{ marginLeft: 10, marginBottom: 20, height: 200, width: 200 }} />
</View>
<View>
<KeyboardAvoidingView behavior={Platform.Os == "ios" ? "padding" : "height"}>
<FloatingLabelInput
blurOnSubmit={false}
editable={true}
keyboardType={'email-address'}
label="Email"
onChangeText={this.handleEmailChange}
onSubmitEditing={() => this.passwordInput && this.passwordInput.focus()}
ref={(input) => { this.emailInput = input; }}
returnKeyType="next"
value="sample mail"
/>
<FloatingLabelInput
editable={true}
label="Password"
onChangeText={this.handlePasswordChange}
onSubmitEditing={() => this.signup()}
ref={(input) => { this.passwordInput = input; }}
secureTextEntry={true}
value="password"
/>
</KeyboardAvoidingView>
<View style={{ marginTop: 20 }}>
<Button buttonFunction={() => this.signup()} title="sign up" />
</View>
</View>
</Content>
</View>
Initial login page when there is a problem in focusing password:
After making some necessary changes it will be like this:
Just add a content component which can be imported from native base after your View component. I think removing KeyBoardAvoidingView will not fix the issue for smaller screens.
Hope this helps!