fix: ui issue when customizing unread count when there is no count (#2180)

* fix: ui issue when customizing unread count when there is no count

* fix: ui issue when customizing unread count when there is no count

Author: khushal87

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -7,22 +7,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
-const styles = StyleSheet.create({
-  unreadContainer: {
-    alignItems: 'center',
-    borderRadius: 8,
-    flexShrink: 1,
-    justifyContent: 'center',
-  },
-  unreadText: {
-    color: '#FFFFFF',
-    fontSize: 11,
-    fontWeight: '700',
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-  },
-});
-
 export type ChannelPreviewUnreadCountProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
@@ -43,13 +27,29 @@ export const ChannelPreviewUnreadCount = <
     },
   } = useTheme();
 
+  if (!unread) return null;
+
   return (
     <View style={[styles.unreadContainer, { backgroundColor: accent_red }, unreadContainer]}>
-      {!!unread && (
-        <Text numberOfLines={1} style={[styles.unreadText, unreadText]}>
-          {unread > maxUnreadCount ? `${maxUnreadCount}+` : unread}
-        </Text>
-      )}
+      <Text numberOfLines={1} style={[styles.unreadText, unreadText]}>
+        {unread > maxUnreadCount ? `${maxUnreadCount}+` : unread}
+      </Text>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  unreadContainer: {
+    alignItems: 'center',
+    borderRadius: 8,
+    flexShrink: 1,
+    justifyContent: 'center',
+  },
+  unreadText: {
+    color: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+  },
+});