CODEWITHSUNDEEP
androidreactjskeyboardreact-native
Hiero
Hiero

Reputation: 2205

react-native resize <ScrollView/> when keyboard is open

I have a react-native simple chat app, which looks like this

+-----------------
|     Header     |
+----------------+
|                |
|                |
|    Messages    |
|                |
|                |
+----------------+
|   Write here   |
+----------------+

What I want to achieve is that when I open the keyboard the Messages View to shrink (decrease height) and I can be able to see the header and the text input as well, as I see now when I open keyboard the App is keeping the sizes but the keyboard is pushing all the content to top.

Upvotes: 4

Views: 3884

Answers (1)

Ben Clayton
Ben Clayton

Reputation: 82209

We've had success with https://github.com/Andr3wHur5t/react-native-keyboard-spacer.

You could set it up like this for your example:

<View style={[{flex: 1}]}>
    <Header style={{height: 80}}/>
    <Messages style={{flex: 1}}/>
    <WriteHere style={{height: 80}}/>

    {/* The view that will animate to match the keyboards height */}
    <KeyboardSpacer/>
  </View>

Upvotes: 1

Related Questions