handle notification type and navigate using deeplinking

src/screens/home/Home.tsx

@@ -63,6 +63,9 @@ const userActions: ActionItem[] = [
 
 const Home: React.FC = () => {
   const user = useSelector((state: any) => state.user);
+  const notifications = useSelector(
+          (state: any) => state.notifications.notifications
+      );
   const navigation = useNavigation<TabNavigationProp>();
   const dispatch = useDispatch();
 
@@ -98,6 +101,8 @@ const Home: React.FC = () => {
     }
   };
 
+  const unreadCount = notifications.filter((item: any) => !item.read).length;
+
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
     <View style={styles.cardWrapper}>
       <AnimatedCard
@@ -126,6 +131,7 @@ const Home: React.FC = () => {
         </View>
         <TouchableOpacity onPress={() => navigation.navigate("Notification" as never)}>
           {/* <Image source={getProfileImageUri()} style={styles.profileImage} /> */}
+          <Text style={{position: 'absolute', right: -6, top: -4, backgroundColor: colors.danger, color: colors.white, borderRadius: 8, width: 16, height: 16, textAlign: 'center', fontSize: 10, fontWeight: 'bold', lineHeight: 16, zIndex: 1}}>{unreadCount > 0 ? unreadCount : ''}</Text>
           <Ionicons name="notifications-outline" size={30} color={colors.textDark} />
         </TouchableOpacity>
       </View>