CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
aditya kumar
aditya kumar

Reputation: 3023

keyboardAvoidingView is not working in react-native

Why is keyboardAvoidingView not working in my app I am trying to add textinput at the bottom of the screen and when user starts to type textInput should always be on the top of the keyboard.

I tried this way and it didn't work. I am usingreact-navigation for screen navigation and header.

I tried to find the solution on StackOverflow but didn't solve my problem. Switching behavior: {'padding'} didn't work as well.

Any help would be great.

const CreateTodoScreen = props => {
    return (
        <KeyboardAvoidingView style={{flex: 1}} behavior={"height"} enabled={true}>
            <View style={{flex: 1, justifyContent: 'flex-end'}}>
                <TextInput placeholder={"e.g. call Alex"} style={{borderBottomWidth: 2, borderBottomColor: 'black'}}/>
            </View>
        </KeyboardAvoidingView>
    )
};

Upvotes: 0

Views: 1108

Answers (2)

aditya kumar
aditya kumar

Reputation: 3023

I don't know why but this worked for me. I had to put keyboardVerticalOffset={100}

const CreateTodoScreen = props => {
    return (
        <KeyboardAvoidingView style={{ flex: 1 }}
                              behavior="padding"
                              keyboardVerticalOffset={100}>

            <View style={{flex: 1, justifyContent: 'flex-end'}}>
                <TextInput placeholder={"e.g. call Alex"} style={{borderBottomWidth: 2, borderBottomColor: 'black'}}/>
            </View>
        </KeyboardAvoidingView>
    )
};

Upvotes: 1

user9846301
user9846301

Reputation:

Try this, I hope this will helps you.

You can write like this behavior ={Platform.OS === "ios" ? "padding" : null}

const CreateTodoScreen = props => {
    return (
        <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === "ios" ? "padding" : null} enabled={true}>
            <View style={{flex: 1, justifyContent: 'flex-end'}}>
                <TextInput placeholder={"e.g. call Alex"} style={{borderBottomWidth: 2, borderBottomColor: 'black'}}/>
            </View>
        </KeyboardAvoidingView>
    )
};

Upvotes: 0

Related Questions