Rework Pressable to handle ripple on android

front/packages/primitives/src/icons.tsx

@@ -19,10 +19,11 @@
  */
 
 import React, { ComponentProps, ComponentType, ForwardedRef, forwardRef } from "react";
-import { Pressable, Platform, PressableProps, ViewStyle } from "react-native";
+import { Platform, PressableProps, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { YoshikiStyle } from "yoshiki/dist/type";
 import { px, useYoshiki } from "yoshiki/native";
+import { PressableFeedback } from "./links";
 import { ts } from "./utils";
 
 declare module "react" {
@@ -71,7 +72,7 @@ export const IconButton = forwardRef(function _IconButton<AsProps = PressablePro
 ) {
 	const { css } = useYoshiki();
 
-	const Container = as ?? Pressable;
+	const Container = as ?? PressableFeedback;
 
 	return (
 		<Container

front/packages/primitives/src/links.tsx

@@ -18,20 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ComponentProps, ComponentType, forwardRef, Fragment, ReactNode } from "react";
-import {
-	Platform,
-	Pressable,
-	TextProps,
-	TouchableOpacity,
-	TouchableNativeFeedback,
-	View,
-	ViewProps,
-	StyleSheet,
-	PressableProps,
-} from "react-native";
+import { forwardRef, ReactNode } from "react";
+import { Pressable, TextProps, View, PressableProps } from "react-native";
 import { LinkCore, TextLink } from "solito/link";
-import { useYoshiki } from "yoshiki/native";
+import { useTheme, useYoshiki } from "yoshiki/native";
+import { alpha } from "./themes";
 
 export const A = ({
 	href,
@@ -59,54 +50,20 @@ export const A = ({
 	);
 };
 
-export const PressableFeedback = forwardRef<
-	unknown,
-	ViewProps & {
-		onFocus?: PressableProps["onFocus"];
-		onBlur?: PressableProps["onBlur"];
-		onPressIn?: PressableProps["onPressIn"];
-		onPressOut?: PressableProps["onPressOut"];
-		onPress?: PressableProps["onPress"];
-		WebComponent?: ComponentType;
-	}
->(function _Feedback({ children, WebComponent, ...props }, ref) {
-	const { onBlur, onFocus, onPressIn, onPressOut, onPress, ...noPressProps } = props;
-	const pressProps = { onBlur, onFocus, onPressIn, onPressOut, onPress };
-	const wrapperProps = Platform.select<ViewProps & { ref?: any }>({
-		android: {
-			style: {
-				borderRadius: StyleSheet.flatten(props?.style)?.borderRadius,
-				alignContent: "center",
-				justifyContent: "center",
-				overflow: "hidden",
-			},
-			ref,
-		},
-		default: {},
-	});
-	const Wrapper = wrapperProps.style ? View : Fragment;
-	const InnerPressable = Platform.select<ComponentType<{ children?: any }>>({
-		web: WebComponent ?? Pressable,
-		android: TouchableNativeFeedback,
-		ios: TouchableOpacity,
-		default: Pressable,
-	});
+export const PressableFeedback = forwardRef<View, PressableProps>(function _Feedback(
+	{ children, ...props },
+	ref,
+) {
+	const theme = useTheme();
 
 	return (
-		<Wrapper {...wrapperProps}>
-			<InnerPressable
-				{...Platform.select<object>({
-					android: { useForeground: true, ...pressProps },
-					default: { ref, ...props },
-				})}
-			>
-				{Platform.select<ReactNode>({
-					android: <View {...noPressProps}>{children}</View>,
-					ios: <View {...noPressProps}>{children}</View>,
-					default: children,
-				})}
-			</InnerPressable>
-		</Wrapper>
+		<Pressable
+			ref={ref}
+			android_ripple={{ foreground: true, color: alpha(theme.contrast, 0.5) as any }}
+			{...props}
+		>
+			{children}
+		</Pressable>
 	);
 });
 
@@ -114,7 +71,7 @@ export const Link = ({
 	href,
 	children,
 	...props
-}: { href: string } & Omit<ComponentProps<typeof PressableFeedback>, "WebComponent">) => {
+}: { href: string; children?: ReactNode } & PressableProps) => {
 	return (
 		<LinkCore
 			href={href}

front/packages/ui/src/player/components/hover.tsx

@@ -27,6 +27,7 @@ import {
 	IconButton,
 	Link,
 	Poster,
+	PressableFeedback,
 	Skeleton,
 	Slider,
 	tooltip,
@@ -34,7 +35,7 @@ import {
 } from "@kyoo/primitives";
 import { Chapter, Font, Track } from "@kyoo/models";
 import { useAtomValue, useSetAtom, useAtom } from "jotai";
-import { Pressable, View, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import { useTranslation } from "react-i18next";
 import { percent, rem, useYoshiki } from "yoshiki/native";
 import { useRouter } from "solito/router";
@@ -177,7 +178,7 @@ export const Back = ({
 		>
 			<IconButton
 				icon={ArrowBack}
-				{...(href ? { as: Link as any, href: href } : { as: Pressable, onPress: router.back })}
+				{...(href ? { as: Link as any, href: href } : { as: PressableFeedback, onPress: router.back })}
 				{...tooltip(t("player.back"))}
 			/>
 			<Skeleton>