CODEWITHSUNDEEP
react-native
The Draft
The Draft

Reputation: 37

KeyboardAvoidingView doesn't do anything

I'm trying to work with the KeyboardAvoidingView component from react native but it doesn't seem to do anything. Here is my code :

    <Container>
      <Header navigation={this.props.navigation} title="Header" />
      <View style={{height: pageHeight}}>
        <KeyboardAvoidingView style={{flex: 1,}} behaviour="padding" enabled>
          <ScrollView style={{
            flex: 1,
            borderColor: '#F00',
            borderWidth: 2,
          }} keyboardShouldPersistTaps="always">
            <InputWithLabel label="Item 1" editable={true} />
            <InputWithLabel label="Item 2" editable={true} />
            <InputWithLabel label="Item 3" editable={true} />
            <InputWithLabel label="Item 4" editable={true} />
            <InputWithLabel label="Item 5" editable={true} />
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
    </Container>

And here is the result when the keybaord is closed and when the keyboard is open on the 5th item. As you can see nothing happens, the view doesn't move a bit. What's weird is that I can add a paddingBottom to the KeyboardAvoidingView and it works fine and it allows me to mimic the expected result.

Is there something missing in my code ?

Upvotes: 0

Views: 1589

Answers (2)

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

You can try something like this without KeyboardAvoidingView to move your screen while opening keyboard

<Container>
    <Header navigation={this.props.navigation} title="Header" />
    <ScrollView keyboardShouldPersistTaps="always">
        <View style={{height: pageHeight, flex: 1,  borderColor: '#F00', borderWidth: 2,}}>
            <InputWithLabel label="Item 1" editable={true} />
            <InputWithLabel label="Item 2" editable={true} />
            <InputWithLabel label="Item 3" editable={true} />
            <InputWithLabel label="Item 4" editable={true} />
            <InputWithLabel label="Item 5" editable={true} />
        </View>
    </ScrollView>
</Container>

Upvotes: 1

Kosalram Ramakrishnan
Kosalram Ramakrishnan

Reputation: 818

You can use either KeyboardAvoidingView or Scrollview in your code. Not both.

Go to your AndroidManifest.xml file which will be inside your project folder in following path /android/app/src/main/AndroidManifest.xml

You find the line android:windowSoftInputMode and change it's value as adjustPan.

So when you tap on item #5 your view will be above the keypad.

Upvotes: 2

Related Questions