[TMA-104] Registration wizard & footer positioning fix (#14)

* Remove KeyboardAvoidingView and add centered prop

* Fix layout to match updated Background component

* Add KeyboardAvoidingView to Login screen

* Fix arrows/wizard position & fix keyboard avoidance effect

1 files changed, 18 insertions, 7 deletions

diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index 193ef767..b3b1ab71 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -9,10 +9,12 @@ import {
   Image,
   TouchableOpacity,
   StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 
 import {RootStackParamList} from '../routes';
-import {Background, TaggInput, CenteredView} from '../components';
+import {Background, TaggInput} from '../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../constants';
 
 type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
@@ -204,9 +206,11 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   );
 
   return (
-    <Background>
+    <Background centered style={styles.container}>
       <StatusBar barStyle="light-content" />
-      <CenteredView>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardAvoidingView}>
         <Image
           source={require('../assets/images/logo.png')}
           style={styles.logo}
@@ -225,7 +229,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           valid={form.isValidUser}
           invalidWarning="Username must be at least 6 characters and can only contain letters, numbers, periods, and underscores."
           attemptedSubmit={form.attemptedSubmit}
-          width="100%"
         />
 
         <TaggInput
@@ -246,13 +249,21 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         />
         <ForgotPassword />
         <LoginButton />
-        <RegistrationPrompt />
-      </CenteredView>
+      </KeyboardAvoidingView>
+      <RegistrationPrompt />
     </Background>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  keyboardAvoidingView: {
+    alignItems: 'center',
+  },
   logo: {
     width: 215,
     height: 149,
@@ -274,7 +285,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#fff',
     borderRadius: 18,
-    marginBottom: '10%',
+    marginBottom: '15%',
   },
   startDisabled: {
     backgroundColor: '#ddd',