KeyboardAwareScrollView Example in React Native

KeyboardAwareScrollView Example in React Native

KeyboardAwareScrollView is used to handle the layout scroll on keyboard appearance and while hidden to make all the components on screen visible/accessible to user. It automatically scrolls to focused input with keyboard appearance. Coming to using KeyboardAwareScrollView in Android,  windowSoftInputMode plays a vital role in its scroll behaviour which needs to be set to adjustPan in AndroidManifest.xml file present in the android app folder.

On using KeyboardAwareScrollView, 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 KeyboardAwareScrollView.

             

 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 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 KeyboardAwareScrollView :

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 :)