diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js
--- a/native/chat/message-list-container.react.js
+++ b/native/chat/message-list-container.react.js
@@ -1,9 +1,10 @@
// @flow
+import Icon from '@expo/vector-icons/FontAwesome5.js';
import { useNavigationState } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
import genesis from 'lib/facts/genesis.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
@@ -209,6 +210,18 @@
}
const unboundStyles = {
+ pinnedCountBanner: {
+ backgroundColor: 'panelForeground',
+ height: 30,
+ flexDirection: 'row',
+ textAlign: 'center',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ pinnedCountText: {
+ color: 'panelBackgroundLabel',
+ marginRight: 5,
+ },
container: {
backgroundColor: 'listBackground',
flex: 1,
@@ -349,8 +362,40 @@
state => threadInfoSelector(state)[genesis.id],
);
+ const bannerText = React.useMemo(() => {
+ if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
+ return '';
+ }
+
+ const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
+ return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
+ }, [threadInfo.pinnedCount]);
+
+ const pinnedCountBanner = React.useMemo(() => {
+ if (!bannerText) {
+ return null;
+ }
+
+ return (
+
+ {bannerText}
+
+
+ );
+ }, [
+ bannerText,
+ styles.pinnedCountBanner,
+ styles.pinnedCountText,
+ colors.panelBackgroundLabel,
+ ]);
+
return (
+ {pinnedCountBanner}