8 files changed, 103 insertions, 13 deletions

diff --git a/src/assets/images/no_chats.png b/src/assets/images/no_chats.png
new file mode 100644
index 00000000..4e321f17
--- /dev/null
+++ b/src/assets/images/no_chats.png
diff --git a/src/assets/images/no_chats@2x.png b/src/assets/images/no_chats@2x.png
new file mode 100644
index 00000000..d906df09
--- /dev/null
+++ b/src/assets/images/no_chats@2x.png
diff --git a/src/assets/images/no_chats@3x.png b/src/assets/images/no_chats@3x.png
new file mode 100644
index 00000000..f0f05c7b
--- /dev/null
+++ b/src/assets/images/no_chats@3x.png
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 50e4518b..e8f2725d 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -56,6 +56,8 @@ export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry';
 export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture";
 export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!';
 export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
+export const FIRST_MESSAGE = 'How about sending your first message to your friend';
+export const START_CHATTING = 'Let’s Start Chatting!';
 export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
 export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
 export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index d2cfcb5d..810ebdb2 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -9,6 +9,7 @@ import {TabsGradient} from '../../components';
 import {ChannelPreview, MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
+import EmptyNotificationView from '../../screens/main/notification/EmptyNotificationView';
 import {
   LocalAttachmentType,
   LocalChannelType,
@@ -99,6 +100,9 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
               sort={{last_message_at: -1}}
               maxUnreadCount={99}
               Preview={ChannelPreview}
+              EmptyStateIndicator={() => {
+                return <EmptyNotificationView viewType={'ChatList'} />;
+              }}
             />
           </View>
         </Chat>
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 3efd9af8..06a61f04 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -304,7 +304,7 @@ const NotificationsScreen: React.FC = () => {
           extraData={requestLimit}
           ListEmptyComponent={
             <View style={styles.emptyViewContainer}>
-              <EmptyNotificationView />
+              <EmptyNotificationView viewType={'Notification'} />
             </View>
           }
         />
diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx
index f43cfb2a..b80bb203 100644
--- a/src/screens/main/notification/EmptyNotificationView.tsx
+++ b/src/screens/main/notification/EmptyNotificationView.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 import {Image, Text, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings';
+import {
+  UP_TO_DATE,
+  NO_NEW_NOTIFICATIONS,
+  FIRST_MESSAGE,
+  START_CHATTING,
+} from '../../../constants/strings';
 import {NOTIFICATION_GRADIENT} from '../../../constants/constants';
-import {SCREEN_HEIGHT, normalize} from '../../../utils';
-const EmptyNotificationView: React.FC = () => {
-  return (
-    <View style={styles.container}>
+import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../../utils';
+import {EmptyViewProps} from '../../../types/index';
+
+const EmptyNotificationView: React.FC<EmptyViewProps> = ({viewType}) => {
+  const _getNotificationImage = () => {
+    return (
       <LinearGradient
         style={styles.backgroundLinearView}
         useAngle={true}
@@ -16,32 +23,106 @@ const EmptyNotificationView: React.FC = () => {
           source={require('../../../assets/images/empty_notifications.png')}
         />
       </LinearGradient>
-      <View style={styles.topMargin}>
-        <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
-      </View>
-      <View>
-        <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+    );
+  };
+
+  const _getChatImage = () => {
+    return (
+      <LinearGradient
+        style={styles.backgroundLinearView}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          style={styles.imageStyles}
+          source={require('../../../assets/images/no_chats.png')}
+        />
+      </LinearGradient>
+    );
+  };
+
+  const _getImageForType = () => {
+    switch (viewType) {
+      case 'Notification':
+        return _getNotificationImage();
+      case 'ChatList':
+        return _getChatImage();
+    }
+  };
+
+  const _getTextForNotification = () => {
+    return (
+      <>
+        <View style={styles.topMargin}>
+          <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+        </View>
+        <View>
+          <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+        </View>
+      </>
+    );
+  };
+
+  const _getTextForChat = () => {
+    return (
+      <View style={styles.chatTextStyles}>
+        <View style={styles.topMargin}>
+          <Text style={styles.upperTextStyle}>{START_CHATTING}</Text>
+        </View>
+        <View>
+          <Text style={styles.bottomTextStyle}>{FIRST_MESSAGE}</Text>
+        </View>
       </View>
+    );
+  };
+
+  const _getTextForType = () => {
+    switch (viewType) {
+      case 'Notification':
+        return _getTextForNotification();
+      case 'ChatList':
+        return _getTextForChat();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {_getImageForType()}
+      {_getTextForType()}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {alignItems: 'center'},
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
   upperTextStyle: {
+    textAlign: 'center',
     fontWeight: '700',
     fontSize: normalize(23),
     lineHeight: normalize(40),
   },
+  chatTextStyles: {
+    width: '85%',
+  },
   bottomTextStyle: {
+    textAlign: 'center',
     color: '#2D3B45',
     fontWeight: '600',
     fontSize: normalize(20),
     lineHeight: normalize(40),
   },
+  imageStyles: {
+    width: SCREEN_WIDTH * 0.72,
+    height: SCREEN_WIDTH * 0.72,
+  },
   backgroundLinearView: {
-    borderRadius: 135.5,
+    borderRadius: (SCREEN_WIDTH * 0.72) / 2,
   },
 });
 
diff --git a/src/types/types.ts b/src/types/types.ts
index e7f651dc..ce39947c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -23,6 +23,9 @@ export interface CategoryPreviewType {
 }
 
 export type FriendshipStatusType = 'friends' | 'requested' | 'no_record';
+export interface EmptyViewProps {
+  viewType: 'Notification' | 'ChatList';
+}
 
 export enum UniversityType {
   Brown = 'Brown University',