added unread count

1 files changed, 7 insertions, 3 deletions

diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
index a3b31a22..2b20f48c 100644
--- a/src/components/messages/MessagesHeader.tsx
+++ b/src/components/messages/MessagesHeader.tsx
@@ -1,22 +1,26 @@
-import * as React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {normalize} from '../../utils';
 import ComposeIcon from '../../assets/icons/compose.svg';
+import {ChatContext} from '../../App';
 
 type MessagesHeaderProps = {
   createChannel: () => void;
 };
 
 const MessagesHeader: React.FC<MessagesHeaderProps> = ({createChannel}) => {
+  const {chatClient} = useContext(ChatContext);
+  const unread = chatClient.user?.total_unread_count as number;
   return (
     <View style={styles.header}>
       <Text style={styles.headerText}>Messages</Text>
-      <Text style={styles.unreadText}>2 unread</Text>
+      {unread && unread !== 0 && (
+        <Text style={styles.unreadText}>{unread} unread</Text>
+      )}
       <View style={styles.flex} />
       <TouchableOpacity style={styles.compose} onPress={createChannel}>
-        {/* <Text>Compose</Text> */}
         <ComposeIcon width={normalize(20)} height={normalize(20)} />
       </TouchableOpacity>
     </View>