add android ripple effect to images in feed (#9273)

src/view/com/util/images/AutoSizedImage.tsx

@@ -6,6 +6,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {type AppBskyEmbedImages} from '@atproto/api'
+import {utils} from '@bsky.app/alf'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -205,6 +206,10 @@ export function AutoSizedImage({
         accessibilityLabel={image.alt}
         accessibilityHint={_(msg`Views full image`)}
         accessibilityRole="button"
+        android_ripple={{
+          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+          foreground: true,
+        }}
         style={[
           a.w_full,
           a.rounded_md,
@@ -228,6 +233,10 @@ export function AutoSizedImage({
           accessibilityLabel={image.alt}
           accessibilityHint={_(msg`Views full image`)}
           accessibilityRole="button"
+          android_ripple={{
+            color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+            foreground: true,
+          }}
           style={[a.h_full]}>
           {contents}
         </Pressable>

src/view/com/util/images/Gallery.tsx

@@ -2,6 +2,7 @@ import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
 import {type AnimatedRef} from 'react-native-reanimated'
 import {Image, type ImageStyle} from 'expo-image'
 import {type AppBskyEmbedImages} from '@atproto/api'
+import {utils} from '@bsky.app/alf'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -60,6 +61,10 @@ export function GalleryItem({
         }
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
+        android_ripple={{
+          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+          foreground: true,
+        }}
         style={[
           a.flex_1,
           a.overflow_hidden,