TMA-167: Create Navigation Bar (#25)

* 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

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

10 files changed, 208 insertions, 11 deletions

diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx
new file mode 100644
index 00000000..cd2c418a
--- /dev/null
+++ b/src/screens/main/Home.tsx
@@ -0,0 +1,35 @@
+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;
+}
+
+/**
+ * Home Screen for displaying Tagg post suggestions
+ * for users to discover and browse
+ */
+
+const Home: React.FC<HomeProps> = () => {
+  return (
+    <Background centered style={styles.container}>
+      <Text> Tagg Home Screen 🏠 </Text>
+    </Background>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default Home;
diff --git a/src/screens/main/Notifications.tsx b/src/screens/main/Notifications.tsx
new file mode 100644
index 00000000..ec881c8e
--- /dev/null
+++ b/src/screens/main/Notifications.tsx
@@ -0,0 +1,41 @@
+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;
+}
+
+/**
+ * Navigation Screen for displaying other users'
+ * actions on the logged in user's posts
+ */
+
+const Notifications: React.FC<NotificationsProps> = () => {
+  return (
+    <Background centered style={styles.container}>
+      <Text> Notifications will go here 🔔 </Text>
+    </Background>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default Notifications;
diff --git a/src/screens/main/Profile.tsx b/src/screens/main/Profile.tsx
new file mode 100644
index 00000000..a40a9cef
--- /dev/null
+++ b/src/screens/main/Profile.tsx
@@ -0,0 +1,38 @@
+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;
+}
+
+/**
+ * Profile Screen for a user's logged in profile
+ * including posts, messaging, and settings
+ */
+
+const Profile: React.FC<ProfileProps> = () => {
+  return (
+    <Background centered style={styles.container}>
+      <Text> Profile Screen 🤩 </Text>
+    </Background>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default Profile;
diff --git a/src/screens/main/Search.tsx b/src/screens/main/Search.tsx
new file mode 100644
index 00000000..caa5d205
--- /dev/null
+++ b/src/screens/main/Search.tsx
@@ -0,0 +1,38 @@
+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;
+}
+
+/**
+ * Search Screen for user recommendations and a search
+ * tool to allow user to find other users
+ */
+
+const Search: React.FC<SearchProps> = () => {
+  return (
+    <Background centered style={styles.container}>
+      <Text> Search for people here 👀 </Text>
+    </Background>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default Search;
diff --git a/src/screens/main/Upload.tsx b/src/screens/main/Upload.tsx
new file mode 100644
index 00000000..4bbe2d0a
--- /dev/null
+++ b/src/screens/main/Upload.tsx
@@ -0,0 +1,37 @@
+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;
+}
+
+/**
+ * Upload Screen to allow users to upload posts to Tagg
+ */
+
+const Upload: React.FC<UploadProps> = () => {
+  return (
+    <Background centered style={styles.container}>
+      <Text> Upload pics ⬆ </Text>
+    </Background>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+export default Upload;
diff --git a/src/screens/main/index.ts b/src/screens/main/index.ts
new file mode 100644
index 00000000..9bd00c57
--- /dev/null
+++ b/src/screens/main/index.ts
@@ -0,0 +1,5 @@
+export {default as Home} from './Home';
+export {default as Notifications} from './Notifications';
+export {default as Profile} from './Profile';
+export {default as Search} from './Search';
+export {default as Upload} from './Upload';
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 971595d3..537ce868 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -118,7 +118,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
 
         let statusCode = response.status;
         if (statusCode === 200) {
-          Alert.alert('Successfully logged in! 🥳', `Welcome ${form.username}`);
+          navigation.navigate('Home');
         } else if (statusCode === 401) {
           Alert.alert(
             'Login failed 😔',
diff --git a/src/screens/onboarding/Profile.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index d42b1185..191d62b2 100644
--- a/src/screens/onboarding/Profile.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -15,14 +15,17 @@ import {Background} from '../../components';
 import ImagePicker from 'react-native-image-crop-picker';
 import {REGISTER_ENDPOINT} from '../../constants';
 
-type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
-type ProfileScreenNavigationProp = StackNavigationProp<
+type ProfileOnboardingScreenRouteProp = RouteProp<
   RootStackParamList,
-  'Profile'
+  'ProfileOnboarding'
 >;
-interface ProfileProps {
-  route: ProfileScreenRouteProp;
-  navigation: ProfileScreenNavigationProp;
+type ProfileOnboardingScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'ProfileOnboarding'
+>;
+interface ProfileOnboardingProps {
+  route: ProfileOnboardingScreenRouteProp;
+  navigation: ProfileOnboardingScreenNavigationProp;
 }
 
 /**
@@ -30,7 +33,7 @@ interface ProfileProps {
  * @param navigation react-navigation navigation object
  */
 
-const Profile: React.FC<ProfileProps> = ({route}) => {
+const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
   const {userId, username} = route.params;
   const [largePic, setLargePic] = React.useState('');
   const [smallPic, setSmallPic] = React.useState('');
@@ -250,4 +253,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Profile;
+export default ProfileOnboarding;
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 905de276..197bc0ca 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -59,7 +59,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
       });
       let statusCode = verifyOtpResponse.status;
       if (statusCode === 200) {
-        navigation.navigate('Profile', {
+        navigation.navigate('ProfileOnboarding', {
           userId: userId,
           username: username,
         });
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index e89e1d5f..9b2f4cb0 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -2,4 +2,4 @@ export {default as Login} from './Login';
 export {default as RegistrationOne} from './RegistrationOne';
 export {default as RegistrationTwo} from './RegistrationTwo';
 export {default as Verification} from './Verification';
-export {default as Profile} from './Profile';
+export {default as ProfileOnboarding} from './ProfileOnboarding';