diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json
index 39082e60..c93edd14 100644
--- a/front/apps/mobile/package.json
+++ b/front/apps/mobile/package.json
@@ -33,6 +33,7 @@
"expo-dev-client": "~5.0.0-preview.4",
"expo-file-system": "~18.0.0",
"expo-font": "~13.0.0",
+ "expo-image": "^1.13.0",
"expo-image-picker": "~16.0.0",
"expo-linear-gradient": "~14.0.1",
"expo-linking": "~7.0.2",
@@ -49,8 +50,6 @@
"react": "18.3.1",
"react-i18next": "^15.1.0",
"react-native": "0.76.1",
- "react-native-blurhash": "^2.0.3",
- "react-native-fast-image": "^8.6.3",
"react-native-mmkv": "^3.1.0",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
diff --git a/front/bun.lockb b/front/bun.lockb
index 63da1771..8bbdaaae 100755
Binary files a/front/bun.lockb and b/front/bun.lockb differ
diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json
index 045ffd98..ec8bf0ba 100644
--- a/front/packages/primitives/package.json
+++ b/front/packages/primitives/package.json
@@ -17,8 +17,6 @@
"moti": "*",
"react": "*",
"react-native": "*",
- "react-native-blurhash": "*",
- "react-native-fast-image": "*",
"react-native-reanimated": "*",
"react-native-safe-area-context": "*",
"react-native-svg": "*",
diff --git a/front/packages/primitives/src/image/base-image.tsx b/front/packages/primitives/src/image/base-image.tsx
index 33f4b251..430979df 100644
--- a/front/packages/primitives/src/image/base-image.tsx
+++ b/front/packages/primitives/src/image/base-image.tsx
@@ -19,7 +19,6 @@
*/
import type { KyooImage } from "@kyoo/models";
-import type { ReactElement } from "react";
import type { ImageStyle } from "react-native";
import type { YoshikiStyle } from "yoshiki/src/type";
@@ -33,7 +32,6 @@ export type Props = {
src?: KyooImage | null;
quality: "low" | "medium" | "high";
alt?: string;
- Err?: ReactElement | null;
forcedLoading?: boolean;
};
diff --git a/front/packages/primitives/src/image/image.tsx b/front/packages/primitives/src/image/image.tsx
index cfa14c69..a2bdcf8f 100644
--- a/front/packages/primitives/src/image/image.tsx
+++ b/front/packages/primitives/src/image/image.tsx
@@ -18,12 +18,10 @@
* along with Kyoo. If not, see .
*/
-import { getCurrentToken } from "@kyoo/models";
-import { type ReactElement, useState } from "react";
-import { type FlexStyle, type ImageStyle, View, type ViewStyle } from "react-native";
-import { Blurhash } from "react-native-blurhash";
-import FastImage from "react-native-fast-image";
-import { percent, useYoshiki } from "yoshiki/native";
+import { type ReactElement } from "react";
+import { type ImageStyle, View, type ViewStyle } from "react-native";
+import { Image as ExpoImage } from "expo-image";
+import { useYoshiki } from "yoshiki/native";
import { Skeleton } from "../skeleton";
import type { ImageLayout, Props } from "./base-image";
@@ -33,64 +31,24 @@ export const Image = ({
alt,
forcedLoading = false,
layout,
- Err,
...props
}: Props & { style?: ImageStyle } & { layout: ImageLayout }) => {
const { css } = useYoshiki();
- const [state, setState] = useState<"loading" | "errored" | "finished">(
- src ? "loading" : "errored",
- );
-
- // This could be done with a key but this makes the API easier to use.
- // This unsures that the state is resetted when the source change (useful for recycler lists.)
- const [oldSource, setOldSource] = useState(src);
- if (oldSource !== src) {
- setState("loading");
- setOldSource(src);
- }
const border = { borderRadius: 6, overflow: "hidden" } satisfies ViewStyle;
if (forcedLoading) return ;
- if (!src || state === "errored") {
- return Err !== undefined ? (
- Err
- ) : (
- theme.overlay0 }, layout, border], props)} />
- );
- }
-
- quality ??= "high";
- const token = getCurrentToken();
+ if (!src) return theme.overlay0 }, layout, border], props)} />;
return (
-
- {state !== "finished" && (
-
- )}
- setState("finished")}
- onError={() => setState("errored")}
- resizeMode={FastImage.resizeMode.cover}
- {...(css({
- width: percent(100),
- height: percent(100),
- }) as { style: FlexStyle })}
- />
-
+
);
};
diff --git a/front/packages/primitives/src/image/image.web.tsx b/front/packages/primitives/src/image/image.web.tsx
index 9f26e178..ef85ffea 100644
--- a/front/packages/primitives/src/image/image.web.tsx
+++ b/front/packages/primitives/src/image/image.web.tsx
@@ -18,14 +18,13 @@
* along with Kyoo. If not, see .
*/
-import NextImage from "next/image";
import { type ReactElement, useState } from "react";
import { type ImageStyle, View, type ViewStyle } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { imageBorderRadius } from "../constants";
import { Skeleton } from "../skeleton";
import type { ImageLayout, Props } from "./base-image";
-import { BlurhashContainer, useRenderType } from "./blurhash.web";
+import { BlurhashContainer } from "./blurhash.web";
export const Image = ({
src,
@@ -33,7 +32,6 @@ export const Image = ({
alt,
forcedLoading = false,
layout,
- Err,
...props
}: Props & { style?: ImageStyle } & { layout: ImageLayout }) => {
const { css } = useYoshiki();
@@ -45,11 +43,7 @@ export const Image = ({
if (forcedLoading) return ;
if (!src || state === "errored") {
- return Err !== undefined ? (
- Err
- ) : (
- theme.overlay0 }, layout, border], props)} />
- );
+ return theme.overlay0 }, layout, border], props)} />;
}
return (
diff --git a/front/packages/primitives/src/image/sprite.tsx b/front/packages/primitives/src/image/sprite.tsx
index 047cd06e..45235387 100644
--- a/front/packages/primitives/src/image/sprite.tsx
+++ b/front/packages/primitives/src/image/sprite.tsx
@@ -18,18 +18,14 @@
* along with Kyoo. If not, see .
*/
-import { Image, View } from "react-native";
+import { Image as ExpoImage } from "expo-image";
export const Sprite = ({
src,
alt,
- width,
- height,
+ style,
x,
y,
- rows,
- columns,
- style,
...props
}: {
src: string;
@@ -43,15 +39,17 @@ export const Sprite = ({
style?: object;
}) => {
return (
-
-
-
+
);
};