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>

6 files changed, 194 insertions, 0 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';