fix: replace react-native-snap-carousel by react-native-reanimated-ca…

…rousel
SocialGouv · Aug 12, 2024 · 0bd9463 · 0bd9463
1 parent 453618c
commit 0bd9463
Show file tree

Hide file tree

Showing 4 changed files with 488 additions and 588 deletions.
diff --git a/front/package.json b/front/package.json
@@ -58,7 +58,7 @@
     "@socialgouv/nos1000jours-lib": "1.2.1",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "date-fns": "^2.25.0",
-    "expo": "51.0.22",
+    "expo": "latest",
     "expo-application": "~5.9.1",
     "expo-asset": "~10.0.10",
     "expo-asset-utils": "^2.0.0",
@@ -68,6 +68,7 @@
     "expo-device": "~6.0.2",
     "expo-file-system": "~17.0.1",
     "expo-font": "~12.0.9",
+    "expo-image": "~1.12.13",
     "expo-linking": "~6.3.1",
     "expo-localization": "~15.0.3",
     "expo-location": "~17.0.1",
@@ -87,7 +88,7 @@
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.3",
+    "react-native": "0.74.5",
     "react-native-animatable": "^1.3.3",
     "react-native-calendars": "^1.1268.0",
     "react-native-confetti": "^0.1.0",
@@ -103,7 +104,6 @@
     "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-snap-carousel": "^3.9.1",
     "react-native-svg": "15.2.0",
     "react-native-swiper-flatlist": "^3.0.16",
     "react-native-tab-view": "^3.1.1",
@@ -127,7 +127,6 @@
     "@types/react-native-calendars": "^1.1264.3",
     "@types/react-native-confetti": "^0.1.0",
     "@types/react-native-indicators": "^0.16.1",
-    "@types/react-native-snap-carousel": "^3.8.5",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",

diff --git a/front/patches/react-native-snap-carousel+3.9.1.patch b/front/patches/react-native-snap-carousel+3.9.1.patch
diff --git a/front/src/components/moodboard/moodItemsInCarousel.component.tsx b/front/src/components/moodboard/moodItemsInCarousel.component.tsx
@@ -2,13 +2,13 @@ import type { Dispatch, SetStateAction } from "react";
 import * as React from "react";
 import { useCallback, useRef } from "react";
 import { Image, StyleSheet, View } from "react-native";
-import Carousel from "react-native-snap-carousel";
 
 import { SCREEN_WIDTH } from "../../constants/platform.constants";
 import { Margins, Sizes } from "../../styles";
 import type { MoodboardItem } from "../../type";
 import { MoodboardUtils } from "../../utils";
 import { SecondaryText } from "../baseComponents";
+import Carousel from "react-native-reanimated-carousel";
 
 interface Props {
   setActiveIndex: Dispatch<SetStateAction<number>>;
@@ -20,11 +20,10 @@ interface RenderItemProps {
   index: number;
 }
 
-const ITEM_WIDTH = Math.round(SCREEN_WIDTH * 0.7);
-const ITEM_HEIGHT = Math.round(
-  (ITEM_WIDTH * 3) / MoodboardUtils.MOODBOARD_ITEMS.length
-);
-const ICON_SIZE = Math.round(ITEM_WIDTH * 0.5);
+const CAROUSEL_HEIGHT = Math.round(250);
+const CAROUSEL_MAX_ITEM_TO_RENDER = 3;
+const ITEM_WIDTH = Math.round(SCREEN_WIDTH);
+const ICON_SIZE = Math.round(ITEM_WIDTH * 0.4);
 
 const MoodItemsInCarousel: React.FC<Props> = ({
   setActiveIndex,
@@ -53,6 +52,7 @@ const MoodItemsInCarousel: React.FC<Props> = ({
             <Image
               style={{ height: ICON_SIZE, width: ICON_SIZE }}
               source={item.icon}
+
             />
           </View>
           <View
@@ -75,14 +75,37 @@ const MoodItemsInCarousel: React.FC<Props> = ({
       ref={ref}
       data={MoodboardUtils.MOODBOARD_ITEMS}
       renderItem={renderItem}
-      sliderWidth={SCREEN_WIDTH}
-      itemWidth={ITEM_WIDTH}
-      containerCustomStyle={styles.carouselContainer}
-      inactiveSlideShift={0}
+      width={SCREEN_WIDTH}
+      height={CAROUSEL_HEIGHT}
+      windowSize={CAROUSEL_MAX_ITEM_TO_RENDER}
+      defaultIndex={firstItemIndexToShow}
       onSnapToItem={snapToItem}
-      useScrollView={true}
-      firstItem={firstItemIndexToShow}
+      loop={false}
+      snapEnabled={true}
+      pagingEnabled={true}
+      style={styles.carouselContainer}
+      mode="parallax"
     />
+  //   <Carousel
+  //   ref={ref}
+  //   data={articles}
+  //   defaultIndex={firstItemIndexToShow}
+  //   renderItem={renderItem}
+  //   onSnapToItem={snapToItem}
+  //   windowSize={CAROUSEL_MAX_ITEM_TO_RENDER}
+  //   width={SCREEN_WIDTH}
+  //   mode="parallax"
+  //   modeConfig={{
+  //     parallaxScrollingOffset: CAROUSEL_PARALLAX_OFFSET,
+  //     parallaxScrollingScale: CAROUSEL_PARALLAX_SCALE,
+  //   }}
+  //   pagingEnabled={true}
+  //   snapEnabled={true}
+  //   loop={false}
+  //   panGestureHandlerProps={{
+  //     activeOffsetX: [-Paddings.light, Paddings.light],
+  //   }}
+  // />
   );
 };
 
@@ -91,7 +114,7 @@ const styles = StyleSheet.create({
     borderRadius: Sizes.xxxs,
   },
   carouselContainer: {
-    marginTop: Margins.largest,
+    marginTop: Margins.light,
   },
   iconContainer: {
     flex: 5,
@@ -100,8 +123,8 @@ const styles = StyleSheet.create({
   itemContainer: {
     alignItems: "center",
     justifyContent: "center",
-    minHeight: ITEM_HEIGHT,
-    width: ITEM_WIDTH,
+    minHeight: CAROUSEL_HEIGHT,
+    width: SCREEN_WIDTH,
   },
   itemLabel: {
     color: "white",