From 4c93736c5e4b55fe4ea67ba2dfeb61e35a7e8108 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Wed, 27 Aug 2025 17:22:11 +0800
Subject: [PATCH] feat(ui): replace TouchableOpacity with Pressable for
 improved ripple effect and add color customization, android focus effect

---
 app/index.tsx               |  3 ++-
 components/StyledButton.tsx |  1 +
 components/VideoCard.tv.tsx | 14 ++++++++++----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index aa3489e..ed1fe18 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -15,6 +15,7 @@ import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
 import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
 import { useApiConfig, getApiConfigErrorMessage } from "@/hooks/useApiConfig";
+import { Colors } from "@/constants/Colors";
 
 const LOAD_MORE_THRESHOLD = 200;
 
@@ -166,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={{color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
               <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx
index 7d5a21d..d0d582c 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -108,6 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
+          android_ripple={{ color: Colors.dark.link, borderless: false }}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index 426c779..51c9bd8 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
-import { View, Text, Image, StyleSheet, TouchableOpacity, Alert, Animated } from "react-native";
+import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated } from "react-native";
 import { useRouter } from "expo-router";
 import { Star, Play } from "lucide-react-native";
 import { PlayRecordManager } from "@/services/storage";
@@ -147,13 +147,18 @@ const VideoCard = forwardRef<View, VideoCardProps>(
 
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
-        <TouchableOpacity
+        <Pressable
+          android_ripple={{
+            color: Colors.dark.link,
+            borderless: false,
+            foreground: true,
+          }}
           onPress={handlePress}
           onLongPress={handleLongPress}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={styles.pressable}
-          activeOpacity={1}
+          // activeOpacity={1}
           delayLongPress={1000}
         >
           <View style={styles.card}>
@@ -203,7 +208,8 @@ const VideoCard = forwardRef<View, VideoCardProps>(
               </View>
             )}
           </View>
-        </TouchableOpacity>
+        </Pressable>
+
       </Animated.View>
     );
   }