react-native-elements / react-native-elements-app

Demo app for React Native Elements (w/ React Native Web)
https://reactnativeelements.com/
1.29k stars 417 forks source link

Fix all bugs in Login Example screen #187

Closed HariAcidReign closed 3 years ago

HariAcidReign commented 3 years ago

The problem: TLDR: Both screens in Login Example are now part of the same screen. KeyboardAvoidingView treats them as 2 separate components and causes bugs in Portrait and especially Landscape mode. This PR solves that issue.

When form input is clicked in both Screen2 and 3, the entire view goes up and gets permanently hidden. The reason behind this bug is the KeyboardAvoidingView (KAV) which pushes the elements up upon clicking a form input.

Now, this library was required when both the Screen2 and 3 were in different sections (which can be accessed by sliding right), but now both the Screens are on the same page to avoid confusion and enable Landscape mode. This makes the KAV library redundant, as the forms in both Screens can just be scrolled both in Portrait and Landscape modes.

To replicate the bug: In both Portrait and Landscape modes, try to fill values in Screen2 and 3 on LoginExample page. Not using KAV gives a much better UI experience.

Open to suggestions, and willing to implement them šŸ™ŒšŸ»

HariAcidReign commented 3 years ago

Another Bug Fix in this PR: Incorrectly displaying Success Alert message in Screen3 even if input validation fails. I'm fixing that bug here itself to avoid merge conflicts.

HariAcidReign commented 3 years ago

What this PR achieves:

All the bugs in the Login Example screen have been squashed. šŸ™ŒšŸ»