TMA-168: Add Gradient to Navigation Bar (#26)

* Renamed Profile in Onboarding and added dummy main screens

* Comments for new screens created

* change navigation in verification to profileonboarding

* added icons and tab navigation

* added icons to navigation bar

* add clicked icons

* added 2x and 3x icon sizes

* rename for resizing to work

* remove upload clicked as informed by design

* changed initialRouteName back to Login

* created NavigationIcon component to hold all the nav icons

* added default case

* changed intialRouteName back to Login

* fixed icon names

* fixed icon names

* add navigation to home page after login

* added gradient and changed screens to transparent

* renamed Routes to OnboardingStack

* rerouting navigation

* pulling from master

* merge conflicts

* added entryway to home on profileonboarding

* changed gradient into custom component

* removed a method that i had commented out

Co-authored-by: Megan Hong <meganhong31@g.ucla.edu>

2 files changed, 12 insertions, 7 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 537ce868..7b76e97c 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -13,7 +13,7 @@ import {
   Platform,
 } from 'react-native';
 
-import {RootStackParamList} from '../../routes';
+import {RootStackParamList, AuthContext} from '../../routes';
 import {Background, TaggInput, SubmitButton} from '../../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
 
@@ -41,6 +41,8 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     isValidPassword: false,
     attemptedSubmit: false,
   });
+  // determines if user is logged in
+  const {login} = React.useContext(AuthContext);
 
   /**
    * Updates the state of username. Also verifies the input of the username field by ensuring proper length and appropriate characters.
@@ -118,7 +120,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
 
         let statusCode = response.status;
         if (statusCode === 200) {
-          navigation.navigate('Home');
+          login();
         } else if (statusCode === 401) {
           Alert.alert(
             'Login failed 😔',
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 191d62b2..6ce1ff80 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -10,7 +10,7 @@ import {
   Alert,
   View,
 } from 'react-native';
-import {RootStackParamList} from '../../routes';
+import {RootStackParamList, AuthContext} from '../../routes';
 import {Background} from '../../components';
 import ImagePicker from 'react-native-image-crop-picker';
 import {REGISTER_ENDPOINT} from '../../constants';
@@ -39,6 +39,12 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
   const [smallPic, setSmallPic] = React.useState('');
 
   /**
+   * login: determines if user successully created an account to
+   * navigate to home and display main tab navigation bar
+   */
+  const {login} = React.useContext(AuthContext);
+
+  /**
    * Profile screen "Add Large Profile Pic Here" button
    */
   const LargeProfilePic = () => (
@@ -147,10 +153,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
       let data = await response.json();
       let statusCode = response.status;
       if (statusCode === 200) {
-        Alert.alert(
-          'Profile successfully created! 🥳',
-          `Welcome to Tagg, ${username}!`,
-        );
+        login();
       } else if (statusCode === 400) {
         Alert.alert('Profile update failed. 😔', `${data}`);
       } else {