Merge pull request #348 from leonyjiang/tma750-chat-bottom-tab

[TMA-750] Add Chat to Navigation

18 files changed, 118 insertions, 1 deletions

diff --git a/src/assets/navigationIcons/chat-clicked.png b/src/assets/navigationIcons/chat-clicked.png
new file mode 100644
index 00000000..f62b4cf5
--- /dev/null
+++ b/src/assets/navigationIcons/chat-clicked.png
diff --git a/src/assets/navigationIcons/chat-clicked@2x.png b/src/assets/navigationIcons/chat-clicked@2x.png
new file mode 100644
index 00000000..4ce0f46a
--- /dev/null
+++ b/src/assets/navigationIcons/chat-clicked@2x.png
diff --git a/src/assets/navigationIcons/chat-clicked@3x.png b/src/assets/navigationIcons/chat-clicked@3x.png
new file mode 100644
index 00000000..bd3a1352
--- /dev/null
+++ b/src/assets/navigationIcons/chat-clicked@3x.png
diff --git a/src/assets/navigationIcons/chat-notifications.png b/src/assets/navigationIcons/chat-notifications.png
new file mode 100644
index 00000000..cffb5751
--- /dev/null
+++ b/src/assets/navigationIcons/chat-notifications.png
diff --git a/src/assets/navigationIcons/chat-notifications@2x.png b/src/assets/navigationIcons/chat-notifications@2x.png
new file mode 100644
index 00000000..22ae62db
--- /dev/null
+++ b/src/assets/navigationIcons/chat-notifications@2x.png
diff --git a/src/assets/navigationIcons/chat-notifications@3x.png b/src/assets/navigationIcons/chat-notifications@3x.png
new file mode 100644
index 00000000..98b1073d
--- /dev/null
+++ b/src/assets/navigationIcons/chat-notifications@3x.png
diff --git a/src/assets/navigationIcons/chat.png b/src/assets/navigationIcons/chat.png
new file mode 100644
index 00000000..cffb5751
--- /dev/null
+++ b/src/assets/navigationIcons/chat.png
diff --git a/src/assets/navigationIcons/chat@2x.png b/src/assets/navigationIcons/chat@2x.png
new file mode 100644
index 00000000..22ae62db
--- /dev/null
+++ b/src/assets/navigationIcons/chat@2x.png
diff --git a/src/assets/navigationIcons/chat@3x.png b/src/assets/navigationIcons/chat@3x.png
new file mode 100644
index 00000000..98b1073d
--- /dev/null
+++ b/src/assets/navigationIcons/chat@3x.png
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 1a9934f2..5128f3da 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -14,7 +14,8 @@ interface NavigationIconProps extends TouchableOpacityProps {
     | 'Upload'
     | 'Notifications'
     | 'Profile'
-    | 'SuggestedPeople';
+    | 'SuggestedPeople'
+    | 'Chat';
   disabled?: boolean;
   newIcon?: boolean;
 }
@@ -44,6 +45,13 @@ const NavigationIcon = (props: NavigationIconProps) => {
           : require('../../assets/navigationIcons/notifications.png')
         : require('../../assets/navigationIcons/notifications-clicked.png');
       break;
+    case 'Chat':
+      imgSrc = props.disabled
+        ? props.newIcon
+          ? require('../../assets/navigationIcons/chat-notifications.png')
+          : require('../../assets/navigationIcons/chat.png')
+        : require('../../assets/navigationIcons/chat-clicked.png');
+      break;
     case 'Profile':
       imgSrc = props.disabled
         ? require('../../assets/navigationIcons/profile.png')
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 9b089634..021c0688 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -92,6 +92,8 @@ export type MainStackParams = {
     screenType: ScreenType;
   };
   SPWelcomeScreen: {};
+  ChatList: undefined;
+  Chat: undefined;
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index d855f0df..8068b893 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -29,6 +29,8 @@ import {
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
   SettingsScreen,
+  ChatListScreen,
+  ChatScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -85,6 +87,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         return 'Notifications';
       case ScreenType.SuggestedPeople:
         return 'SuggestedPeople';
+      case ScreenType.Chat:
+        return 'ChatList';
     }
   })();
 
@@ -294,6 +298,16 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           ...headerBarOptions('white', ''),
         }}
       />
+      <MainStack.Screen
+        name="ChatList"
+        component={ChatListScreen}
+        options={{headerTitle: 'Chats'}}
+      />
+      <MainStack.Screen
+        name="Chat"
+        component={ChatScreen}
+        options={{headerShown: true}}
+      />
     </MainStack.Navigator>
   );
 };
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e9208525..9b8427e7 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -54,6 +54,8 @@ const NavigationBar: React.FC = () => {
                   disabled={!focused}
                 />
               );
+            case 'Chat':
+              return <NavigationIcon tab="Chat" disabled={!focused} />;
             case 'Profile':
               return <NavigationIcon tab="Profile" disabled={!focused} />;
             case 'SuggestedPeople':
@@ -93,6 +95,11 @@ const NavigationBar: React.FC = () => {
         initialParams={{screenType: ScreenType.Notifications}}
       />
       <Tabs.Screen
+        name="Chat"
+        component={MainStackScreen}
+        initialParams={{screenType: ScreenType.Chat}}
+      />
+      <Tabs.Screen
         name="Profile"
         component={MainStackScreen}
         initialParams={{screenType: ScreenType.Profile}}
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
new file mode 100644
index 00000000..c49c790d
--- /dev/null
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {StackNavigationProp} from '@react-navigation/stack';
+
+import {MainStackParams} from '../../routes';
+
+type ChatListScreenNavigationProp = StackNavigationProp<
+  MainStackParams,
+  'ChatList'
+>;
+interface ChatListScreenProps {
+  navigation: ChatListScreenNavigationProp;
+}
+/*
+ * Screen that displays all of the user's active conversations.
+ */
+const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.placeholder}>I am the chat list.</Text>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate('Chat')}>
+        <Text>Let's go to a conversation!</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholder: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  button: {
+    backgroundColor: '#CCE4FC',
+    padding: 15,
+    borderRadius: 5,
+  },
+});
+
+export default ChatListScreen;
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
new file mode 100644
index 00000000..af83f504
--- /dev/null
+++ b/src/screens/chat/ChatScreen.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {StackNavigationProp} from '@react-navigation/stack';
+
+import {MainStackParams} from '../../routes';
+
+type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
+interface ChatScreenProps {
+  navigation: ChatScreenNavigationProp;
+}
+/*
+ * Screen that displays all of the user's active conversations.
+ */
+const ChatScreen: React.FC<ChatScreenProps> = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.placeholder}>I am a chat!</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholder: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
+export default ChatScreen;
diff --git a/src/screens/chat/index.ts b/src/screens/chat/index.ts
new file mode 100644
index 00000000..d2ccb02b
--- /dev/null
+++ b/src/screens/chat/index.ts
@@ -0,0 +1,2 @@
+export {default as ChatListScreen} from './ChatListScreen';
+export {default as ChatScreen} from './ChatScreen';
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 50ada3d1..44ae4b52 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -5,3 +5,4 @@ export * from './search';
 export * from './suggestedPeople';
 export * from './suggestedPeopleOnboarding';
 export * from './badge';
+export * from './chat';
diff --git a/src/types/types.ts b/src/types/types.ts
index 766bf798..e7acd6e0 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -142,6 +142,7 @@ export enum ScreenType {
   Search,
   Notifications,
   SuggestedPeople,
+  Chat,
 }
 
 /**