Here is why your KeyboardAvoidingView isn’t working

Here is why your KeyboardAvoidingView isn’t working

Post by: Niraj Dhungana

Posted on: Nov 12 2021

#React Native# Expo

The main problem when working with the React Native TextInput components. You have a TextInput but now it is covered by the virtual Keyboard of the device. 

keyboard hides the main input field

And I know this as well when you try to find out its solution, you probably come across this KeyboardAvoidingVIew in React Native. 

I am using this component all the time to wrap my form or text inputs and it works completely fine. But one day it cheated me. 

Means it doesn’t work the like it used to work and here in this post I am sharing my experience with you guys. Why that happens and how you can avoid that.

How I get into the problem with KeyboardAvoidingVIew

BTW if you are a visual learner you can understand and solve your problem by watching this video.

Click here to watch video

Why your KeyboardAvoidingVIew isn’t working ?

Let’s try to understand in which case this KeyboardAvoidingView doesn’t work.

Now if you are using ScrollView component or FlatList component to render your TextInput components and you are making their horizontal true. That may be the one reason.

If you are not using any scrollable components to wrap your form or input component then use them and it will work perfectly fine.

The only thing that you need to understand is that KeyboardAvoidingVIew doesn’t work inside horizontal scroll view.