[🐴] add emoji multiplier prop to RichText and bump it up for DMs

src/components/RichText.tsx

@@ -28,6 +28,7 @@ export function RichText({
   authorHandle,
   onLinkPress,
   interactiveStyle,
+  emojiMultiplier = 1.85,
 }: TextStyleProp &
   Pick<TextProps, 'selectable'> & {
     value: RichTextAPI | string
@@ -38,6 +39,7 @@ export function RichText({
     authorHandle?: string
     onLinkPress?: LinkProps['onPress']
     interactiveStyle?: TextStyle
+    emojiMultiplier?: number
   }) {
   const richText = React.useMemo(
     () =>
@@ -57,17 +59,14 @@ export function RichText({
   const {text, facets} = richText
 
   if (!facets?.length) {
-    if (text.length <= 5 && /^\p{Extended_Pictographic}+$/u.test(text)) {
+    if (isOnlyEmoji(text)) {
+      const fontSize =
+        (flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
       return (
         <Text
           selectable={selectable}
           testID={testID}
-          style={[
-            {
-              fontSize: 26,
-              lineHeight: 30,
-            },
-          ]}
+          style={[plainStyles, {fontSize}]}
           // @ts-ignore web only -prf
           dataSet={WORD_WRAP}>
           {text}
@@ -247,3 +246,7 @@ function RichTextTag({
     </React.Fragment>
   )
 }
+
+export function isOnlyEmoji(text: string) {
+  return text.length <= 5 && /^\p{Extended_Pictographic}+$/u.test(text)
+}

src/components/dms/MessageItem.tsx

@@ -17,7 +17,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {RichText} from '../RichText'
+import {isOnlyEmoji, RichText} from '../RichText'
 
 let MessageItem = ({
   item,
@@ -78,34 +78,37 @@ let MessageItem = ({
     <View style={[isFromSelf ? a.mr_md : a.ml_md]}>
       <ActionsWrapper isFromSelf={isFromSelf} message={message}>
         <View
-          style={[
-            a.py_sm,
-            a.my_2xs,
-            a.rounded_md,
-            {
-              paddingLeft: 14,
-              paddingRight: 14,
-              backgroundColor: isFromSelf
-                ? isPending
-                  ? pendingColor
-                  : t.palette.primary_500
-                : t.palette.contrast_50,
-              borderRadius: 17,
-            },
-            isFromSelf
-              ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
-              : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
-          ]}>
+          style={
+            !message.facets &&
+            !isOnlyEmoji(message.text) && [
+              a.py_sm,
+              a.my_2xs,
+              a.rounded_md,
+              {
+                paddingLeft: 14,
+                paddingRight: 14,
+                backgroundColor: isFromSelf
+                  ? isPending
+                    ? pendingColor
+                    : t.palette.primary_500
+                  : t.palette.contrast_50,
+                borderRadius: 17,
+              },
+              isFromSelf
+                ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+                : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+            ]
+          }>
           <RichText
             value={rt}
             style={[
               a.text_md,
-              a.leading_snug,
               isFromSelf && {color: t.palette.white},
               isPending && t.name !== 'light' && {color: t.palette.primary_300},
             ]}
             interactiveStyle={a.underline}
             enableTags
+            emojiMultiplier={3}
           />
         </View>
       </ActionsWrapper>