Understanding KeyboardAvoidingView

  • Just wrap your entire screen on the KeyboardAvoidingView.
  • It will behave as a normal view when the keyboard is hidden.
  • When the keyboard is out the KeyboardAvoidingView will shrink, filling just the space it has between the top of the screen and the top of the keyboard.
  • Consider wrapping some of your components on a ScrollWiew. It is a normal practice when the content of the screen can overflow its size. And with a screen taken up by the keyboard that is likely the case.
  • “You need to have justifyContent: ‘flex-end’ in your main view so that its child components go up when the keyboard shows”. False! If you need this to make it work, it means that there is something else wrong in your code. Just refactor following the key points I’ve given and you won’t need the flex-end.
  • “You just have to wrap the specific input that you want to keep above of the keyboard”. False! It will mess up the whole component, as it assumes it is taking up all the screen size, not only wrapping one component.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The tech stacks MEAN and MERN are considering the trendiest in 2020

How to Access Redux Store?

An Intro to D3

[Vue.js] How we develop Reusable UI Components — Lazybee

It’ never too late to start.

Remove A Property From An Object In JavaScript With This Little Trick

What to look for in a great API and how to use it.

Build a Realtime PWA with React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Óliver L. Sanz

Óliver L. Sanz

More from Medium

Steps to build a very simple Android-app development environment with Expo on Windows 11

Build APK or AAB from React Native Project Using Expo

How I Upgraded Expo 41 -> 44

Workflow: From excel translations to multi-language React (Native) app