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.
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.
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.
- React Native Multi Select on Long Press - Touchable Opacity.
- How to Setup react-native-cli and Android Emulator on Windows
- How to Compress or Manipulate Images in React Native Expo
- RecyclerListView – React Native Everything You Need to Know
- React Native Android Emulator - "could not compile settings file"