Why is KeyboardAvoidingView not working in React Native?

Question

I have added KeyboardAvoidingView to my Sign In page and when the user clicks on either of the username or password fields they should all "move up" a bit so that the user can see the Sign In button at least enough to be able to click it. However, currently nothing happens. Does anyone know how to get this working properly in React Native??

    return (
        <ImageBackground source={require('../../assets/signinBG.jpg')} style={styles.backgroundImage}>
            <KeyboardAvoidingView style={styles.formContainer} behavior="padding" enabled>
                <View style={styles.logoContainer}>
                    <Image source={require('../../assets/mb_logo.png')}
                           style={styles.logo}/>
                </View>
                <View style={styles.loginContainer}>
                    <StatusBar
                        barStyle={'light-content'}/>
                    <View style={styles.usernameInputBar}>
                        {this.state.showUsernameLabel &&
                            <Text style={styles.formLabel}>username</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="username"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCorrect={false}
                            autoFocus={autoFocus}
                            returnKeyType={'next'}
                            autoCaptialize={'none'}
                            keyboardType={'email-address'}
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onSubmitEditing={() => this.passwordInput.focus()}
                            onChangeText={(text) => this.handleUsernameChange(text)}
                            value={this.state.email}
                        />
                    </View>
                    <View style={styles.passInputBar}>
                        {this.state.showPassowrdLabel &&
                            <Text style={styles.formLabel}>password</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="password"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCapitalize="none"
                            autoFocus={autoFocus}
                            returnKeyType={'go'}
                            keyboardType={'default'}
                            secureTextEntry
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            ref={(input) => this.passwordInput = input}
                            onChangeText={(text) => this.handlePasswordChange(text)}
                            value={this.state.password}
                        />
                    </View>

                    <TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
                        {this.renderSignInText()}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.showForgotLogin()}>
                        <Text style={styles.forgotLogin}>Forgot username of password?</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </ImageBackground>
    )

Here is also a video that I made to demonstrate this:

https://www.youtube.com/watch?v=Sr-z4VpZKg0&feature=youtu.be

Also, here is some of the css:

formContainer: {
    flex: 1,
    position: 'absolute'
},
backgroundImage: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'rgba(0,0,0,0.45)',
    width: null,
    height: null,
},

try using before ImageBackground – Saurabh Joshi Jun 08 '18 at 17:18 — Saurabh Joshi, Jun 08 '18 at 17:18

Dimitar Tsonev · Answer 1 · 2018-11-13T08:10:37.180

2

You should set

behavior="height"

"padding" is for iOS.

edited Nov 13 '18 at 08:10

answered Jun 08 '18 at 16:08

Dimitar Tsonev

3,711
5
40
70

1

I tried height but it didnt work. I have also tried behavior="position". Is there another way?? – FairyQueen Jun 08 '18 at 16:51

ink · Answer 2 · 2019-06-14T02:05:53.877

0

I used KeyboardAvoidingView, it doesn't work. I found this solution. I don't know if this works for Android, but it works on iOS, you can try it.

This is my answer to another question.

edited Jun 14 '19 at 02:05

answered Jun 13 '19 at 11:46

ink

519
6
19

Why is KeyboardAvoidingView not working in React Native?

2 Answers2