KeyboardAvoidView issue with flex layout

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',
  },

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.