THE OVERLAPPING PROBLEM

Its been 2-3 weeks i have been working on a project using react native and PHP. Though I am working on front end right now. I was assigned a splash page, login page and signup page. This is how my login and sign up page looked like.

Now talking about overlapping problem. When I was done with the whole UI. I tried to add my E-mail and Password. But all the elements overlapped each other when keyboard appeared on the screen. This is how it looks like.

To avoid this problem I came up with 'react-native-keyboard-aware-scroll-view'.

HOW TO USE IT?

INSTALLATION:

npm i react-native-keyboard-aware-scroll-view --save

OR

yarn add react-native-keyboard-aware-scroll-view

Now we can import 'KeyboardAwareScrollView' in this way.

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

At last adding KeyboardAwareScrollView tags will solve this problem.

Now this overlapping problem is fixed.

NOTE:

After importing KeyboardAwareScrollView the alignment of other component changes. After this they need to be fixed by using marginBottom/marginTop etc.