From e1665a67400cbaebb6ac7d4bdaa6250680ff3133 Mon Sep 17 00:00:00 2001
From: Daniel Adepoju <daniel.adepoju@interswitchgroup.com>
Date: Wed, 22 Apr 2020 23:27:42 +0100
Subject: [PATCH 1/4] register page and fixed rendering of error message on
 input

---
 src/assets/style.js                  |   7 +
 src/assets/svgs/AppSvg.js            |  71 ++++++++
 src/components/FloatingLabelInput.js | 122 ++++++-------
 src/navigators/AuthNavigator.js      |   2 +
 src/screens/Auth/Intro.js            |  34 ++--
 src/screens/Auth/Login.js            | 222 +++++++++++++++---------
 src/screens/Auth/Register.js         | 250 +++++++++++++++++++++++++++
 7 files changed, 556 insertions(+), 152 deletions(-)
 create mode 100644 src/assets/svgs/AppSvg.js
 create mode 100644 src/screens/Auth/Register.js

diff --git a/src/assets/style.js b/src/assets/style.js
index 21035dd..b404eaf 100644
--- a/src/assets/style.js
+++ b/src/assets/style.js
@@ -130,4 +130,11 @@ export const loginScreenStyles = {
     textAlign: 'center',
     marginBottom: scale(10),
   },
+  bottomText: {
+    fontFamily: fonts.regularText.fontFamily,
+    fontSize: scale(fonts.h5.fontSize - 1),
+    color: colors.abuttoDark,
+    textAlign: 'center',
+    marginBottom: scale(10),
+  },
 };
diff --git a/src/assets/svgs/AppSvg.js b/src/assets/svgs/AppSvg.js
new file mode 100644
index 0000000..aee2903
--- /dev/null
+++ b/src/assets/svgs/AppSvg.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import {Svg, Rect, Path, G} from 'react-native-svg';
+import {scale} from '../style';
+
+
+export const MenuSVG = ({color}) => (
+  <Svg
+    width={scale(27)}
+    height={scale(15)}
+    viewBox="0 0 27 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <Rect
+      x="4.40816"
+      width="21.4898"
+      height="2.7551"
+      rx="1.37755"
+      fill={color || '#E5E5E5'}
+    />
+    <Rect
+      y="6.06128"
+      width="21.4898"
+      height="2.7551"
+      rx="1.37755"
+      fill={color || '#E5E5E5'}
+    />
+    <Rect
+      x="5.5102"
+      y="12.1224"
+      width="21.4898"
+      height="2.7551"
+      rx="1.37755"
+      fill={color || '#E5E5E5'}
+    />
+  </Svg>
+);
+
+export const RightChevronSVG = ({color, size = 1}) => (
+  <Svg
+    width={scale(18 * size)}
+    height={scale(18 * size)}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <G id="chevron">
+      <Path
+        id="chevron_2"
+        d="M6.22125 12.4425L9.65625 9L6.22125 5.5575L7.27875 4.5L11.7788 9L7.27875 13.5L6.22125 12.4425Z"
+        fill={color || '#F6FEFF'}
+      />
+    </G>
+  </Svg>
+);
+
+export const LeftChevronSVG = ({color, size = 1}) => (
+  <Svg
+    width={scale(18 * size)}
+    height={scale(18 * size)}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <G id="arrow_back_ios_24px">
+      <Path
+        id="icon/navigation/arrow_back_ios_24px"
+        d="M13.3762 2.90251L12.0412 1.57501L4.62375 9.00001L12.0487 16.425L13.3762 15.0975L7.27875 9.00001L13.3762 2.90251Z"
+        fill={color || '#F6FEFF'}
+        fillOpacity="0.54"
+      />
+    </G>
+  </Svg>
+);
diff --git a/src/components/FloatingLabelInput.js b/src/components/FloatingLabelInput.js
index 553c8ed..4d2b60a 100644
--- a/src/components/FloatingLabelInput.js
+++ b/src/components/FloatingLabelInput.js
@@ -59,69 +59,73 @@ const FloatingLabelInput = forwardRef((props, ref) => {
   };
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
-      <View
-        style={{
-          // paddingTop: Platform.OS === 'ios' ? 18 : 0,
-          marginVertical: scale(10),
-          paddingHorizontal: scale(5),
-          paddingBottom: 0,
-          height: scale(48),
-          borderRadius: scale(5),
-          borderWidth: 2,
-          borderColor: props.error
-            ? colors.abuttoError
-            : state.isFocused
-            ? colors.abuttoBlue
-            : colors.abuttoGrey,
-        }}>
-        <Animated.Text style={labelStyle}>{label}</Animated.Text>
-        <TextInput
-          {...props}
-          ref={ref}
-          secureTextEntry={props.secureTextEntry ? secureTextInput : false}
-          enablesReturnKeyAutomatically={true}
+      <View>
+        <View
           style={{
-            // height: 26,
-            marginBottom: -scale(10),
-            // height: scale(40),
-            flex: 1,
-            fontFamily: fonts.regularText.fontFamily,
-            fontSize: scale(fonts.h5.fontSize),
-            color: colors.abuttoDark,
+            // paddingTop: Platform.OS === 'ios' ? 18 : 0,
+            marginTop: scale(10),
+            paddingHorizontal: scale(5),
             paddingBottom: 0,
-          }}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {icon ? (
-          props.secureTextEntry ? (
-            <TouchableOpacity
-              style={{
-                top: -25,
-                display: 'flex',
-                marginLeft: '91%',
-              }}
-              onPress={() => {
-                setState((prevState) => ({
-                  secureTextInput: !prevState.secureTextInput,
-                }));
-              }}>
-              <View>
+            height: scale(48),
+            borderRadius: scale(5),
+            borderWidth: 2,
+            borderColor: props.error
+              ? colors.abuttoError
+              : state.isFocused
+              ? colors.abuttoBlue
+              : colors.abuttoGrey,
+          }}>
+          <Animated.Text style={labelStyle}>{label}</Animated.Text>
+          <TextInput
+            {...props}
+            ref={ref}
+            secureTextEntry={props.secureTextEntry ? secureTextInput : false}
+            enablesReturnKeyAutomatically={true}
+            style={{
+              // height: 26,
+              marginBottom: -scale(10),
+              // height: scale(40),
+              flex: 1,
+              fontFamily: fonts.regularText.fontFamily,
+              fontSize: scale(fonts.h5.fontSize),
+              color: colors.abuttoDark,
+              paddingBottom: 0,
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+          {icon ? (
+            props.secureTextEntry ? (
+              <TouchableOpacity
+                style={{
+                  top: -25,
+                  display: 'flex',
+                  marginLeft: '91%',
+                }}
+                onPress={() => {
+                  setState((prevState) => ({
+                    secureTextInput: !prevState.secureTextInput,
+                  }));
+                }}>
+                <View>
+                  <Image source={icon} />
+                </View>
+              </TouchableOpacity>
+            ) : (
+              <View
+                style={{
+                  top: -25,
+                  display: 'flex',
+                  marginLeft: '91%',
+                }}>
                 <Image source={icon} />
               </View>
-            </TouchableOpacity>
-          ) : (
-            <View
-              style={{
-                top: -25,
-                display: 'flex',
-                marginLeft: '91%',
-              }}>
-              <Image source={icon} />
-            </View>
-          )
-        ) : null}
-        <Text type="small" style={{color: colors.abuttoError}}>
+            )
+          ) : null}
+        </View>
+        <Text
+          type="small"
+          style={{color: colors.abuttoError, textAlign: 'right'}}>
           {props.error}
         </Text>
       </View>
diff --git a/src/navigators/AuthNavigator.js b/src/navigators/AuthNavigator.js
index 9f5029d..45a67ce 100644
--- a/src/navigators/AuthNavigator.js
+++ b/src/navigators/AuthNavigator.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
 import Login from '../screens/Auth/Login';
 import Intro from '../screens/Auth/Intro';
+import Register from '../screens/Auth/Register';
 
 const AuthStack = createStackNavigator();
 
@@ -14,6 +15,7 @@ export default function AuthNavigator() {
       }}>
       <AuthStack.Screen name="Intro" component={Intro} />
       <AuthStack.Screen name="Login" component={Login} />
+      <AuthStack.Screen name="Register" component={Register} />
     </AuthStack.Navigator>
   );
 }
diff --git a/src/screens/Auth/Intro.js b/src/screens/Auth/Intro.js
index 6177de9..f9d811b 100644
--- a/src/screens/Auth/Intro.js
+++ b/src/screens/Auth/Intro.js
@@ -50,31 +50,37 @@ export default function Intro(props) {
             alignItems: 'center',
             paddingTop: scaleVertical(10),
           }}>
-          <Button text="email or phone" onPress={() => {}} type="light" />
+          <Button
+            text="email or phone"
+            onPress={() => {
+              props.navigation.navigate('Register');
+            }}
+            type="light"
+          />
         </View>
         <View
           style={{
             paddingVertical: scaleVertical(10),
             alignItems: 'center',
           }}>
-          <View
+          <TouchableOpacity
             style={{
-              flexDirection: 'row',
-              alignItems: 'center',
+              paddingVertical: scale(5),
+            }}
+            onPress={() => {
+              props.navigation.navigate('Login');
             }}>
-            <Text style={introScreenStyles.noAccountText}>
-              Already have an account?{' '}
-            </Text>
-            <TouchableOpacity
+            <View
               style={{
-                paddingVertical: scale(5),
-              }}
-              onPress={() => {
-                props.navigation.navigate('Login');
+                flexDirection: 'row',
+                alignItems: 'center',
               }}>
+              <Text style={introScreenStyles.noAccountText}>
+                Already have an account?{' '}
+              </Text>
               <Text style={introScreenStyles.link}>Log in</Text>
-            </TouchableOpacity>
-          </View>
+            </View>
+          </TouchableOpacity>
         </View>
       </View>
     </ScrollView>
diff --git a/src/screens/Auth/Login.js b/src/screens/Auth/Login.js
index d422e28..617bbfd 100644
--- a/src/screens/Auth/Login.js
+++ b/src/screens/Auth/Login.js
@@ -1,14 +1,28 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, {createRef, useState, useEffect} from 'react';
-import {ScrollView, View, Text, Animated} from 'react-native';
+import {
+  ScrollView,
+  View,
+  Text,
+  Animated,
+  KeyboardAvoidingView,
+} from 'react-native';
 import FloatingLabelInput from '../../components/FloatingLabelInput';
-import {loginScreenStyles, scale, scaleVertical} from '../../assets/style';
+import {
+  loginScreenStyles,
+  scale,
+  scaleVertical,
+  colors,
+  introScreenStyles,
+} from '../../assets/style';
 import TriangleSvg from '../../assets/svgs/TriangleSvg';
 import LogoSvg from '../../assets/svgs/LogoSvg';
 import Button from '../../components/Button';
 import OceanSvg from '../../assets/svgs/OceanSvg';
+import {LeftChevronSVG} from '../../assets/svgs/AppSvg';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
-export default function Login() {
+export default function Login(props) {
   const usernameRef = createRef();
   const passwordRef = createRef();
   const [username, setUsername] = useState('');
@@ -37,100 +51,150 @@ export default function Login() {
     animateWallBar();
   }, []);
 
+  const onLogin = () => {
+    let error = false;
+    if (!username) {
+      setUsernameError('Enter your username');
+      error = true;
+    }
+    if (!password) {
+      setPasswordError('Enter your password');
+    }
+    if (!error) {
+      console.log('passed');
+    }
+  };
+
   return (
-    <ScrollView
-      bounces={false}
-      style={{
-        flex: 1,
-      }}
-      contentContainerStyle={loginScreenStyles.container}>
-      <View
+    <KeyboardAvoidingView style={{flex: 1}} behavior="padding">
+      <ScrollView
+        bounces={false}
         style={{
           flex: 1,
-          justifyContent: 'space-between',
-        }}>
+        }}
+        contentContainerStyle={loginScreenStyles.container}>
         <View
           style={{
-            position: 'absolute',
-            marginTop: -scale(40),
-            marginLeft: -scale(10),
-          }}>
-          <TriangleSvg />
-        </View>
-        <View
-          style={{
-            padding: scale(50),
+            flex: 1,
+            justifyContent: 'space-between',
           }}>
           <View
             style={{
-              paddingTop: scaleVertical(40),
-              alignItems: 'center',
+              position: 'absolute',
+              marginTop: -scale(40),
+              marginLeft: -scale(10),
             }}>
-            <LogoSvg />
-            <View>
-              <Text style={loginScreenStyles.welcomeBack}>Welcome Back</Text>
-              <Text style={loginScreenStyles.continue}>
-                Sign in to continue
-              </Text>
-            </View>
+            <TriangleSvg />
           </View>
-        </View>
-        <View>
+          <TouchableOpacity
+            style={{
+              padding: scale(10),
+            }}
+            onPress={props.navigation.goBack}>
+            <LeftChevronSVG color={colors.abuttoFairest} size={2} />
+          </TouchableOpacity>
           <View
             style={{
-              padding: scale(20),
+              padding: scale(50),
             }}>
-            <FloatingLabelInput
-              ref={usernameRef}
-              editable
-              maxLength={40}
-              label="Username"
-              autoCapitalize="none"
-              name="usernameInput"
-              focusNextInput="passwordInput"
-              returnKeyType="next"
-              autoCorrect={false}
-              onSubmitEditing={() => {
-                if (passwordRef && passwordRef.current) {
-                  passwordRef.current.focus();
-                }
-              }}
-              value={username}
-              onChangeText={setUsername}
-              blurOnSubmit={false}
-              error={usernameError}
-            />
-            <FloatingLabelInput
-              ref={passwordRef}
-              editable
-              maxLength={40}
-              label="Password"
-              autoCapitalize="none"
-              name="passwordInput"
-              focusNextInput="passwordInput"
-              secureTextEntry={true}
-              returnKeyType="done"
-              autoCorrect={false}
-              value={password}
-              onChangeText={setPassword}
-              blurOnSubmit={false}
-              error={passwordError}
-            />
             <View
               style={{
-                paddingTop: scale(30),
+                paddingTop: scaleVertical(40),
+                alignItems: 'center',
               }}>
-              <Button text="Login" onPress={() => {}} type="submit" />
+              <LogoSvg />
+              <View>
+                <Text style={loginScreenStyles.welcomeBack}>Welcome Back</Text>
+                <Text style={loginScreenStyles.continue}>
+                  Sign in to continue
+                </Text>
+              </View>
             </View>
           </View>
-          <Animated.View
-            style={{
-              left: leftPosition,
-            }}>
-            <OceanSvg />
-          </Animated.View>
+          <View>
+            <View
+              style={{
+                padding: scale(20),
+              }}>
+              <FloatingLabelInput
+                ref={usernameRef}
+                editable
+                maxLength={40}
+                label="Username"
+                autoCapitalize="none"
+                name="usernameInput"
+                focusNextInput="passwordInput"
+                returnKeyType="next"
+                autoCorrect={false}
+                onSubmitEditing={() => {
+                  if (passwordRef && passwordRef.current) {
+                    passwordRef.current.focus();
+                  }
+                }}
+                value={username}
+                onChangeText={(text) => {
+                  setUsername(text);
+                  setUsernameError('');
+                }}
+                blurOnSubmit={false}
+                error={usernameError}
+              />
+              <FloatingLabelInput
+                ref={passwordRef}
+                editable
+                maxLength={40}
+                label="Password"
+                autoCapitalize="none"
+                name="passwordInput"
+                focusNextInput="passwordInput"
+                secureTextEntry={true}
+                returnKeyType="done"
+                autoCorrect={false}
+                value={password}
+                onChangeText={(text) => {
+                  setPassword(text);
+                  setPasswordError('');
+                }}
+                blurOnSubmit={false}
+                error={passwordError}
+              />
+              <View
+                style={{
+                  paddingTop: scale(30),
+                }}>
+                <Button text="Login" onPress={onLogin} type="submit" />
+              </View>
+            </View>
+            <TouchableOpacity
+              onPress={() => props.navigation.navigate('Register')}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                <Text style={loginScreenStyles.bottomText}>
+                  Don't have an account?
+                </Text>
+                <Text
+                  style={[
+                    loginScreenStyles.bottomText,
+                    introScreenStyles.link,
+                  ]}>
+                  {' '}
+                  Register
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <Animated.View
+              style={{
+                left: leftPosition,
+              }}>
+              <OceanSvg />
+            </Animated.View>
+          </View>
         </View>
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </KeyboardAvoidingView>
   );
 }
diff --git a/src/screens/Auth/Register.js b/src/screens/Auth/Register.js
new file mode 100644
index 0000000..7d88389
--- /dev/null
+++ b/src/screens/Auth/Register.js
@@ -0,0 +1,250 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, {createRef, useState, useEffect} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  Animated,
+  KeyboardAvoidingView,
+} from 'react-native';
+import FloatingLabelInput from '../../components/FloatingLabelInput';
+import {
+  loginScreenStyles,
+  scale,
+  scaleVertical,
+  colors,
+  introScreenStyles,
+} from '../../assets/style';
+import LogoSvg from '../../assets/svgs/LogoSvg';
+import Button from '../../components/Button';
+import OceanSvg from '../../assets/svgs/OceanSvg';
+import {LeftChevronSVG} from '../../assets/svgs/AppSvg';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+export default function Register(props) {
+  const usernameRef = createRef();
+  const passwordRef = createRef();
+  const phoneNumberRef = createRef();
+  const [state, setState] = useState({
+    username: '',
+    password: '',
+    phoneNumber: '',
+    confirmPassword: '',
+    phoneNumberError: '',
+    usernameError: '',
+    passwordError: '',
+  });
+
+  const animateOcean = new Animated.Value(0);
+
+  const animateWallBar = () => {
+    Animated.loop(
+      Animated.timing(animateOcean, {
+        toValue: 10,
+        duration: 5000,
+        useNativeDriver: false,
+      }),
+    ).start();
+  };
+
+  let leftPosition = animateOcean.interpolate({
+    inputRange: [0, 5, 10],
+    outputRange: [-10, -4, -8],
+  });
+
+  useEffect(() => {
+    animateWallBar();
+  }, []);
+
+  const onRegister = () => {
+    let error = false;
+    if (!state.username) {
+      setState((prevState) => ({
+        ...prevState,
+        usernameError: 'Enter your username',
+      }));
+      error = true;
+    }
+    if (!state.password) {
+      setState((prevState) => ({
+        ...prevState,
+        passwordError: 'Enter a password',
+      }));
+      error = true;
+    }
+    if (!state.phoneNumber) {
+      setState((prevState) => ({
+        ...prevState,
+        phoneNumberError: 'Enter a valid phone number',
+      }));
+      error = true;
+    }
+    if (!error) {
+      console.log('passed');
+    }
+  };
+
+  const handleInputChange = (text, name) => {
+    setState((prevState) => ({
+      ...prevState,
+      [name]: text,
+      phoneNumberError: '',
+      usernameError: '',
+      passwordError: '',
+    }));
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={loginScreenStyles.container}
+      behavior="padding">
+      <ScrollView
+        style={{
+          flex: 1,
+        }}
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[0]}>
+        <TouchableOpacity
+          style={{
+            padding: scale(10),
+          }}
+          onPress={props.navigation.goBack}>
+          <LeftChevronSVG color={colors.abuttoBlue} size={2} />
+        </TouchableOpacity>
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'space-between',
+          }}>
+          <TouchableOpacity
+            style={{
+              padding: scale(10),
+            }}
+            onPress={props.navigation.goBack}>
+            <LeftChevronSVG color={colors.abuttoFairest} size={2} />
+          </TouchableOpacity>
+          <View
+            style={{
+              padding: scale(20),
+            }}>
+            <View>
+              <View>
+                <Text
+                  style={[loginScreenStyles.welcomeBack, {textAlign: 'left'}]}>
+                  Welcome,
+                </Text>
+                <Text style={[loginScreenStyles.continue, {textAlign: 'left'}]}>
+                  Let's get to know you
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View>
+            <View
+              style={{
+                padding: scale(20),
+              }}>
+              <FloatingLabelInput
+                ref={usernameRef}
+                editable
+                maxLength={40}
+                label="Username"
+                autoCapitalize="none"
+                name="usernameInput"
+                focusNextInput="passwordInput"
+                returnKeyType="next"
+                autoCorrect={false}
+                onSubmitEditing={() => {
+                  if (phoneNumberRef && phoneNumberRef.current) {
+                    phoneNumberRef.current.focus();
+                  }
+                }}
+                value={state.username}
+                onChangeText={(text) => {
+                  handleInputChange(text, 'username');
+                }}
+                blurOnSubmit={false}
+                error={state.usernameError}
+              />
+              <FloatingLabelInput
+                ref={phoneNumberRef}
+                editable
+                maxLength={40}
+                label="Phone Number"
+                autoCapitalize="none"
+                name="phoneNumberInput"
+                keyboardType="phone-pad"
+                focusNextInput="passwordInput"
+                returnKeyType="next"
+                autoCorrect={false}
+                onSubmitEditing={() => {
+                  if (passwordRef && passwordRef.current) {
+                    passwordRef.current.focus();
+                  }
+                }}
+                value={state.phoneNumber}
+                onChangeText={(text) => {
+                  handleInputChange(text, 'phoneNumber');
+                }}
+                blurOnSubmit={false}
+                error={state.phoneNumberError}
+              />
+              <FloatingLabelInput
+                ref={passwordRef}
+                editable
+                maxLength={40}
+                label="Password"
+                autoCapitalize="none"
+                name="passwordInput"
+                focusNextInput="passwordInput"
+                secureTextEntry={true}
+                returnKeyType="done"
+                autoCorrect={false}
+                value={state.password}
+                onChangeText={(text) => {
+                  handleInputChange(text, 'password');
+                }}
+                blurOnSubmit={false}
+                error={state.passwordError}
+              />
+              <View
+                style={{
+                  paddingTop: scale(30),
+                }}>
+                <Button text="Register" onPress={onRegister} type="submit" />
+              </View>
+            </View>
+            <TouchableOpacity
+              onPress={() => props.navigation.navigate('Login')}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                <Text style={loginScreenStyles.bottomText}>
+                  Already have an account?
+                </Text>
+                <Text
+                  style={[
+                    loginScreenStyles.bottomText,
+                    introScreenStyles.link,
+                  ]}>
+                  {' '}
+                  Login
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <Animated.View
+          style={{
+            left: leftPosition,
+          }}>
+          <OceanSvg />
+        </Animated.View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

From 4558eab9793db6a923821183a43bb84aed820ca0 Mon Sep 17 00:00:00 2001
From: Daniel Adepoju <daniel.adepoju@interswitchgroup.com>
Date: Wed, 22 Apr 2020 23:43:05 +0100
Subject: [PATCH 2/4] fixed bottom ocean on scroll

---
 src/screens/Auth/Login.js    | 52 +++++++++++++++++-------------------
 src/screens/Auth/Register.js | 50 ++++++++++++++++------------------
 2 files changed, 47 insertions(+), 55 deletions(-)

diff --git a/src/screens/Auth/Login.js b/src/screens/Auth/Login.js
index 617bbfd..4cf3a42 100644
--- a/src/screens/Auth/Login.js
+++ b/src/screens/Auth/Login.js
@@ -102,7 +102,7 @@ export default function Login(props) {
                 paddingTop: scaleVertical(40),
                 alignItems: 'center',
               }}>
-              <LogoSvg />
+              <LogoSvg size={1.7} />
               <View>
                 <Text style={loginScreenStyles.welcomeBack}>Welcome Back</Text>
                 <Text style={loginScreenStyles.continue}>
@@ -165,36 +165,32 @@ export default function Login(props) {
                 <Button text="Login" onPress={onLogin} type="submit" />
               </View>
             </View>
-            <TouchableOpacity
-              onPress={() => props.navigation.navigate('Register')}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text style={loginScreenStyles.bottomText}>
-                  Don't have an account?
-                </Text>
-                <Text
-                  style={[
-                    loginScreenStyles.bottomText,
-                    introScreenStyles.link,
-                  ]}>
-                  {' '}
-                  Register
-                </Text>
-              </View>
-            </TouchableOpacity>
-            <Animated.View
-              style={{
-                left: leftPosition,
-              }}>
-              <OceanSvg />
-            </Animated.View>
           </View>
         </View>
+        <TouchableOpacity onPress={() => props.navigation.navigate('Register')}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <Text style={loginScreenStyles.bottomText}>
+              Don't have an account?
+            </Text>
+            <Text
+              style={[loginScreenStyles.bottomText, introScreenStyles.link]}>
+              {' '}
+              Register
+            </Text>
+          </View>
+        </TouchableOpacity>
       </ScrollView>
+      <Animated.View
+        style={{
+          left: leftPosition,
+        }}>
+        <OceanSvg />
+      </Animated.View>
     </KeyboardAvoidingView>
   );
 }
diff --git a/src/screens/Auth/Register.js b/src/screens/Auth/Register.js
index 7d88389..bde660a 100644
--- a/src/screens/Auth/Register.js
+++ b/src/screens/Auth/Register.js
@@ -215,36 +215,32 @@ export default function Register(props) {
                 <Button text="Register" onPress={onRegister} type="submit" />
               </View>
             </View>
-            <TouchableOpacity
-              onPress={() => props.navigation.navigate('Login')}>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text style={loginScreenStyles.bottomText}>
-                  Already have an account?
-                </Text>
-                <Text
-                  style={[
-                    loginScreenStyles.bottomText,
-                    introScreenStyles.link,
-                  ]}>
-                  {' '}
-                  Login
-                </Text>
-              </View>
-            </TouchableOpacity>
           </View>
         </View>
-        <Animated.View
-          style={{
-            left: leftPosition,
-          }}>
-          <OceanSvg />
-        </Animated.View>
+        <TouchableOpacity onPress={() => props.navigation.navigate('Login')}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <Text style={loginScreenStyles.bottomText}>
+              Already have an account?
+            </Text>
+            <Text
+              style={[loginScreenStyles.bottomText, introScreenStyles.link]}>
+              {' '}
+              Login
+            </Text>
+          </View>
+        </TouchableOpacity>
       </ScrollView>
+      <Animated.View
+        style={{
+          left: leftPosition,
+        }}>
+        <OceanSvg />
+      </Animated.View>
     </KeyboardAvoidingView>
   );
 }

From 1797e79affc21be07ac31a9a125e4327447c2406 Mon Sep 17 00:00:00 2001
From: Daniel Adepoju <daniel.adepoju@interswitchgroup.com>
Date: Wed, 22 Apr 2020 23:46:22 +0100
Subject: [PATCH 3/4] fixed keyboard visibility on login screen

---
 src/screens/Auth/Login.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/screens/Auth/Login.js b/src/screens/Auth/Login.js
index 4cf3a42..022426f 100644
--- a/src/screens/Auth/Login.js
+++ b/src/screens/Auth/Login.js
@@ -66,13 +66,14 @@ export default function Login(props) {
   };
 
   return (
-    <KeyboardAvoidingView style={{flex: 1}} behavior="padding">
+    <KeyboardAvoidingView
+      style={loginScreenStyles.container}
+      behavior="padding">
       <ScrollView
         bounces={false}
         style={{
           flex: 1,
-        }}
-        contentContainerStyle={loginScreenStyles.container}>
+        }}>
         <View
           style={{
             flex: 1,

From 06e226cf7a55264a41bbafffa26caa431860b234 Mon Sep 17 00:00:00 2001
From: Daniel Adepoju <daniel.adepoju@interswitchgroup.com>
Date: Sun, 3 May 2020 19:18:16 +0100
Subject: [PATCH 4/4] added non-compulsotry email field and validator on
 register page

---
 src/helpers/index.js         |  2 +
 src/screens/Auth/Login.js    | 36 +++++++++++++-----
 src/screens/Auth/Register.js | 71 ++++++++++++++++++++++++++++--------
 3 files changed, 84 insertions(+), 25 deletions(-)
 create mode 100644 src/helpers/index.js

diff --git a/src/helpers/index.js b/src/helpers/index.js
new file mode 100644
index 0000000..ed0db20
--- /dev/null
+++ b/src/helpers/index.js
@@ -0,0 +1,2 @@
+export const validateEmail = (email) =>
+  /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
diff --git a/src/screens/Auth/Login.js b/src/screens/Auth/Login.js
index 022426f..cfcdb78 100644
--- a/src/screens/Auth/Login.js
+++ b/src/screens/Auth/Login.js
@@ -73,12 +73,26 @@ export default function Login(props) {
         bounces={false}
         style={{
           flex: 1,
-        }}>
+        }}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[0]}>
         <View
           style={{
-            flex: 1,
-            justifyContent: 'space-between',
+            position: 'absolute',
           }}>
+          <View
+            style={{
+              zIndex: 4,
+            }}>
+            <TouchableOpacity
+              style={{
+                padding: scale(10),
+                zIndex: 5,
+              }}
+              onPress={props.navigation.goBack}>
+              <LeftChevronSVG color={colors.abuttoFairest} size={2} />
+            </TouchableOpacity>
+          </View>
           <View
             style={{
               position: 'absolute',
@@ -87,13 +101,12 @@ export default function Login(props) {
             }}>
             <TriangleSvg />
           </View>
-          <TouchableOpacity
-            style={{
-              padding: scale(10),
-            }}
-            onPress={props.navigation.goBack}>
-            <LeftChevronSVG color={colors.abuttoFairest} size={2} />
-          </TouchableOpacity>
+        </View>
+        <View
+          style={{
+            justifyContent: 'space-between',
+            backgroundColor: 'transparent',
+          }}>
           <View
             style={{
               padding: scale(50),
@@ -174,6 +187,7 @@ export default function Login(props) {
               flexDirection: 'row',
               alignItems: 'center',
               justifyContent: 'center',
+              paddingBottom: scale(90),
             }}>
             <Text style={loginScreenStyles.bottomText}>
               Don't have an account?
@@ -189,6 +203,8 @@ export default function Login(props) {
       <Animated.View
         style={{
           left: leftPosition,
+          position: 'absolute',
+          bottom: 0,
         }}>
         <OceanSvg />
       </Animated.View>
diff --git a/src/screens/Auth/Register.js b/src/screens/Auth/Register.js
index bde660a..420b042 100644
--- a/src/screens/Auth/Register.js
+++ b/src/screens/Auth/Register.js
@@ -20,19 +20,22 @@ import Button from '../../components/Button';
 import OceanSvg from '../../assets/svgs/OceanSvg';
 import {LeftChevronSVG} from '../../assets/svgs/AppSvg';
 import {TouchableOpacity} from 'react-native-gesture-handler';
+import {validateEmail} from '../../helpers';
 
 export default function Register(props) {
-  const usernameRef = createRef();
+  const fullNameRef = createRef();
   const passwordRef = createRef();
+  const emailRef = createRef();
   const phoneNumberRef = createRef();
   const [state, setState] = useState({
-    username: '',
+    fullName: '',
     password: '',
     phoneNumber: '',
-    confirmPassword: '',
-    phoneNumberError: '',
-    usernameError: '',
+    emailAddress: '',
     passwordError: '',
+    phoneNumberError: '',
+    fullNameError: '',
+    emailAddressError: '',
   });
 
   const animateOcean = new Animated.Value(0);
@@ -58,10 +61,24 @@ export default function Register(props) {
 
   const onRegister = () => {
     let error = false;
-    if (!state.username) {
+    if (!state.fullName) {
+      setState((prevState) => ({
+        ...prevState,
+        fullNameError: 'Enter your full name',
+      }));
+      error = true;
+    }
+    if (state.fullName && state.fullName.split(' ').length < 2) {
       setState((prevState) => ({
         ...prevState,
-        usernameError: 'Enter your username',
+        fullNameError: 'Please enter your first and last name',
+      }));
+      error = true;
+    }
+    if (state.emailAddress && !validateEmail(state.emailAddress)) {
+      setState((prevState) => ({
+        ...prevState,
+        emailAddressError: 'Please enter a valid email address or leave empty',
       }));
       error = true;
     }
@@ -89,7 +106,7 @@ export default function Register(props) {
       ...prevState,
       [name]: text,
       phoneNumberError: '',
-      usernameError: '',
+      fullNameError: '',
       passwordError: '',
     }));
   };
@@ -103,7 +120,7 @@ export default function Register(props) {
           flex: 1,
         }}
         bounces={false}
-        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
         stickyHeaderIndices={[0]}>
         <TouchableOpacity
           style={{
@@ -146,12 +163,34 @@ export default function Register(props) {
                 padding: scale(20),
               }}>
               <FloatingLabelInput
-                ref={usernameRef}
+                ref={fullNameRef}
+                editable
+                maxLength={40}
+                label="Full Name"
+                autoCapitalize="none"
+                name="fullNameInput"
+                focusNextInput="passwordInput"
+                returnKeyType="next"
+                autoCorrect={false}
+                onSubmitEditing={() => {
+                  if (emailRef && emailRef.current) {
+                    emailRef.current.focus();
+                  }
+                }}
+                value={state.fullName}
+                onChangeText={(text) => {
+                  handleInputChange(text, 'fullName');
+                }}
+                blurOnSubmit={false}
+                error={state.fullNameError}
+              />
+              <FloatingLabelInput
+                ref={emailRef}
                 editable
                 maxLength={40}
-                label="Username"
+                label="Email Address"
                 autoCapitalize="none"
-                name="usernameInput"
+                name="fullNameInput"
                 focusNextInput="passwordInput"
                 returnKeyType="next"
                 autoCorrect={false}
@@ -160,12 +199,12 @@ export default function Register(props) {
                     phoneNumberRef.current.focus();
                   }
                 }}
-                value={state.username}
+                value={state.emailAddress}
                 onChangeText={(text) => {
-                  handleInputChange(text, 'username');
+                  handleInputChange(text, 'emailAddress');
                 }}
                 blurOnSubmit={false}
-                error={state.usernameError}
+                error={state.emailAddressError}
               />
               <FloatingLabelInput
                 ref={phoneNumberRef}
@@ -238,6 +277,8 @@ export default function Register(props) {
       <Animated.View
         style={{
           left: leftPosition,
+          position: 'absolute',
+          bottom: 0,
         }}>
         <OceanSvg />
       </Animated.View>