Adds mention badges to channel list items

app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/channel_list/categories/body/channel/badge should match snapshot 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 10,
+        "height": 20,
+        "justifyContent": "center",
+        "marginTop": 5,
+        "paddingHorizontal": 8,
+        "textAlignVertical": "center",
+      },
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#1e325c",
+          "fontFamily": "OpenSans",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "lineHeight": 16,
+        },
+        false,
+      ]
+    }
+  >
+    10
+  </Text>
+</View>
+`;

app/components/channel_list/categories/body/channel/badge.test.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithIntlAndTheme} from '@test/intl-test-helper';
+
+import Badge from './badge';
+
+describe('components/channel_list/categories/body/channel/badge', () => {
+    it('should match snapshot', () => {
+        const wrapper = renderWithIntlAndTheme(
+            <Badge
+                count={10}
+                muted={false}
+            />,
+        );
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+});

app/components/channel_list/categories/body/channel/badge.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useMemo} from 'react';
+import {Text, View} from 'react-native';
+
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+    badge: {
+        backgroundColor: theme.mentionBg,
+        borderRadius: 10,
+        height: 20,
+        marginTop: 5,
+        paddingHorizontal: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlignVertical: 'center',
+    },
+    text: {
+        color: theme.mentionColor,
+        ...typography('Body', 75),
+    },
+    mutedBadge: {
+        backgroundColor: changeOpacity(theme.mentionBg, 0.4),
+    },
+    mutedText: {
+        color: changeOpacity(theme.mentionColor, 0.4),
+    },
+}));
+
+const Badge = ({count, muted}: {count: number; muted: boolean}) => {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
+
+    const viewStyle = useMemo(() => [
+        styles.badge,
+        muted && styles.mutedBadge,
+    ], [muted]);
+
+    const textStyle = useMemo(() => [
+        styles.text,
+
+        muted && styles.mutedText,
+    ], [muted]);
+
+    if (!count) {
+        return null;
+    }
+
+    return (
+        <View style={viewStyle}>
+            <Text style={textStyle}>
+                {`${count}`}
+            </Text>
+        </View>
+    );
+};
+
+export default Badge;

app/components/channel_list/categories/body/channel/channel_list_item.tsx

@@ -15,6 +15,8 @@ import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
+import Badge from './badge';
+
 import type ChannelModel from '@typings/database/models/servers/channel';
 import type MyChannelModel from '@typings/database/models/servers/my_channel';
 
@@ -65,7 +67,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
     const serverUrl = useServerUrl();
 
     // Make it brighter if it's not muted, and highlighted or has unreads
-    const bright = !isMuted && (myChannel.isUnread || myChannel.mentionsCount > 0);
+    const bright = !isMuted && (isActive || myChannel.isUnread || myChannel.mentionsCount > 0);
 
     const sharedValue = useSharedValue(collapsed && !bright);
 
@@ -117,6 +119,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
                         shared={channel.shared}
                         size={24}
                         type={channel.type}
+                        isMuted={isMuted}
                     />
                     <Text
                         ellipsizeMode='tail'
@@ -125,6 +128,12 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan
                     >
                         {displayName}
                     </Text>
+                    {myChannel.mentionsCount > 0 &&
+                        <Badge
+                            count={myChannel.mentionsCount}
+                            muted={isMuted}
+                        />
+                    }
 
                 </View>
             </TouchableOpacity>