fix: 🐛 Corrige le problème de lag sur android (scroll articles) (#730)

✅

 Closes: #612
Co-authored-by: Benjamin Guedj <benjaminguedj@hotmail.fr>

front/components/article/articleCard.component.tsx

+import ExpoFastImage from "expo-fast-image";
 import type { FC } from "react";
 import * as React from "react";
 import { StyleSheet } from "react-native";
-import { Image, ListItem } from "react-native-elements";
+import { ListItem } from "react-native-elements";
 
-import DefaultImage from "../../assets/images/default.png";
 import { Colors, FontWeight, Margins, Paddings, Sizes } from "../../constants";
 import type { Article, Step } from "../../types";
 import * as RootNavigation from "../../utils/rootNavigation.util";
@@ -29,12 +29,10 @@ const ArticleCard: FC<Props> = ({ article, step }) => {
       containerStyle={[styles.listItemContainer, styles.borderLeftRadius]}
       style={[styles.listItem, styles.borderLeftRadius]}
     >
-      <Image
-        defaultSource={DefaultImage}
-        source={{
-          uri: getVisuelFormat(article.visuel, VisuelFormat.thumbnail),
-        }}
-        containerStyle={[styles.articleImage, styles.borderLeftRadius]}
+      <ExpoFastImage
+        uri={getVisuelFormat(article.visuel, VisuelFormat.thumbnail)}
+        cacheKey={article.visuel?.hash}
+        style={[styles.articleImage, styles.borderLeftRadius]}
       />
       <ListItem.Content style={styles.articleContent}>
         <ListItem.Title style={styles.articleTitleContainer}>
@@ -70,7 +68,7 @@ const styles = StyleSheet.create({
   },
   articleImage: {
     height: "100%",
-    resizeMode: "contain",
+    resizeMode: "cover",
     width: Sizes.thumbnail,
   },
   articleTitle: {

front/package.json

@@ -45,6 +45,7 @@
     "expo-cli": "^4.11.0",
     "expo-constants": "~10.1.3",
     "expo-device": "~3.2.0",
+    "expo-fast-image": "^1.1.3",
     "expo-file-system": "~11.0.2",
     "expo-font": "~9.1.0",
     "expo-linking": "~2.2.3",
@@ -94,4 +95,4 @@
     "typescript": "~4.4.3"
   },
   "private": true
-}
\ No newline at end of file
+}

front/screens/listArticles.component.tsx

@@ -75,6 +75,8 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
         titre
         resume
         visuel {
+          id
+          hash
           url
           height
           width

front/types.tsx

@@ -99,6 +99,8 @@ export type Thematique = {
   nom: string;
 };
 export type Visuel = {
+  id: string;
+  hash: string;
   url: string;
   height: number;
   width: number;

front/yarn.lock

@@ -6998,6 +6998,11 @@ expo-error-recovery@~2.1.0:
   resolved "https://registry.yarnpkg.com/expo-error-recovery/-/expo-error-recovery-2.1.0.tgz#7baf6cabc53162cdd2b36edb20b8aa6d1cdc1107"
   integrity sha512-N5g2QKtdNntUNGQVnB/tG1jHdtJP1+kLMWDS+7ZKRcKfulm3JX/M3l460fsEtqg84n/latxPkBT0yfKw2DSq+Q==
 
+expo-fast-image@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/expo-fast-image/-/expo-fast-image-1.1.3.tgz#c00a83f365c9c03b585d8198e2da0b6ecb22fc17"
+  integrity sha512-dpHvUFJxImD+yDVJk3ubCMGSYgbewPfbsPMOpD/EP7PKDA4RurtkJZcUDF8T/0gxuxZMCldPgHup6np/hrK/MQ==
+
 expo-file-system@~11.0.2:
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-11.0.2.tgz#c3f9b9c6ba25456a0d32c7a9bb38e55310d471bd"