diff --git a/native/components/pill.react.js b/native/components/pill.react.js
index 247e0df02..e9df70f96 100644
--- a/native/components/pill.react.js
+++ b/native/components/pill.react.js
@@ -1,77 +1,79 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import tinycolor from 'tinycolor2';
 
 import { useStyles } from '../themes/colors';
 
 type Props = {
   +label: string,
   +backgroundColor: string,
   +icon?: React.Node,
   +roundCorners?: { +left: boolean, +right: boolean },
+  +fontSize?: number,
 };
 function Pill(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
 
   const roundLeft = props.roundCorners?.left ?? true;
   const roundRight = props.roundCorners?.right ?? true;
 
   const variableContainerStyles = React.useMemo(() => {
     return {
       backgroundColor: props.backgroundColor,
       borderBottomLeftRadius: roundLeft ? 8 : 0,
       borderTopLeftRadius: roundLeft ? 8 : 0,
       borderTopRightRadius: roundRight ? 8 : 0,
       borderBottomRightRadius: roundRight ? 8 : 0,
     };
   }, [props.backgroundColor, roundLeft, roundRight]);
 
   const combinedContainerStyles = React.useMemo(
     () => [styles.container, variableContainerStyles],
     [styles.container, variableContainerStyles],
   );
 
   const textColor = React.useMemo(
     () => (tinycolor(props.backgroundColor).isDark() ? 'white' : 'black'),
     [props.backgroundColor],
   );
 
+  const fontSize = props.fontSize ?? 16;
+
   const combinedTextStyles = React.useMemo(
-    () => [styles.label, { color: textColor }],
-    [styles.label, textColor],
+    () => [styles.label, { color: textColor, fontSize }],
+    [fontSize, styles.label, textColor],
   );
 
   const icon = props.icon ? (
     <View style={styles.icon}>{props.icon}</View>
   ) : undefined;
 
   return (
     <View style={combinedContainerStyles}>
       {icon}
       <Text numberOfLines={1} style={combinedTextStyles}>
         {props.label}
       </Text>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: 8,
     paddingHorizontal: 8,
     paddingVertical: 4,
   },
   label: {
-    fontSize: 16,
     fontWeight: 'bold',
   },
   icon: {
     paddingRight: 6,
   },
 };
 
 export default Pill;
diff --git a/native/components/thread-pill.react.js b/native/components/thread-pill.react.js
index 80c6cf887..653094f61 100644
--- a/native/components/thread-pill.react.js
+++ b/native/components/thread-pill.react.js
@@ -1,24 +1,26 @@
 // @flow
 
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import Pill from './pill.react';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +roundCorners?: { +left: boolean, +right: boolean },
+  +fontSize?: number,
 };
 function ThreadPill(props: Props): React.Node {
-  const { threadInfo, roundCorners } = props;
+  const { threadInfo, roundCorners, fontSize } = props;
   return (
     <Pill
       backgroundColor={`#${threadInfo.color}`}
       label={threadInfo.uiName}
       roundCorners={roundCorners}
+      fontSize={fontSize}
     />
   );
 }
 
 export default ThreadPill;