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>

4 files changed, 14 insertions, 11 deletions

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';