From 4d3ee15f7353901b64bc0f523975ffc9b25dfb19 Mon Sep 17 00:00:00 2001
From: Tom McGuire <Mcgtom10@gmail.com>
Date: Tue, 19 Mar 2024 12:46:13 -0700
Subject: [PATCH] fix: prevent phone input number from being hidden behind
 keyboard (#5124)

### Description

Uses the keyboard aware scroll view to prevent the keyboard from
obscuring the 'continue' button when the phone number input is selected.
Also sets SafeAreaView to `height: '100%'` instead of `flexGrow: 1` to
prevent continue buttons from render off screen when large fonts are
used as this can prevent users from advancing to the next screen.

#### Backup Introduction

| iOS Before | iOS After | Android Before | Android After|
| ---- | ---- | ---- | ---- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/affe652e-b51b-4317-84b2-1c7b16eca336)
|
![](https://github.com/valora-inc/wallet/assets/26950305/9e21bad8-c657-448c-b48e-614b27e46d9c)
|
![](https://github.com/valora-inc/wallet/assets/26950305/0b65d949-cfa6-4d82-afd9-ee79fa1f5dcd)
|
![](https://github.com/valora-inc/wallet/assets/26950305/943b5ca3-e701-4895-a323-c01f5767d1b5)
|

#### Wallet Security Primer

| iOS Before | iOS After | Android Before | Android After|
| ---- | ---- | ---- | ---- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/8fc1864d-9deb-484f-9512-3cf62a0aec69)
|
![](https://github.com/valora-inc/wallet/assets/26950305/53373533-1f1b-4ba1-b267-738ef998358f)
|
![](https://github.com/valora-inc/wallet/assets/26950305/3b71cca2-3494-4fe5-8350-e353cfc2e75f)
|
![](https://github.com/valora-inc/wallet/assets/26950305/75a4c793-dcdd-4f3a-914f-da5f9afa3d69)
|

#### Phone Number Input

| iOS Before | iOS After | Android Before | Android After|
| ---- | ---- | ---- | ---- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/169b5cf7-efc5-4446-9580-1060f0880b97)
|
![](https://github.com/valora-inc/wallet/assets/26950305/8a465ed1-4fe8-4e92-83ce-ab19f2887a74)
|
![](https://github.com/valora-inc/wallet/assets/26950305/32350789-6876-44e4-981c-5c218e44a4c8)
|
![](https://github.com/valora-inc/wallet/assets/26950305/2ad1b100-163a-4901-a4b5-3cc1f5b37e60)
|
### Test plan

- [x] Tested locally on iOS
- [x] Tested locally on Android

### Related issues

- Fixes ACT-1117

### Backwards compatibility

Yes

### Network scalability

N/A
---
 src/keylessBackup/KeylessBackupIntro.tsx      |  2 +-
 src/keylessBackup/KeylessBackupPhoneInput.tsx | 11 +++++++----
 src/keylessBackup/SignInWithEmail.tsx         |  2 +-
 src/keylessBackup/WalletSecurityPrimer.tsx    |  2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/keylessBackup/KeylessBackupIntro.tsx b/src/keylessBackup/KeylessBackupIntro.tsx
index dbf7a4233d5..41c04c3cf8a 100644
--- a/src/keylessBackup/KeylessBackupIntro.tsx
+++ b/src/keylessBackup/KeylessBackupIntro.tsx
@@ -106,7 +106,7 @@ export default KeylessBackupIntro
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
-    flexGrow: 1,
+    height: '100%',
   },
   scrollContainer: {
     paddingHorizontal: Spacing.Thick24,
diff --git a/src/keylessBackup/KeylessBackupPhoneInput.tsx b/src/keylessBackup/KeylessBackupPhoneInput.tsx
index 142cb194660..f30f11ceec7 100644
--- a/src/keylessBackup/KeylessBackupPhoneInput.tsx
+++ b/src/keylessBackup/KeylessBackupPhoneInput.tsx
@@ -2,13 +2,15 @@ import { Countries } from '@celo/phone-utils'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native'
+import { SafeAreaView, StyleSheet, Text } from 'react-native'
 import * as RNLocalize from 'react-native-localize'
 import { defaultCountryCodeSelector, e164NumberSelector } from 'src/account/selectors'
 import { getPhoneNumberDetails } from 'src/account/utils'
 import { KeylessBackupEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
+import KeyboardSpacer from 'src/components/KeyboardSpacer'
 import PhoneNumberInput from 'src/components/PhoneNumberInput'
 import i18n from 'src/i18n'
 import KeylessBackupCancelButton from 'src/keylessBackup/KeylessBackupCancelButton'
@@ -93,7 +95,7 @@ function KeylessBackupPhoneInput({ route }: Props) {
 
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.scrollContainer}>
+      <KeyboardAwareScrollView style={styles.scrollContainer}>
         <Text style={styles.title}>
           {keylessBackupFlow === KeylessBackupFlow.Setup
             ? t('keylessBackupPhoneInput.setup.title')
@@ -112,7 +114,7 @@ function KeylessBackupPhoneInput({ route }: Props) {
           onPressCountry={onPressCountry}
           onChange={onChangePhoneNumberInput}
         />
-      </ScrollView>
+      </KeyboardAwareScrollView>
       <Button
         testID="KeylessBackupPhoneInput/Continue"
         onPress={onPressContinue}
@@ -122,6 +124,7 @@ function KeylessBackupPhoneInput({ route }: Props) {
         style={styles.button}
         disabled={!phoneNumberInfo.isValidNumber}
       />
+      <KeyboardSpacer />
     </SafeAreaView>
   )
 }
@@ -141,7 +144,7 @@ export default KeylessBackupPhoneInput
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
-    flexGrow: 1,
+    height: '100%',
   },
   scrollContainer: {
     padding: Spacing.Thick24,
diff --git a/src/keylessBackup/SignInWithEmail.tsx b/src/keylessBackup/SignInWithEmail.tsx
index 210a70b0798..3405f9cd71e 100644
--- a/src/keylessBackup/SignInWithEmail.tsx
+++ b/src/keylessBackup/SignInWithEmail.tsx
@@ -114,7 +114,7 @@ export default SignInWithEmail
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
-    flexGrow: 1,
+    height: '100%',
   },
   scrollContainer: {
     padding: Spacing.Thick24,
diff --git a/src/keylessBackup/WalletSecurityPrimer.tsx b/src/keylessBackup/WalletSecurityPrimer.tsx
index 64e1b8ed8c2..b5367c60e91 100644
--- a/src/keylessBackup/WalletSecurityPrimer.tsx
+++ b/src/keylessBackup/WalletSecurityPrimer.tsx
@@ -53,7 +53,7 @@ export default WalletSecurityPrimer
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
-    flexGrow: 1,
+    height: '100%',
   },
   scrollContainer: {
     padding: Spacing.Thick24,