I have a form layout at the bottom of the screen wrapped in KeyboardAvoidView
. Whenever user taps on TextInput
, keyboard pushes form up. The problem is when the keyboard is still up and I simply tap on another TextInput
, the focus doesn’t change. Only after tap of return key, the keyboard hides and then I can able to tap on another TextInput. If the form is positioned top, the tap works as ideally it should be. You can comment imgBg
’s justifyContent: 'flex-end'
and notice. How to fix this issue? Also I’d appreciate very much if keyboard hides on tap of anywhere other than TextInput
.
Here is a expo snack of the demo.
Below is the code:
<ImageBackground
source={require('./assets/splash.png')}
style={styles.imgBg}>
<StatusBar
barStyle="light-content"
backgroundColor="#6a51ae"
/>
<LinearGradient
colors={['transparent', 'rgba(0,0,0,1)']}
style={ styles.gradientBg }
/>
<KeyboardAvoidingView behavior='position' style={styles.keyboardAvoidingWrapper}>
<View style={styles.formContainer}>
<View>
<Text style={styles.title}>You’re all set!</Text>
<Text style={styles.subtitle}>Get started by verifying your email.</Text>
<View>{ this.state.btnClicked ? this._statusLabel() : null }</View>
</View>
<View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder='Company email'
textContentType='emailAddress'
placeholderTextColor={'rgba(0,0,0,0.5)'}
onChangeText={(emailText) => this.setState({emailText})}
value={this.state.emailText}
/>
<TextInput
style={styles.textInput}
placeholder='Full name'
placeholderTextColor={'rgba(0,0,0,0.5)'}
textContentType='name'
onChangeText={(nameText) => this.setState({nameText})}
value={this.state.nameText}
/>
<TextInput
style={styles.textInput}
password={true}
placeholder='Set password'
placeholderTextColor={'rgba(0,0,0,0.5)'}
textContentType='none'
secureTextEntry={true}
onChangeText={(passwordText) => this.setState({passwordText})}
value={this.state.passwordText}
/>
</View>
<Button
title={'Signup'}
onPress={() => this.setState({btnClicked: true})}
/>
<Button
title={'or log in, instead'}
color={'rgb(105,112,127)'}
/>
</View>
</View>
</KeyboardAvoidingView>
</ImageBackground>
The styles are:
imgBg: {
...StyleSheet.absoluteFillObject,
// position: 'relative',
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
},
gradientBg: {
height: '80%',
position: 'absolute',
right: 0,
bottom: 0,
left: 0
},
keyboardAvoidingWrapper: {
// position: 'absolute',
// bottom: 0,
height: 450,
width: '100%',
},
formContainer: {
height: 450,
padding: 32,
width: '100%',
borderTopRightRadius: 16,
borderTopLeftRadius: 16,
backgroundColor: '#fff',
justifyContent: 'space-between',
// alignItems: 'center',
},