From 9bcdeaa44d3b1ea28f31f41d0ff54c9307733013 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Wed, 27 Aug 2025 18:07:22 +0800
Subject: [PATCH] feat(platform): customize android ripple effect for Pressable
 based on platform type

---
 app/index.tsx               |  4 ++--
 components/StyledButton.tsx |  4 ++--
 components/VideoCard.tv.tsx | 28 +++++++++++++++-------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index ed1fe18..8e38248 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar } from "react-native";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar, Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
@@ -167,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable android_ripple={{color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : {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 d0d582c..e87d6d7 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View } from "react-native";
+import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View, Platform } from "react-native";
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
 import { useButtonAnimation } from "@/hooks/useAnimation";
@@ -108,7 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
-          android_ripple={{ color: Colors.dark.link, borderless: false }}
+          android_ripple={Platform.isTV ? {color:'transparent'} : { 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 51c9bd8..42bd878 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, Pressable, TouchableOpacity, Alert, Animated } from "react-native";
+import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated, Platform } from "react-native";
 import { useRouter } from "expo-router";
 import { Star, Play } from "lucide-react-native";
 import { PlayRecordManager } from "@/services/storage";
@@ -148,7 +148,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
         <Pressable
-          android_ripple={{
+          android_ripple={Platform.isTV ? {color:'transparent'} : {
             color: Colors.dark.link,
             borderless: false,
             foreground: true,
@@ -162,17 +162,18 @@ const VideoCard = forwardRef<View, VideoCardProps>(
           delayLongPress={1000}
         >
           <View style={styles.card}>
-            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
-            {isFocused && (
-              <View style={styles.overlay}>
-                {isContinueWatching && (
-                  <View style={styles.continueWatchingBadge}>
-                    <Play size={16} color="#ffffff" fill="#ffffff" />
-                    <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
-                  </View>
-                )}
-              </View>
-            )}
+
+              <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+              {isFocused && (
+                <View style={styles.overlay}>
+                  {isContinueWatching && (
+                    <View style={styles.continueWatchingBadge}>
+                      <Play size={16} color="#ffffff" fill="#ffffff" />
+                      <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                    </View>
+                  )}
+                </View>
+              )}
 
             {/* 进度条 */}
             {isContinueWatching && (
@@ -197,6 +198,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
                 <Text style={styles.badgeText}>{sourceName}</Text>
               </View>
             )}
+
           </View>
           <View style={styles.infoContainer}>
             <ThemedText numberOfLines={1}>{title}</ThemedText>