Emoji handling nested (#5609)

src/components/Typography.tsx

@@ -53,11 +53,14 @@ export function childIsString(
   )
 }
 
-export function renderChildrenWithEmoji(children: StringChild) {
+export function renderChildrenWithEmoji(
+  children: StringChild,
+  props: Omit<TextProps, 'children'> = {},
+) {
   const normalized = Array.isArray(children) ? children : [children]
 
   return (
-    <UITextView>
+    <UITextView {...props}>
       {normalized.map(child => {
         if (typeof child !== 'string') return child
 
@@ -68,10 +71,12 @@ export function renderChildrenWithEmoji(children: StringChild) {
         }
 
         return child.split(EMOJI).map((stringPart, index) => (
-          <UITextView key={index}>
+          <UITextView key={index} {...props}>
             {stringPart}
             {emojis[index] ? (
-              <UITextView style={{color: 'black', fontFamily: 'System'}}>
+              <UITextView
+                {...props}
+                style={[props?.style, {color: 'black', fontFamily: 'System'}]}>
                 {emojis[index]}
               </UITextView>
             ) : null}
@@ -163,15 +168,17 @@ export function Text({
     }
   }
 
+  const shared = {
+    uiTextView: true,
+    selectable,
+    style: s,
+    dataSet: Object.assign({tooltip: title}, dataSet || {}),
+    ...rest,
+  }
+
   return (
-    <UITextView
+    <UITextView {...shared}>
-      selectable={selectable}
+      {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
-      uiTextView
-      style={s}
-      {...rest}
-      // @ts-ignore
-      dataSet={Object.assign({tooltip: title}, dataSet || {})}>
-      {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
     </UITextView>
   )
 }

src/view/com/util/ViewHeader.tsx

@@ -100,7 +100,7 @@ export function ViewHeader({
               </TouchableOpacity>
             ) : null}
             <View style={styles.titleContainer} pointerEvents="none">
-              <Text type="title" style={[pal.text, styles.title]}>
+              <Text emoji type="title" style={[pal.text, styles.title]}>
                 {title}
               </Text>
             </View>

src/view/com/util/text/Text.tsx

@@ -77,13 +77,16 @@ export function Text({
       flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
     }
 
+    const shared = {
+      uiTextView: true,
+      selectable,
+      style: flattened,
+      ...props,
+    }
+
     return (
-      <UITextView
+      <UITextView {...shared}>
-        style={flattened}
+        {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
-        selectable={selectable}
-        uiTextView
-        {...props}>
-        {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
       </UITextView>
     )
   }
@@ -104,14 +107,16 @@ export function Text({
     flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
   }
 
+  const shared = {
+    selectable,
+    style: flattened,
+    dataSet: Object.assign({tooltip: title}, dataSet || {}),
+    ...props,
+  }
+
   return (
-    <RNText
+    <RNText {...shared}>
-      style={flattened}
+      {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
-      // @ts-ignore web only -esb
-      dataSet={Object.assign({tooltip: title}, dataSet || {})}
-      selectable={selectable}
-      {...props}>
-      {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
     </RNText>
   )
 }