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>

1 files changed, 69 insertions, 0 deletions

diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
new file mode 100644
index 00000000..9497566b
--- /dev/null
+++ b/src/components/common/NavigationIcon.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  View,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+interface NavigationIconProps extends TouchableOpacityProps {
+  tab: 'Home' | 'Search' | 'Upload' | 'Notifications' | 'Profile';
+  disabled?: boolean;
+}
+
+const NavigationIcon = (props: NavigationIconProps) => {
+  let imgSrc;
+  switch (props.tab) {
+    case 'Home':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/home.png')
+        : require('../../assets/navigationIcons/home-clicked.png');
+      break;
+    case 'Search':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/search.png')
+        : require('../../assets/navigationIcons/search-clicked.png');
+      break;
+    case 'Upload':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/upload.png')
+        : require('../../assets/navigationIcons/upload.png');
+      break;
+    case 'Notifications':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/notifications.png')
+        : require('../../assets/navigationIcons/notifications-clicked.png');
+      break;
+    case 'Profile':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/profile.png')
+        : require('../../assets/navigationIcons/profile-clicked.png');
+      break;
+    default:
+      imgSrc = null;
+  }
+  return (
+    <View style={styles.icon}>
+      <TouchableOpacity {...props}>
+        <Image source={imgSrc} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    flex: 1,
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowRadius: 2,
+    shadowOpacity: 0.4,
+  },
+});
+
+export default NavigationIcon;