KeyboardAvoidingView Example in React Native

KeyboardAvoidingView Example in React Native

KeyboardAvoidingView is used to handle the layout scroll on keyboard appearance and while hidden to make all the components on screen visible/accessible to user. Using KeyboardAvoidingView you can either scroll the complete screen above the keyboard or automatically scroll to focused input with keyboard appearance. Coming to using KeyboardAvoidingView in Android,  windowSoftInputMode plays a vital role in its scroll behaviour. windowSoftInputMode needs to be set to adjustPan in AndroidManifest.xml file present in the android app folder to scroll the entire screen above keyboard and adjustResize to scroll behind the keyboard.

On using KeyboardAvoidingView, it wraps the screen only to fit the components/views used inside it. For say if there are only two TextInputs and a button then it wraps the screen to one fourth of the screen only to fit these. In order to avoid this we can use below property in KeyboardAvoidingView.

              

contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}

In order to make it scroll on android use the below property in KeyboardAwareScrollView

         

 enableOnAndroid={true}

If the screen doesn't scrolls till bottom and a little portion at bottom of the screen goes of behind keyboard then use the below property in KeyboardAwareScrollView

             

 keyboardVerticalOffset={100}

In case if we wish to move the entire screen above the keyboard we need to use the below property to capture the keyboard height

              

keyboardVerticalOffset={500}

In case if there is any image used as parent then in order to make the image occupy the complete screen we need to use resizemode:"contain" inside Image.

Example of KeyboardAvoidingView :

Outcome:

You can find the complete code here

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)