From 462022741d52c92ffe9d32e449bc7dbec3bd78a6 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 24 Aug 2023 18:28:26 -0500
Subject: Use `Pressable` for most links/embeds (#1181)

* delay press on all links

* use Pressable for all accessible links
---
 src/view/com/feeds/CustomFeed.tsx              | 13 +++----------
 src/view/com/util/Link.tsx                     |  7 ++++---
 src/view/com/util/images/AutoSizedImage.tsx    | 14 +++-----------
 src/view/com/util/images/Gallery.tsx           |  9 +++------
 src/view/com/util/post-embeds/YoutubeEmbed.tsx |  4 ++--
 src/view/com/util/post-embeds/index.tsx        |  1 -
 6 files changed, 15 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx
index 264c2d982..1635d17fc 100644
--- a/src/view/com/feeds/CustomFeed.tsx
+++ b/src/view/com/feeds/CustomFeed.tsx
@@ -1,12 +1,5 @@
 import React from 'react'
-import {
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-  TouchableOpacity,
-} from 'react-native'
+import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -68,7 +61,7 @@ export const CustomFeed = observer(
     }, [store, item])
 
     return (
-      <TouchableOpacity
+      <Pressable
         testID={`feed-${item.displayName}`}
         accessibilityRole="button"
         style={[styles.container, pal.border, style]}
@@ -132,7 +125,7 @@ export const CustomFeed = observer(
             {pluralize(item.data.likeCount || 0, 'user')}
           </Text>
         ) : null}
-      </TouchableOpacity>
+      </Pressable>
     )
   },
 )
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index fd886fda4..ead85d0b5 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -9,8 +9,9 @@ import {
   TextProps,
   View,
   ViewStyle,
-  TouchableOpacity,
+  Pressable,
   TouchableWithoutFeedback,
+  TouchableOpacity,
 } from 'react-native'
 import {
   useLinkProps,
@@ -112,7 +113,7 @@ export const Link = observer(function Link({
   }
 
   return (
-    <TouchableOpacity
+    <Pressable
       testID={testID}
       style={style}
       onPress={onPress}
@@ -122,7 +123,7 @@ export const Link = observer(function Link({
       href={asAnchor ? sanitizeUrl(href) : undefined}
       {...props}>
       {children ? children : <Text>{title || 'link'}</Text>}
-    </TouchableOpacity>
+    </Pressable>
   )
 })
 
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 9c6f25cae..da2f7ab45 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -1,17 +1,10 @@
 import React from 'react'
-import {
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native'
+import {StyleProp, StyleSheet, Pressable, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
 import {clamp} from 'lib/numbers'
 import {useStores} from 'state/index'
 import {Dimensions} from 'lib/media/types'
 
-export const DELAY_PRESS_IN = 500
 const MIN_ASPECT_RATIO = 0.33 // 1/3
 const MAX_ASPECT_RATIO = 5 // 5/1
 
@@ -57,11 +50,10 @@ export function AutoSizedImage({
 
   if (onPress || onLongPress || onPressIn) {
     return (
-      <TouchableOpacity
+      <Pressable
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={onPressIn}
-        delayPressIn={DELAY_PRESS_IN}
         style={[styles.container, style]}
         accessible={true}
         accessibilityRole="button"
@@ -74,7 +66,7 @@ export function AutoSizedImage({
           accessibilityIgnoresInvertColors
         />
         {children}
-      </TouchableOpacity>
+      </Pressable>
     )
   }
 
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 01a7d574a..679f71c99 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -1,6 +1,6 @@
 import {AppBskyEmbedImages} from '@atproto/api'
 import React, {ComponentProps, FC} from 'react'
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 
 type EventFunction = (index: number) => void
@@ -14,8 +14,6 @@ interface GalleryItemProps {
   imageStyle: ComponentProps<typeof Image>['style']
 }
 
-const DELAY_PRESS_IN = 500
-
 export const GalleryItem: FC<GalleryItemProps> = ({
   images,
   index,
@@ -28,8 +26,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
 
   return (
     <View>
-      <TouchableOpacity
-        delayPressIn={DELAY_PRESS_IN}
+      <Pressable
         onPress={onPress ? () => onPress(index) : undefined}
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
@@ -44,7 +41,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
           accessibilityHint=""
           accessibilityIgnoresInvertColors
         />
-      </TouchableOpacity>
+      </Pressable>
       {image.alt === '' ? null : (
         <View style={styles.altContainer}>
           <Text style={styles.alt} accessible={false}>
diff --git a/src/view/com/util/post-embeds/YoutubeEmbed.tsx b/src/view/com/util/post-embeds/YoutubeEmbed.tsx
index 2ca0750a3..2f2da5662 100644
--- a/src/view/com/util/post-embeds/YoutubeEmbed.tsx
+++ b/src/view/com/util/post-embeds/YoutubeEmbed.tsx
@@ -23,9 +23,9 @@ export const YoutubeEmbed = ({
 
   return (
     <Link
+      asAnchor
       style={[styles.extOuter, pal.view, pal.border, style]}
-      href={link.uri}
-      noFeedback>
+      href={link.uri}>
       <ExternalLinkEmbed link={link} imageChild={imageChild} />
     </Link>
   )
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 5d0090434..bf2365f18 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -150,7 +150,6 @@ export function PostEmbeds({
     return (
       <Link
         asAnchor
-        noFeedback
         style={[styles.extOuter, pal.view, pal.border, style]}
         href={link.uri}>
         <ExternalLinkEmbed link={link} />
-- 
cgit 1.4.1