How to avoid the virtual keyboard when entering text in React Native

Just a small article about one of the most common problems when developing a native apps on iOS or Android - how to handle the showing/hiding of the virtual keyboard and the UI.

In React Native, the solution is really easy... (starting to love React even though I'm not a fan of Facebook! 🤣)

Solution

Just wrap the text input component or it's parent component with KeyboardAvoidingView like this:

import {KeyboardAvoidingView} from 'react-native';

<KeyboardAvoidingView behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>;

Where the behavior can be: height, position or padding.
On Android it works better without setting it whereas iOS is the opposite!

That is all!
Happy avoiding of the keyboard! 🏂