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:

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

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:

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

instead of no behavior prop for Android.

Related posts:

I belong to a Facebook group called Recovering Ex-Christians. I join in the conversations, even though I don’t think I’m recovering. In particular, I enjoyed fellowshipping with fellow believers. My…

Joe Biden made it very clear last month to the nearly 100 million Americans not vaccinated, “We’ve been patient, but our patience is wearing thin, and your refusal has cost all of us,” he says with…

I was reading through a section about life and people’s perspective towards it and how it has shaped them into the person they are today. I read some very powerful and life-changing posts. I took…