Fix validation messages hidden behind keyboard

[rdjuric]

Details

Wraps our sign in steps in a KeyboardAvoidingView, moves the error message to stay above our Button.

Fixed Issues

$ #4080

Tests

1. Open the app without being logged
2. Trigger a error message (wrong email on the first step, or wrong password in the second)
3. The error shows up above the button

QA Steps

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

web.mov

Mobile Web

mWeb.mp4

Desktop

desktop.mov

iOS

iOS.mp4

Android

android.mp4

[stitesExpensify]

Nice!

[stitesExpensify]

Code looks great! I just watched all of the videos though and I noticed on web that when the error message pops up the image on the right side scrolls down, I don't think that should be happening 😬

[rdjuric]

Code looks great! I just watched all of the videos though and I noticed on web that when the error message pops up the image on the right side scrolls down, I don't think that should be happening 😬

The blue image on the first video? I looked HARD and can't see it scrolling down when the error appears 🧐

[stitesExpensify]

I'm sorry that's my fault, it was actually on desktop. The image of the phone shifts down

[rdjuric]

Ah, I can see it now! This happens on the main branch too, it doesn't look related to this PR (I also didn't change any code in the SignInPageLayoutWide)

Here's a vid of it happening on the main branch. You can repro it by making the window smaller than the email/password form.

desktop.mov

[stitesExpensify]

Ah, well if it's happening on main then we can just merge. Thanks!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.80-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.81-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅