Remove `FixedTouchableHighlight` , fix Android press issues (#3214)

* rm `FixedTouchableHighlight`

* adjust delay for highlight

* remove unnecessary background colors to support background ripple

src/view/com/notifications/FeedItem.tsx

@@ -182,7 +182,6 @@ let FeedItem = ({
       testID={`feedItem-by-${item.notification.author.handle}`}
       style={[
         styles.outer,
-        pal.view,
         pal.border,
         item.notification.isRead
           ? undefined

src/view/com/pager/FixedTouchableHighlight.tsx

@@ -1,42 +0,0 @@
-// FixedTouchableHighlight.tsx
-import React, {ComponentProps, useRef} from 'react'
-import {GestureResponderEvent, TouchableHighlight} from 'react-native'
-
-type Position = {pageX: number; pageY: number}
-
-export default function FixedTouchableHighlight({
-  onPress,
-  onPressIn,
-  ...props
-}: ComponentProps<typeof TouchableHighlight>) {
-  const _touchActivatePositionRef = useRef<Position | null>(null)
-
-  function _onPressIn(e: GestureResponderEvent) {
-    const {pageX, pageY} = e.nativeEvent
-
-    _touchActivatePositionRef.current = {
-      pageX,
-      pageY,
-    }
-
-    onPressIn?.(e)
-  }
-
-  function _onPress(e: GestureResponderEvent) {
-    const {pageX, pageY} = e.nativeEvent
-
-    const absX = Math.abs(_touchActivatePositionRef.current?.pageX! - pageX)
-    const absY = Math.abs(_touchActivatePositionRef.current?.pageY! - pageY)
-
-    const dragged = absX > 2 || absY > 2
-    if (!dragged) {
-      onPress?.(e)
-    }
-  }
-
-  return (
-    <TouchableHighlight onPressIn={_onPressIn} onPress={_onPress} {...props}>
-      {props.children}
-    </TouchableHighlight>
-  )
-}

src/view/com/post-thread/PostThreadItem.tsx

@@ -432,7 +432,6 @@ let PostThreadItemLoaded = ({
           <PostHider
             testID={`postThreadItem-by-${post.author.handle}`}
             href={postHref}
-            style={[pal.view]}
             moderation={moderation.content}
             iconSize={isThreadedChild ? 26 : 38}
             iconStyles={
@@ -622,7 +621,6 @@ function PostOuterWrapper({
     return (
       <View
         style={[
-          pal.view,
           pal.border,
           styles.cursor,
           {
@@ -650,7 +648,6 @@ function PostOuterWrapper({
     <View
       style={[
         styles.outer,
-        pal.view,
         pal.border,
         showParentReplyLine && hasPrecedingItem && styles.noTopBorder,
         styles.cursor,

src/view/com/post/Post.tsx

@@ -133,7 +133,7 @@ function PostInner({
   }, [setLimitLines])
 
   return (
-    <Link href={itemHref} style={[styles.outer, pal.view, pal.border, style]}>
+    <Link href={itemHref} style={[styles.outer, pal.border, style]}>
       {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>

src/view/com/posts/FeedItem.tsx

@@ -144,7 +144,6 @@ let FeedItemInner = ({
 
   const outerStyles = [
     styles.outer,
-    pal.view,
     {
       borderColor: pal.colors.border,
       paddingBottom:

src/view/com/posts/FeedSlice.tsx

@@ -78,11 +78,7 @@ function ViewFullThread({slice}: {slice: FeedPostSlice}) {
   }, [slice.rootUri])
 
   return (
-    <Link
-      style={[pal.view, styles.viewFullThread]}
-      href={itemHref}
-      asAnchor
-      noFeedback>
+    <Link style={[styles.viewFullThread]} href={itemHref} asAnchor noFeedback>
       <View style={styles.viewFullThreadDots}>
         <Svg width="4" height="40">
           <Line

src/view/com/util/Link.tsx

@@ -8,7 +8,6 @@ import {
   View,
   ViewStyle,
   Pressable,
-  TouchableWithoutFeedback,
   TouchableOpacity,
 } from 'react-native'
 import {useLinkProps, StackActions} from '@react-navigation/native'
@@ -23,7 +22,6 @@ import {
 import {isAndroid, isWeb} from 'platform/detection'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {PressableWithHover} from './PressableWithHover'
-import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
@@ -31,6 +29,7 @@ import {
   DebouncedNavigationProp,
   useNavigationDeduped,
 } from 'lib/hooks/useNavigationDeduped'
+import {useTheme} from '#/alf'
 
 type Event =
   | React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -63,6 +62,7 @@ export const Link = memo(function Link({
   navigationAction,
   ...props
 }: Props) {
+  const t = useTheme()
   const {closeModal} = useModalControls()
   const navigation = useNavigationDeduped()
   const anchorHref = asAnchor ? sanitizeUrl(href) : undefined
@@ -85,37 +85,23 @@ export const Link = memo(function Link({
   )
 
   if (noFeedback) {
-    if (isAndroid) {
-      // workaround for Android not working well with left/right swipe gestures and TouchableWithoutFeedback
-      // https://github.com/callstack/react-native-pager-view/issues/424
-      return (
-        <FixedTouchableHighlight
-          testID={testID}
-          onPress={onPress}
-          // @ts-ignore web only -prf
-          href={asAnchor ? sanitizeUrl(href) : undefined}
-          accessible={accessible}
-          accessibilityRole="link"
-          {...props}>
-          <View style={style}>
-            {children ? children : <Text>{title || 'link'}</Text>}
-          </View>
-        </FixedTouchableHighlight>
-      )
-    }
     return (
       <WebAuxClickWrapper>
-        <TouchableWithoutFeedback
+        <Pressable
           testID={testID}
           onPress={onPress}
           accessible={accessible}
           accessibilityRole="link"
-          {...props}>
+          {...props}
+          android_ripple={{
+            color: t.atoms.bg_contrast_25.backgroundColor,
+          }}
+          unstable_pressDelay={isAndroid ? 90 : undefined}>
           {/* @ts-ignore web only -prf */}
           <View style={style} href={anchorHref}>
             {children ? children : <Text>{title || 'link'}</Text>}
           </View>
-        </TouchableWithoutFeedback>
+        </Pressable>
       </WebAuxClickWrapper>
     )
   }