KeyboardAvoidingView not working properly? Check your Flexbox Layout first

Keyboard overlaying Input or Submit button is a common problem in React Native. Something like this:

Here’s the code:

And we found there is a built-in component called KeyboardAvoidingView. Terrific! This is exactly what we need! Let’s add it right now:

<KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : null}
    style={{ flex: 1 }}
>
    {/* Code from above */}
</KeyboardAvoidingView>

Hmm… wait a minute, why doesn’t my KeyboardAvoidingView seem to be working at all?

Okay, let’s hold on and have a look again what is KeyboardAvoidingView (https://facebook.github.io/react-native/docs/keyboardavoidingview)

It can automatically adjust either its position or bottom padding based on the position of the keyboard.

In other words, KeyboardAvoidingView is just a normal <View /> component with paddingBottom.

So in order for us to better understand the current issue, let’s simulate our React Native screen with HTML and CSS:

We can simulate the Keyboard toggle by changing paddingBottom from 300 to 0

As we can see, the exact same issue happened again. Items overflow the container instead of being pushed out of the container. This is because Flexbox has default justifyContent as flex-start, which means items are positioned from the beginning(top) of the container.

Therefore, as long as we set justifyContent to be flex-end, bottom will become the beginning of the container, items then will be pushed out from the top.

Now the overflow issue has been fixed, but adding flex-end makes the content stay at the bottom of the container. We can solve this by adding a <div style={{ flex: 1 }} /> by the end of the container to take up the empty spacing.

Great! We can now do the same to our React Native code. Here’s the final code.

UPDATE: For react-native@0.62 or above, it is recommended to set the behavior of KeyboardAvoidingView to be

Platform.OS == "ios" ? "padding" : "height"

instead of no behavior prop for Android.

see https://reactnative.dev/docs/keyboardavoidingview#behavior