feat(ui): update Pressable ripple effect for device type in HomeScreen, StyledButton, and VideoCard components

This commit is contained in:
James Chen
2025-08-27 22:46:20 +08:00
parent f124f7e1e2
commit f7ae93bd3d
3 changed files with 13 additions and 7 deletions

View File

@@ -3,6 +3,7 @@ import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps,
import { ThemedText } from "./ThemedText";
import { Colors } from "@/constants/Colors";
import { useButtonAnimation } from "@/hooks/useAnimation";
import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
interface StyledButtonProps extends PressableProps {
children?: React.ReactNode;
@@ -19,6 +20,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
const colors = Colors[colorScheme];
const [isFocused, setIsFocused] = React.useState(false);
const animationStyle = useButtonAnimation(isFocused);
const deviceType = useResponsiveLayout().deviceType;
const variantStyles = {
default: StyleSheet.create({
@@ -108,7 +110,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
return (
<Animated.View style={[animationStyle, style]}>
<Pressable
android_ripple={Platform.isTV ? {color:'transparent'} : { color: Colors.dark.link, borderless: false }}
android_ripple={Platform.isTV ? { color: 'transparent' } : (deviceType === 'tv' ? { color: Colors.dark.link } : { color: 'transparent' })}
ref={ref}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}