Hackfix

src/components/RichText.tsx

@@ -3,7 +3,7 @@ import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 
-import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf'
+import {atoms as a, TextStyleProp, flatten, useTheme, web} from '#/alf'
 import {InlineLink} from '#/components/Link'
 import {Text, TextProps} from '#/components/Typography'
 import {toShortUrl} from 'lib/strings/url-helpers'
@@ -174,48 +174,57 @@ function RichTextTag({
     control.open()
   }, [control])
 
+  const styles = [
+    style,
+    {
+      pointerEvents: 'auto',
+      color: t.palette.primary_500,
+    },
+    web({
+      cursor: 'pointer',
+    }),
+    (hovered || focused || pressed) && {
+      ...web({outline: 0}),
+      textDecorationLine: 'underline',
+      textDecorationColor: t.palette.primary_500,
+    },
+  ]
+
   /*
    * N.B. On web, this is wrapped in another pressable comopnent with a11y
-   * labels, etc. That's why only some of these props are applied here.
+   * labels, etc. Hence the conditional render.
    */
 
   return (
     <React.Fragment>
       <TagMenu control={control} tag={tag} authorHandle={authorHandle}>
-        <Text
+        {isNative ? (
-          selectable={selectable}
+          <Text
-          {...native({
+            selectable={selectable}
-            accessibilityLabel: _(msg`Hashtag: ${tag}`),
+            accessibilityLabel={_(msg`Hashtag: ${tag}`)}
-            accessibilityHint: _(msg`Click here to open tag menu for ${tag}`),
+            accessibilityHint={_(msg`Click here to open tag menu for ${tag}`)}
-            accessibilityRole: isNative ? 'button' : undefined,
+            accessibilityRole={isNative ? 'button' : undefined}
-            onPress: open,
+            onPress={open}
-            onPressIn: onPressIn,
+            onPressIn={onPressIn}
-            onPressOut: onPressOut,
+            onPressOut={onPressOut}
-          })}
+            style={styles}>
-          {...web({
+            {tag}
-            onMouseEnter: onHoverIn,
+          </Text>
-            onMouseLeave: onHoverOut,
+        ) : (
-          })}
+          <Text
-          // @ts-ignore
+            selectable={selectable}
-          onFocus={onFocus}
+            // @ts-ignore web only
-          onBlur={onBlur}
+            onMouseEnter={onHoverIn}
-          style={[
+            // @ts-ignore web only
-            style,
+            onMouseLeave={onHoverOut}
-            {
+            // @ts-ignore web only
-              pointerEvents: 'auto',
+            onFocus={onFocus}
-              color: t.palette.primary_500,
+            // @ts-ignore web only
-            },
+            onBlur={onBlur}
-            web({
+            style={styles}>
-              cursor: 'pointer',
+            {tag}
-            }),
+          </Text>
-            (hovered || focused || pressed) && {
+        )}
-              ...web({outline: 0}),
-              textDecorationLine: 'underline',
-              textDecorationColor: t.palette.primary_500,
-            },
-          ]}>
-          {tag}
-        </Text>
       </TagMenu>
     </React.Fragment>
   )