From 04eae360a71e99e07eac0071e57fb09e56769d95 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 8 Jan 2023 21:22:20 +0900
Subject: [PATCH] Rework Pressable to handle ripple on android

---
 front/packages/primitives/src/icons.tsx           | 5 +++--
 front/packages/ui/src/player/components/hover.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx
index 5ec298bc..07ec5363 100644
--- a/front/packages/primitives/src/icons.tsx
+++ b/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
diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx
index a5138148..e63e173b 100644
--- a/front/packages/ui/src/player/components/hover.tsx
+++ b/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>