Added ability to dismiss keyboard on outside tap

1 files changed, 61 insertions, 57 deletions

diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index 77bc1b61..fe5748fc 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -9,6 +9,8 @@ import {
   Image,
   TouchableOpacity,
   StyleSheet,
+  Keyboard,
+  TouchableWithoutFeedback
 } from 'react-native';
 
 import {RootStackParams} from '../routes';
@@ -101,66 +103,68 @@ const Login = ({navigation}: LoginProps) => {
   return (
     <>
       <StatusBar barStyle="light-content" />
-      <View style={styles.container}>
-        <LinearGradient
-          colors={['#8F00FF', '#6EE7E7']}
-          style={styles.linearGradient}
-          useAngle={true}
-          angle={154.72}
-          angleCenter={{x: 0.5, y: 0.5}}>
-          <Image
-            source={require('../assets/images/logo.png')}
-            style={styles.logo}
-          />
-          <LoginInput
-            type={data.username}
-            isUsername={true}
-            onChangeText={(user) => handleUsernameUpdate(user)}
-            onSubmitEditing={() => handleUsernameSubmit()}
-            isValid={data.isValidUser}
-            validationWarning={'Username must be at least 6 characters long.'}
-          />
-          <LoginInput
-            type={data.password}
-            isPassword={true}
-            onChangeText={(user) => handlePasswordUpdate(user)}
-            focusPasswordInput={data.focusPasswordInput}
-            onSubmitEditing={() => handleLogin()}
-            isValid={data.isValidPassword}
-            validationWarning={'Password must be at least 8 characters long.'}
-          />
-          <TouchableOpacity
-            accessibilityLabel="Forgot password button"
-            accessibilityHint="Select this if you forgot your tagg password"
-            style={styles.forgotPassword}
-            onPress={() => Alert.alert("tagg! You're it!")}>
-            <Text style={styles.forgotPasswordText}>Forgot password</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            accessibilityLabel="Let's start button"
-            accessibilityHint="Select this after entering your tagg username and password"
-            style={styles.start}
-            onPress={() => handleLogin()}>
-            <Text style={styles.startText}>Let's Start!</Text>
-          </TouchableOpacity>
-          <Text
-            accessible={true}
-            accessibilityLabel="New to tagg?"
-            style={styles.newUser}>
-            New to tagg?{' '}
+      <TouchableWithoutFeedback onPress={() => {Keyboard.dismiss()}}>
+        <View style={styles.container}>
+          <LinearGradient
+            colors={['#8F00FF', '#6EE7E7']}
+            style={styles.linearGradient}
+            useAngle={true}
+            angle={154.72}
+            angleCenter={{x: 0.5, y: 0.5}}>
+            <Image
+              source={require('../assets/images/logo.png')}
+              style={styles.logo}
+            />
+            <LoginInput
+              type={data.username}
+              isUsername={true}
+              onChangeText={(user) => handleUsernameUpdate(user)}
+              onSubmitEditing={() => handleUsernameSubmit()}
+              isValid={data.isValidUser}
+              validationWarning={'Username must be at least 6 characters long.'}
+            />
+            <LoginInput
+              type={data.password}
+              isPassword={true}
+              onChangeText={(user) => handlePasswordUpdate(user)}
+              focusPasswordInput={data.focusPasswordInput}
+              onSubmitEditing={() => handleLogin()}
+              isValid={data.isValidPassword}
+              validationWarning={'Password must be at least 8 characters long.'}
+            />
+            <TouchableOpacity
+              accessibilityLabel="Forgot password button"
+              accessibilityHint="Select this if you forgot your tagg password"
+              style={styles.forgotPassword}
+              onPress={() => Alert.alert("tagg! You're it!")}>
+              <Text style={styles.forgotPasswordText}>Forgot password</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              accessibilityLabel="Let's start button"
+              accessibilityHint="Select this after entering your tagg username and password"
+              style={styles.start}
+              onPress={() => handleLogin()}>
+              <Text style={styles.startText}>Let's Start!</Text>
+            </TouchableOpacity>
             <Text
               accessible={true}
-              accessibilityLabel="Get started"
-              accessibilityHint="Select this if you do not have a tagg account"
-              style={styles.getStarted}
-              onPress={() =>
-                Alert.alert('I get the tagg flip it and tumble it.')
-              }>
-              Get started!
+              accessibilityLabel="New to tagg?"
+              style={styles.newUser}>
+              New to tagg?{' '}
+              <Text
+                accessible={true}
+                accessibilityLabel="Get started"
+                accessibilityHint="Select this if you do not have a tagg account"
+                style={styles.getStarted}
+                onPress={() =>
+                  Alert.alert('I get the tagg flip it and tumble it.')
+                }>
+                Get started!
+              </Text>
             </Text>
-          </Text>
-        </LinearGradient>
-      </View>
+          </LinearGradient>
+        </View>
+      </TouchableWithoutFeedback>
     </>
   );
 };