Search code examples
react-nativekeyboard

How to move up just specific elements, having keyboard enabled in React-Native?

I'm creating a chat screen in React-Native, and the issue which I'm confronting now with, is that when I enable the keyboard, the content doesn't move as intended. I tried several things, but neither of them didn't work as expected.

Here is a screen where I've marked the content which has to be moved up when the keyboard is present :

enter image description here

Firstly, I've tried the next structure

  <ScrollView scrollEnabled={false} keyboardShouldPersistTaps="handled">
    <KeyboardAvoidingView behavior="position">
        /...The rest of the content.../
    </KeyboardAvoidingView>
</ScrollView

and here's the screen enter image description here

as seen in the image, the whole container is "pushed" up by the keyboard, and when the keyboard disappears, the content returns to it's normal position.

In the second case, I've tried to assign to the behavior parameter of KeyboardAvoidingView the value "padding", but this didn't help, the keyboard just was going over the screen, and the content didn't modify at all

And at least, I've tried to assign to the same behavior the value "height", and it seemed to work as I wanted, but the problem appeared when the keyboard was gone - the moved content didn't moved to it's initial position. Here are the screens :

enter image description here enter image description here

Solution

  • Problem resolve, I had just to put the last container (the one where is the input placed) in a KeyboardAvoidingView with behavior="padding"