fix: issues with carousel

pass-culture · Sep 11, 2024 · 83a7fff · 83a7fff
1 parent bded490
commit 83a7fff
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/src/features/home/components/modules/video/VideoCarouselModule.tsx b/src/features/home/components/modules/video/VideoCarouselModule.tsx
@@ -195,7 +195,9 @@ export const VideoCarouselModule: FunctionComponent<VideoCarouselModuleBaseProps
               testID="videoCarousel"
               vertical={false}
               height={CAROUSEL_HEIGHT}
-              panGestureHandlerProps={{ activeOffsetX: [-5, 5] }}
+              onConfigurePanGesture={(gestureChain) => {
+                gestureChain.activeOffsetX([-5, 5])
+              }}
               width={windowWidth}
               loop={false}
               scrollAnimationDuration={CAROUSEL_ANIMATION_DURATION}

diff --git a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx
@@ -33,7 +33,7 @@ export const OfferPreviewModal = ({
   onClose,
   isVisible = false,
 }: OfferPreviewModalProps) => {
-  const [carouselSize, setCarouselSize] = useState({ width: 100, height: 100 })
+  const [carouselSize, setCarouselSize] = useState<{ width: number; height: number }>()
   const carouselRef = useRef<ICarouselInstance>(null)
   const progressValue = useSharedValue<number>(0)
   const { width: windowWidth, height: windowHeight } = useWindowDimensions()
@@ -69,25 +69,27 @@ export const OfferPreviewModal = ({
         accessibilityLabel="Image précédente"
       />
 
-      <Carousel
-        ref={carouselRef}
-        testID="offerImageContainerCarousel"
-        vertical={false}
-        width={carouselSize.width}
-        height={carouselSize.height}
-        loop={false}
-        defaultIndex={defaultIndex}
-        enabled={false}
-        scrollAnimationDuration={500}
-        onProgressChange={(_, absoluteProgress) => {
-          progressValue.value = absoluteProgress
-          setTitle(getTitleLabel(absoluteProgress))
-        }}
-        data={offerImages}
-        renderItem={({ item: image, index }) => (
-          <CarouselImage source={{ uri: image }} accessibilityLabel={`Image ${index + 1}`} />
-        )}
-      />
+      {carouselSize ? (
+        <Carousel
+          ref={carouselRef}
+          testID="offerImageContainerCarousel"
+          vertical={false}
+          width={carouselSize.width}
+          height={carouselSize.height}
+          loop={false}
+          defaultIndex={defaultIndex}
+          enabled={false}
+          scrollAnimationDuration={500}
+          onProgressChange={(_, absoluteProgress) => {
+            progressValue.value = absoluteProgress
+            setTitle(getTitleLabel(absoluteProgress))
+          }}
+          data={offerImages}
+          renderItem={({ item: image, index }) => (
+            <CarouselImage source={{ uri: image }} accessibilityLabel={`Image ${index + 1}`} />
+          )}
+        />
+      ) : null}
 
       <RoundedButton
         iconName="next"