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>

7 files changed, 48 insertions, 112 deletions

diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx
index cd2c418a..86f9b2ba 100644
--- a/src/screens/main/Home.tsx
+++ b/src/screens/main/Home.tsx
@@ -1,35 +1,24 @@
 import React from 'react';
-import {RootStackParamList} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
 import {Text} from 'react-native-animatable';
 import {StyleSheet} from 'react-native';
-
-type HomeScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;
-type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
-interface HomeProps {
-  route: HomeScreenRouteProp;
-  navigation: HomeScreenNavigationProp;
-}
+import {GradientBackground} from '../../components';
 
 /**
  * Home Screen for displaying Tagg post suggestions
  * for users to discover and browse
  */
 
-const Home: React.FC<HomeProps> = () => {
+const Home: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Tagg Home Screen 🏠 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Tagg Home Screen 🏠 </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
 export default Home;
diff --git a/src/screens/main/Notifications.tsx b/src/screens/main/Notifications.tsx
index ec881c8e..db89d7f9 100644
--- a/src/screens/main/Notifications.tsx
+++ b/src/screens/main/Notifications.tsx
@@ -1,41 +1,24 @@
 import React from 'react';
-import {RootStackParamList} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
 import {Text} from 'react-native-animatable';
 import {StyleSheet} from 'react-native';
-
-type NotificationsScreenRouteProp = RouteProp<
-  RootStackParamList,
-  'Notifications'
->;
-type NotificationsScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
-  'Notifications'
->;
-interface NotificationsProps {
-  route: NotificationsScreenRouteProp;
-  navigation: NotificationsScreenNavigationProp;
-}
+import {GradientBackground} from '../../components';
 
 /**
  * Navigation Screen for displaying other users'
  * actions on the logged in user's posts
  */
 
-const Notifications: React.FC<NotificationsProps> = () => {
+const Notifications: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Notifications will go here 🔔 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Notifications will go here 🔔 </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
 export default Notifications;
diff --git a/src/screens/main/Profile.tsx b/src/screens/main/Profile.tsx
index a40a9cef..3a6536e4 100644
--- a/src/screens/main/Profile.tsx
+++ b/src/screens/main/Profile.tsx
@@ -1,38 +1,24 @@
 import React from 'react';
-import {RootStackParamList} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
 import {Text} from 'react-native-animatable';
 import {StyleSheet} from 'react-native';
-
-type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;
-type ProfileScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
-  'Profile'
->;
-interface ProfileProps {
-  route: ProfileScreenRouteProp;
-  navigation: ProfileScreenNavigationProp;
-}
+import {GradientBackground} from '../../components';
 
 /**
  * Profile Screen for a user's logged in profile
  * including posts, messaging, and settings
  */
 
-const Profile: React.FC<ProfileProps> = () => {
+const Profile: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Profile Screen 🤩 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Profile Screen 🤩 </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
 export default Profile;
diff --git a/src/screens/main/Search.tsx b/src/screens/main/Search.tsx
index caa5d205..19e35d04 100644
--- a/src/screens/main/Search.tsx
+++ b/src/screens/main/Search.tsx
@@ -1,38 +1,24 @@
 import React from 'react';
-import {RootStackParamList} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
 import {Text} from 'react-native-animatable';
 import {StyleSheet} from 'react-native';
-
-type SearchScreenRouteProp = RouteProp<RootStackParamList, 'Search'>;
-type SearchScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
-  'Search'
->;
-interface SearchProps {
-  route: SearchScreenRouteProp;
-  navigation: SearchScreenNavigationProp;
-}
+import {GradientBackground} from '../../components';
 
 /**
  * Search Screen for user recommendations and a search
  * tool to allow user to find other users
  */
 
-const Search: React.FC<SearchProps> = () => {
+const Search: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Search for people here 👀 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Search for people here 👀 </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
 export default Search;
diff --git a/src/screens/main/Upload.tsx b/src/screens/main/Upload.tsx
index 4bbe2d0a..d91af1f5 100644
--- a/src/screens/main/Upload.tsx
+++ b/src/screens/main/Upload.tsx
@@ -1,37 +1,24 @@
 import React from 'react';
-import {RootStackParamList} from '../../routes';
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Background} from '../../components';
 import {Text} from 'react-native-animatable';
 import {StyleSheet} from 'react-native';
-
-type UploadScreenRouteProp = RouteProp<RootStackParamList, 'Upload'>;
-type UploadScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
-  'Upload'
->;
-interface UploadProps {
-  route: UploadScreenRouteProp;
-  navigation: UploadScreenNavigationProp;
-}
+import {GradientBackground} from '../../components';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
 
-const Upload: React.FC<UploadProps> = () => {
+const Upload: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Upload pics ⬆ </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Upload pics ⬆ </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
+
 export default Upload;
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 {