I'm working on implementing a KeyboardAvoidingView section for a signup form. I've managed to adjust the keyboard properly on both iOS and Android, but instead of increasing the view's height and scrolling up, the KeyboardAvoidingView is reducing the height.
Here's how it looks on Android:
Before keyboard adjustment:
https://i.sstatic.net/Z3tJt.jpg
After keyboard adjustment:
https://i.sstatic.net/q1R3q.jpg
This is the component code:
<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
<View style={mainWithFooter.main}>
<Text style={material.display1}>Create Your Account</Text>
</View>
<View style={mainWithFooter.footer}>
<Input
placeholder='First name'
onChangeText={t => updateSignupForm('firstName', t)}
/>
<Input
placeholder='Last name'
onChangeText={t => updateSignupForm('lastName', t)}
/>
<Input
placeholder='Email'
keyboardType='email-address'
autoCapitalize='none'
onChangeText={t => updateSignupForm('email', t)}
/>
<Input
placeholder='Password'
secureTextEntry
onChangeText={t => updateSignupForm('password', t)}
/>
<Button
text='Create Account'
onPress={signup}
primary
disabled={!signupFormIsValid}
block
/>
</View>
</KeyboardAvoidingView>
And here are the styles:
export default StyleSheet.create({
container: {
display: 'flex',
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 30,
minHeight: '100%',
},
main: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
},
footer: {
width: '100%',
flex: 0,
},
})
Any suggestions on how to prevent content overlap?