diff --git a/__mocks__/react-native-reanimated-carousel.tsx b/__mocks__/react-native-reanimated-carousel.tsx
new file mode 100644
index 00000000000..c78c48e8a41
--- /dev/null
+++ b/__mocks__/react-native-reanimated-carousel.tsx
@@ -0,0 +1,40 @@
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react'
+import { FlatList, ListRenderItem } from 'react-native'
+import { TCarouselProps } from 'react-native-reanimated-carousel'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default forwardRef<
+  any,
+  Omit<TCarouselProps, 'onProgressChange'> & {
+    onProgressChange: (offsetProgress: number, absoluteProgress: number) => void
+  }
+>(function Carousel(
+  { renderItem, data, testID, width, height, onProgressChange, defaultIndex = 0 },
+  ref
+) {
+  useImperativeHandle(ref, () => ({
+    next: jest.fn(),
+    prev: jest.fn(),
+    scrollTo: ({ index }: { index: number }) => {
+      onProgressChange(0, index)
+    },
+    getCurrentIndex: jest.fn(),
+  }))
+
+  useEffect(() => {
+    if (defaultIndex > 0) {
+      onProgressChange(0, defaultIndex)
+    }
+  }, [defaultIndex, onProgressChange])
+
+  return (
+    <FlatList
+      ref={ref}
+      testID={testID}
+      renderItem={renderItem as unknown as ListRenderItem<unknown>}
+      data={data}
+      keyExtractor={(_, index) => index.toString()}
+      style={{ width, height }}
+    />
+  )
+})
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 2d0e3a6fa1b..1a7f1e90e91 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -767,35 +767,20 @@ PODS:
     - React
   - RNPermissions (3.8.0):
     - React-Core
-  - RNReanimated (3.3.0):
-    - DoubleConversion
-    - FBLazyVector
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React-callinvoker
+  - RNReanimated (3.15.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.15.1)
+    - RNReanimated/worklets (= 3.15.1)
+  - RNReanimated/reanimated (3.15.1):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
+    - ReactCommon/turbomodule/core
+  - RNReanimated/worklets (3.15.1):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-hermes
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTAppDelegate
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
     - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (3.32.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -1278,7 +1263,7 @@ SPEC CHECKSUMS:
   RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94
   RNLaunchNavigator: 058ccdb86a80a9424d5e37f6ec54379e3018c52b
   RNPermissions: 215c54462104b3925b412b0fb3c9c497b21c358b
-  RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
+  RNReanimated: 1896df448c213a64e98cf3f796e4105bbfab41a2
   RNScreens: ad1c105ac9107cf1a613bf80889485458eb20bd7
   RNSentry: 221d8c3f0bf0d951e9ecc89d3e42ee97aab9d7c0
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
diff --git a/jest/jest.web.setup.ts b/jest/jest.web.setup.ts
index 01edd82b5b8..094ea603af3 100644
--- a/jest/jest.web.setup.ts
+++ b/jest/jest.web.setup.ts
@@ -11,6 +11,20 @@ jest.mock('libs/firebase/firestore/client.web', () => {
   }
 })
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})
+
 window.open = jest.fn()
 
 export {}
diff --git a/package.json b/package.json
index ca576df28c6..9f234ddf58b 100644
--- a/package.json
+++ b/package.json
@@ -156,7 +156,7 @@
     "lodash": "^4.17.21",
     "lottie-ios": "3.4.0",
     "lottie-react-native": "5.1.6",
-    "patch-package": "^6.2.0",
+    "patch-package": "^8.0.0",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-app-polyfill": "^2.0.0",
@@ -193,8 +193,8 @@
     "react-native-modal": "^13.0.0",
     "react-native-permissions": "^3.8.0",
     "react-native-qrcode-svg": "^6.1.2",
-    "react-native-reanimated": "3.3.0",
-    "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-reanimated": "^3.15.1",
+    "react-native-reanimated-carousel": "^4.0.0-alpha.10",
     "react-native-safe-area-context": "3.4.1",
     "react-native-screens": "^3.32.0",
     "react-native-share": "^8.2.2",
diff --git a/patches/react-native-reanimated-carousel+4.0.0-alpha.12.patch b/patches/react-native-reanimated-carousel+4.0.0-alpha.12.patch
new file mode 100644
index 00000000000..893ccab04f2
--- /dev/null
+++ b/patches/react-native-reanimated-carousel+4.0.0-alpha.12.patch
@@ -0,0 +1,44 @@
+diff --git a/node_modules/react-native-reanimated-carousel/src/components/ScrollViewGesture.tsx b/node_modules/react-native-reanimated-carousel/src/components/ScrollViewGesture.tsx
+index 80a3fe0..ff03ed6 100644
+--- a/node_modules/react-native-reanimated-carousel/src/components/ScrollViewGesture.tsx
++++ b/node_modules/react-native-reanimated-carousel/src/components/ScrollViewGesture.tsx
+@@ -65,7 +65,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
+   const maxPage = dataLength;
+   const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
+   const max = useSharedValue(0);
+-  const panOffset = useSharedValue(0);
++  const panOffset = useSharedValue<number | undefined>(undefined);
+   const touching = useSharedValue(false);
+   const validStart = useSharedValue(false);
+   const scrollEndTranslation = useSharedValue(0);
+@@ -291,6 +291,10 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
+   const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
+     "worklet";
+ 
++    if (panOffset.value === undefined) {
++      return;
++    }
++
+     if (validStart.value) {
+       validStart.value = false;
+       cancelAnimation(translation);
+@@ -335,6 +339,10 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
+   const onGestureEnd = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>, _success: boolean) => {
+     "worklet";
+ 
++    if (panOffset.value === undefined) {
++      return;
++    }
++
+     const { velocityX, velocityY, translationX, translationY } = e;
+     const scrollEndVelocityValue = isHorizontal.value
+       ? velocityX
+@@ -381,6 +389,8 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
+ 
+     if (!loop)
+       touching.value = false;
++    
++    panOffset.value = undefined;
+   }, [
+     size,
+     loop,
diff --git a/src/features/home/components/modules/video/VideoCarouselModule.tsx b/src/features/home/components/modules/video/VideoCarouselModule.tsx
index 48439c1bb39..3441ac328b0 100644
--- 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/OfferImageCarouselPagination/OfferImageCarouselPagination.native.test.tsx b/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.native.test.tsx
index bd3528a8595..7b4cbe1f8f1 100644
--- a/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.native.test.tsx
+++ b/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.native.test.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
+import { SharedValue } from 'react-native-reanimated'
 
 import { OfferImageCarouselPagination } from 'features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination'
 import { render, screen } from 'tests/utils'
 
+const PROGRESS_VALUE = { value: 0 } as SharedValue<number>
+
 describe('<OfferImageCarouselPagination />', () => {
   it('should display pagination with only dots', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={jest.fn()}
       />
@@ -19,7 +22,7 @@ describe('<OfferImageCarouselPagination />', () => {
   it('should not display pagination with dots and buttons', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={jest.fn()}
       />
diff --git a/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.web.test.tsx b/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.web.test.tsx
index 40b1156adb7..488261e317a 100644
--- a/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.web.test.tsx
+++ b/src/features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.web.test.tsx
@@ -1,15 +1,18 @@
 import React from 'react'
+import { SharedValue } from 'react-native-reanimated'
 
 import { OfferImageCarouselPagination } from 'features/offer/components/OfferImageCarouselPagination/OfferImageCarouselPagination.web'
 import { fireEvent, render, screen } from 'tests/utils/web'
 
 const mockHandlePressButton = jest.fn()
 
+const PROGRESS_VALUE = { value: 0 } as SharedValue<number>
+
 describe('<OfferImageCarouselPagination />', () => {
   it('should display pagination with dots and buttons', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={mockHandlePressButton}
       />
@@ -21,7 +24,7 @@ describe('<OfferImageCarouselPagination />', () => {
   it('should not display pagination with only dots', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={mockHandlePressButton}
       />
@@ -33,7 +36,7 @@ describe('<OfferImageCarouselPagination />', () => {
   it('should handle previous button clicking', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={mockHandlePressButton}
       />
@@ -48,7 +51,7 @@ describe('<OfferImageCarouselPagination />', () => {
   it('should handle next button clicking', () => {
     render(
       <OfferImageCarouselPagination
-        progressValue={{ value: 0 }}
+        progressValue={PROGRESS_VALUE}
         offerImages={['image1', 'image2']}
         handlePressButton={mockHandlePressButton}
       />
diff --git a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx
index 1375fcd4d48..3b24b5ab5c2 100644
--- a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx
+++ b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.tsx
@@ -1,22 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react'
-// eslint-disable-next-line no-restricted-imports
-import { Image, useWindowDimensions } from 'react-native'
-import { useSharedValue } from 'react-native-reanimated'
-import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'
-import styled, { useTheme } from 'styled-components/native'
-
-import { calculateCarouselIndex } from 'features/offer/helpers/calculateCarouselIndex/calculateCarouselIndex'
-import { RoundedButton } from 'ui/components/buttons/RoundedButton'
-import { AppModal } from 'ui/components/modals/AppModal'
-// eslint-disable-next-line no-restricted-imports
-import { ModalSpacing } from 'ui/components/modals/enum'
-import { Close } from 'ui/svg/icons/Close'
-import { getSpacing } from 'ui/theme'
-import { Breakpoints } from 'ui/theme/grid'
-
-const MODAL_MAX_WIDTH = Breakpoints.LG
-const MODAL_PADDING = { x: getSpacing(10), y: getSpacing(10) }
-const MODAL_HEADER_HEIGHT = getSpacing(7)
+import React, { Fragment } from 'react'
 
 type OfferPreviewModalProps = {
   offerImages: string[]
@@ -26,129 +8,4 @@ type OfferPreviewModalProps = {
   defaultIndex?: number
 }
 
-export const OfferPreviewModal = ({
-  offerImages,
-  hideModal,
-  defaultIndex = 0,
-  onClose,
-  isVisible = false,
-}: OfferPreviewModalProps) => {
-  const [carouselSize, setCarouselSize] = useState({ width: 100, height: 100 })
-  const carouselRef = useRef<ICarouselInstance>(null)
-  const progressValue = useSharedValue<number>(0)
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
-  const { isDesktopViewport } = useTheme()
-
-  const getTitleLabel = (progressValue: number) =>
-    `${Math.round(progressValue) + 1}/${offerImages.length}`
-
-  const [title, setTitle] = useState(getTitleLabel(progressValue.value))
-
-  const CAROUSEL_ITEM_PADDING = isDesktopViewport ? getSpacing(20) : getSpacing(12)
-
-  const handleCloseModal = () => {
-    hideModal()
-    onClose?.()
-  }
-
-  const handlePressButton = (direction: 1 | -1) => {
-    const newIndex = calculateCarouselIndex({
-      currentIndex: progressValue.value,
-      direction,
-      maxIndex: offerImages.length - 1,
-    })
-    progressValue.value = newIndex
-    carouselRef.current?.scrollTo({ index: newIndex, animated: true })
-  }
-
-  const displayCarousel = () => (
-    <React.Fragment>
-      <RoundedButton
-        iconName="previous"
-        onPress={() => handlePressButton(-1)}
-        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}`} />
-        )}
-      />
-
-      <RoundedButton
-        iconName="next"
-        onPress={() => handlePressButton(1)}
-        accessibilityLabel="Image suivante"
-      />
-    </React.Fragment>
-  )
-
-  const displayModalBody = () => {
-    if (offerImages.length === 0) {
-      return null
-    }
-
-    if (offerImages.length > 1) {
-      return displayCarousel()
-    }
-    return <CarouselImage source={{ uri: String(offerImages[0]) }} accessibilityLabel="Image 1" />
-  }
-
-  const desktopConstraints = useMemo(
-    () => ({
-      maxWidth: Math.min(windowWidth, MODAL_MAX_WIDTH) - 2 * MODAL_PADDING.x,
-      maxHeight: windowHeight - 2 * MODAL_PADDING.y,
-    }),
-    [windowWidth, windowHeight]
-  )
-
-  return (
-    <AppModal
-      title={offerImages.length > 1 ? title : ''}
-      visible={isVisible}
-      isFullscreen
-      rightIcon={Close}
-      desktopConstraints={desktopConstraints}
-      onLayout={({ nativeEvent }) => {
-        setCarouselSize({
-          width: nativeEvent.layout.width - CAROUSEL_ITEM_PADDING * 2,
-          height:
-            nativeEvent.layout.height - ModalSpacing.MD - ModalSpacing.LG - MODAL_HEADER_HEIGHT,
-        })
-      }}
-      rightIconAccessibilityLabel="Fermer la fenêtre"
-      onRightIconPress={handleCloseModal}
-      scrollEnabled={false}>
-      <ModalBody>{displayModalBody()}</ModalBody>
-    </AppModal>
-  )
-}
-
-/**
- * We use RN Image component because it renders better with resizeMode in web mode than FastImage
- */
-const CarouselImage = styled(Image).attrs({ resizeMode: 'contain' })({
-  width: '100%',
-  height: '100%',
-})
-
-const ModalBody = styled.View({
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flex: 1,
-})
+export const OfferPreviewModal = (_props: OfferPreviewModalProps) => <Fragment />
diff --git a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.test.tsx b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.test.tsx
index eaabc28c67d..1e86f5b7317 100644
--- a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.test.tsx
+++ b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.test.tsx
@@ -11,6 +11,26 @@ jest.mock('react-native-safe-area-context', () => ({
 }))
 
 describe('<OfferPreviewModal />', () => {
+  let mockCallback: (
+    entries: {
+      target: HTMLElement
+      contentRect: Partial<DOMRectReadOnly>
+    }[]
+  ) => void
+
+  beforeAll(() => {
+    const mockResizeObserver = jest.fn().mockImplementation((callback) => {
+      mockCallback = callback
+      return {
+        observe: jest.fn(),
+        disconnect: jest.fn(),
+        unobserve: jest.fn(),
+      }
+    })
+
+    global.ResizeObserver = mockResizeObserver
+  })
+
   beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation()
   })
@@ -22,6 +42,29 @@ describe('<OfferPreviewModal />', () => {
     jest.useRealTimers()
   })
 
+  const forceOnLayout = async () => {
+    // Simuler un changement de taille
+    const view = screen.getByTestId('modalContainer')
+    Object.defineProperties(view, {
+      offsetHeight: { value: 600 },
+      offsetWidth: { value: 800 },
+      offsetLeft: { value: 10 },
+      offsetTop: { value: 20 },
+      offsetParent: { value: null },
+    })
+
+    await act(async () => {
+      if (mockCallback) {
+        mockCallback([
+          {
+            target: view,
+            contentRect: { width: 500, height: 200, top: 0, left: 0 },
+          },
+        ])
+      }
+    })
+  }
+
   it('should display offer preview modal correctly with several images', async () => {
     render(
       <OfferPreviewModal
@@ -31,12 +74,14 @@ describe('<OfferPreviewModal />', () => {
       />
     )
 
-    await screen.findByAltText('Image 1')
+    await forceOnLayout()
+
+    await screen.findByTestId('offerImageContainerCarousel')
 
     expect(screen.getByRole('button', { name: 'Image précédente' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Image suivante' })).toBeInTheDocument()
     expect(screen.getByText('1/3')).toBeInTheDocument()
-    expect(screen.getAllByTestId(/__CAROUSEL_ITEM_/)).toHaveLength(3)
+    expect(screen.getAllByLabelText(/Image [0-9]/)).toHaveLength(3)
   })
 
   it('should display offer preview modal correctly with one image', async () => {
@@ -60,6 +105,8 @@ describe('<OfferPreviewModal />', () => {
       />
     )
 
+    await forceOnLayout()
+
     await act(async () => {
       jest.advanceTimersByTime(500)
     })
@@ -77,14 +124,16 @@ describe('<OfferPreviewModal />', () => {
       />
     )
 
-    const nextButton = await screen.findByTestId('Image suivante')
-    fireEvent.click(nextButton)
+    await forceOnLayout()
+    await screen.findByTestId('offerImageContainerCarousel')
+
+    fireEvent.click(await screen.findByTestId('Image suivante'))
 
     await act(async () => {
       jest.advanceTimersByTime(500)
     })
 
-    expect(screen.getByText('2/3')).toBeInTheDocument()
+    expect(await screen.findByText('2/3')).toBeInTheDocument()
   })
 
   it('should display previous image', async () => {
@@ -98,16 +147,17 @@ describe('<OfferPreviewModal />', () => {
       />
     )
 
+    await forceOnLayout()
+
     await screen.findByText('3/3')
 
-    const previousButton = screen.getByTestId('Image précédente')
-    fireEvent.click(previousButton)
+    fireEvent.click(screen.getByTestId('Image précédente'))
 
     await act(async () => {
       jest.advanceTimersByTime(500)
     })
 
-    expect(screen.getByText('2/3')).toBeInTheDocument()
+    expect(await screen.findByText('2/3')).toBeInTheDocument()
   })
 
   it('should close modal on click on close button', async () => {
diff --git a/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.tsx b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.tsx
new file mode 100644
index 00000000000..07e7dce4a9d
--- /dev/null
+++ b/src/features/offer/components/OfferPreviewModal/OfferPreviewModal.web.tsx
@@ -0,0 +1,163 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+// eslint-disable-next-line no-restricted-imports
+import { Image, useWindowDimensions } from 'react-native'
+import { useSharedValue } from 'react-native-reanimated'
+import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'
+import styled, { useTheme } from 'styled-components/native'
+
+import { calculateCarouselIndex } from 'features/offer/helpers/calculateCarouselIndex/calculateCarouselIndex'
+import { RoundedButton } from 'ui/components/buttons/RoundedButton'
+import { AppModal } from 'ui/components/modals/AppModal'
+// eslint-disable-next-line no-restricted-imports
+import { ModalSpacing } from 'ui/components/modals/enum'
+import { Close } from 'ui/svg/icons/Close'
+import { getSpacing } from 'ui/theme'
+import { Breakpoints } from 'ui/theme/grid'
+
+const MODAL_MAX_WIDTH = Breakpoints.LG
+const MODAL_PADDING = { x: getSpacing(10), y: getSpacing(10) }
+const MODAL_HEADER_HEIGHT = getSpacing(7)
+
+type CarouselSize = { width: number; height: number }
+
+type OfferPreviewModalProps = {
+  offerImages: string[]
+  isVisible?: boolean
+  hideModal: () => void
+  onClose?: () => void
+  defaultIndex?: number
+}
+
+export const OfferPreviewModal = ({
+  offerImages,
+  hideModal,
+  defaultIndex = 0,
+  onClose,
+  isVisible = false,
+}: OfferPreviewModalProps) => {
+  const [carouselSize, setCarouselSize] = useState<CarouselSize>()
+  const carouselRef = useRef<ICarouselInstance>(null)
+  const progressValue = useSharedValue<number>(0)
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
+  const { isDesktopViewport } = useTheme()
+
+  const getTitleLabel = useCallback(
+    (progressValue: number) => `${Math.round(progressValue) + 1}/${offerImages.length}`,
+    [offerImages]
+  )
+
+  const [title, setTitle] = useState(getTitleLabel(progressValue.value))
+
+  const CAROUSEL_ITEM_PADDING = isDesktopViewport ? getSpacing(20) : getSpacing(12)
+
+  const handleCloseModal = () => {
+    hideModal()
+    onClose?.()
+  }
+
+  const handlePressButton = (direction: 1 | -1) => {
+    const newIndex = calculateCarouselIndex({
+      currentIndex: progressValue.value,
+      direction,
+      maxIndex: offerImages.length - 1,
+    })
+    progressValue.value = newIndex
+    carouselRef.current?.scrollTo({ index: newIndex, animated: true })
+  }
+
+  const handleProgressChange = useCallback(
+    (_: unknown, absoluteProgress: number) => {
+      progressValue.value = absoluteProgress
+      setTitle(getTitleLabel(absoluteProgress))
+    },
+    [getTitleLabel, progressValue]
+  )
+
+  const displayCarousel = () => (
+    <React.Fragment>
+      <RoundedButton
+        iconName="previous"
+        onPress={() => handlePressButton(-1)}
+        accessibilityLabel="Image précédente"
+      />
+      {carouselSize ? (
+        <Carousel
+          ref={carouselRef}
+          testID="offerImageContainerCarousel"
+          vertical={false}
+          width={carouselSize.width}
+          height={carouselSize.height}
+          loop={false}
+          defaultIndex={defaultIndex}
+          enabled={false}
+          scrollAnimationDuration={500}
+          onProgressChange={handleProgressChange}
+          data={offerImages}
+          renderItem={({ item: image, index }) => (
+            <CarouselImage source={{ uri: image }} accessibilityLabel={`Image ${index + 1}`} />
+          )}
+        />
+      ) : null}
+      <RoundedButton
+        iconName="next"
+        onPress={() => handlePressButton(1)}
+        accessibilityLabel="Image suivante"
+      />
+    </React.Fragment>
+  )
+
+  const displayModalBody = () => {
+    if (offerImages.length === 0) {
+      return null
+    }
+
+    if (offerImages.length > 1) {
+      return displayCarousel()
+    }
+    return <CarouselImage source={{ uri: String(offerImages[0]) }} accessibilityLabel="Image 1" />
+  }
+
+  const desktopConstraints = useMemo(
+    () => ({
+      maxWidth: Math.min(windowWidth, MODAL_MAX_WIDTH) - 2 * MODAL_PADDING.x,
+      maxHeight: windowHeight - 2 * MODAL_PADDING.y,
+    }),
+    [windowWidth, windowHeight]
+  )
+
+  return (
+    <AppModal
+      title={offerImages.length > 1 ? title : ''}
+      visible={isVisible}
+      isFullscreen
+      rightIcon={Close}
+      desktopConstraints={desktopConstraints}
+      onLayout={({ nativeEvent }) => {
+        setCarouselSize({
+          width: nativeEvent.layout.width - CAROUSEL_ITEM_PADDING * 2,
+          height:
+            nativeEvent.layout.height - ModalSpacing.MD - ModalSpacing.LG - MODAL_HEADER_HEIGHT,
+        })
+      }}
+      rightIconAccessibilityLabel="Fermer la fenêtre"
+      onRightIconPress={handleCloseModal}
+      scrollEnabled={false}>
+      <ModalBody>{displayModalBody()}</ModalBody>
+    </AppModal>
+  )
+}
+
+/**
+ * We use RN Image component because it renders better with resizeMode in web mode than FastImage
+ */
+const CarouselImage = styled(Image).attrs({ resizeMode: 'contain' })({
+  width: '100%',
+  height: '100%',
+})
+
+const ModalBody = styled.View({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 1,
+})
diff --git a/src/ui/CarouselBar/CarouselBar.native.test.tsx b/src/ui/CarouselBar/CarouselBar.native.test.tsx
index 7d37cd784c3..3b067866954 100644
--- a/src/ui/CarouselBar/CarouselBar.native.test.tsx
+++ b/src/ui/CarouselBar/CarouselBar.native.test.tsx
@@ -1,19 +1,22 @@
 import React from 'react'
+import { SharedValue } from 'react-native-reanimated'
 
 import { render, screen } from 'tests/utils'
 import { CarouselBar } from 'ui/CarouselBar/CarouselBar'
 
 jest.useFakeTimers()
 
+const PROGRESS_VALUE = { value: 3 } as SharedValue<number>
+
 describe('<CarouselBar/>', () => {
   it('should render the component', () => {
-    render(<CarouselBar index={0} animValue={{ value: 3 }} />)
+    render(<CarouselBar index={0} animValue={PROGRESS_VALUE} />)
 
     expect(screen.getByTestId('carousel-bar')).toBeOnTheScreen()
   })
 
   it('should render with correct styles', () => {
-    render(<CarouselBar index={0} animValue={{ value: 3 }} />)
+    render(<CarouselBar index={0} animValue={PROGRESS_VALUE} />)
     const greyMedium = 'rgba(203, 205, 210, 1)'
 
     expect(screen.getByTestId('carousel-bar')).toHaveStyle({
diff --git a/src/ui/CarouselDot/CarouselDot.native.test.tsx b/src/ui/CarouselDot/CarouselDot.native.test.tsx
index 566d9b25e8b..492f4862ba2 100644
--- a/src/ui/CarouselDot/CarouselDot.native.test.tsx
+++ b/src/ui/CarouselDot/CarouselDot.native.test.tsx
@@ -1,19 +1,22 @@
 import React from 'react'
+import { SharedValue } from 'react-native-reanimated'
 
 import { render, screen } from 'tests/utils'
 import { CarouselDot } from 'ui/CarouselDot/CarouselDot'
 
 jest.useFakeTimers()
 
+const PROGRESS_VALUE = { value: 3 } as SharedValue<number>
+
 describe('<CarouselDot/>', () => {
   it('should render carousel dot', () => {
-    render(<CarouselDot index={0} animValue={{ value: 3 }} />)
+    render(<CarouselDot index={0} animValue={PROGRESS_VALUE} />)
 
     expect(screen.getByTestId('carousel-dot')).toBeOnTheScreen()
   })
 
   it('should render with correct styles', () => {
-    render(<CarouselDot index={0} animValue={{ value: 3 }} />)
+    render(<CarouselDot index={0} animValue={PROGRESS_VALUE} />)
 
     expect(screen.getByTestId('carousel-dot')).toHaveStyle({
       backgroundColor: 'rgba(105, 106, 111, 1)',
diff --git a/yarn.lock b/yarn.lock
index 0331035d34e..7ca29304ec9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -521,6 +521,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
+  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
+  dependencies:
+    "@babel/types" "^7.25.6"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/generator@^7.7.2":
   version "7.20.14"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.14.tgz#9fa772c9f86a46c6ac9b321039400712b96f64ce"
@@ -731,6 +741,19 @@
     "@babel/traverse" "^7.25.0"
     semver "^6.3.1"
 
+"@babel/helper-create-class-features-plugin@^7.25.4":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz#57eaf1af38be4224a9d9dd01ddde05b741f50e14"
+  integrity sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.7"
+    "@babel/helper-member-expression-to-functions" "^7.24.8"
+    "@babel/helper-optimise-call-expression" "^7.24.7"
+    "@babel/helper-replace-supers" "^7.25.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
+    "@babel/traverse" "^7.25.4"
+    semver "^6.3.1"
+
 "@babel/helper-create-regexp-features-plugin@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.0.tgz#06b2348ce37fccc4f5e18dcd8d75053f2a7c44ff"
@@ -774,6 +797,15 @@
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
+"@babel/helper-create-regexp-features-plugin@^7.24.7":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz#24c75974ed74183797ffd5f134169316cd1808d9"
+  integrity sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.7"
+    regexpu-core "^5.3.1"
+    semver "^6.3.1"
+
 "@babel/helper-define-polyfill-provider@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz#3c2f91b7971b9fc11fe779c945c014065dea340e"
@@ -1202,7 +1234,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
   integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
 
-"@babel/helper-plugin-utils@^7.24.7":
+"@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
   integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
@@ -1642,6 +1674,13 @@
   dependencies:
     "@babel/types" "^7.25.2"
 
+"@babel/parser@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.4.tgz#6125f0158543fb4edf1c22f322f3db67f21cb3e1"
@@ -2520,6 +2559,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-arrow-functions@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz#4f6886c11e423bd69f3ce51dbf42424a5f275514"
+  integrity sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-arrow-functions@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154"
@@ -2643,6 +2689,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-class-properties@^7.0.0-0":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz#bae7dbfcdcc2e8667355cd1fb5eda298f05189fd"
+  integrity sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.25.4"
+    "@babel/helper-plugin-utils" "^7.24.8"
+
 "@babel/plugin-transform-class-properties@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz#bcbf1aef6ba6085cfddec9fc8d58871cf011fc29"
@@ -2673,6 +2727,18 @@
     "@babel/helper-split-export-declaration" "^7.16.0"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.0.0-0":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz#d29dbb6a72d79f359952ad0b66d88518d65ef89a"
+  integrity sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.7"
+    "@babel/helper-compilation-targets" "^7.25.2"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-replace-supers" "^7.25.0"
+    "@babel/traverse" "^7.25.4"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-classes@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
@@ -3281,6 +3347,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz#1de4534c590af9596f53d67f52a92f12db984120"
+  integrity sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
@@ -3297,13 +3371,6 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-assign@^7.16.7":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625"
-  integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
 "@babel/plugin-transform-object-rest-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz#5a3ce73caf0e7871a02e1c31e8b473093af241ff"
@@ -3354,6 +3421,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-transform-optional-chaining@^7.0.0-0":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz#bb02a67b60ff0406085c13d104c99a835cdf365d"
+  integrity sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-transform-optional-chaining@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6"
@@ -3704,6 +3780,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-shorthand-properties@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz#85448c6b996e122fa9e289746140aaa99da64e73"
+  integrity sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-shorthand-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
@@ -3792,6 +3875,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-template-literals@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz#a05debb4a9072ae8f985bcf77f3f215434c8f8c8"
+  integrity sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-template-literals@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
@@ -3895,6 +3985,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.16.0"
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-unicode-regex@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz#dfc3d4a51127108099b19817c0963be6a2adf19f"
+  integrity sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-unicode-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
@@ -4508,6 +4606,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.25.4":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
+  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.6"
+    "@babel/parser" "^7.25.6"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.16.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
@@ -4594,6 +4705,15 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@bam.tech/eslint-plugin@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@bam.tech/eslint-plugin/-/eslint-plugin-1.0.1.tgz#93fb03b710953fd93dde97154bb2d89bb8708344"
@@ -11608,6 +11728,11 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.1.tgz#58331f6f472a25fe3a50a351ae3052936c2c7f32"
   integrity sha512-SXgeMX9VwDe7iFFaEWkA5AstuER9YKqy4EhHqr4DVqkwmD9rpVimkMKWHdjn30Ja45txyjhSn63lVX69eVCckg==
 
+ci-info@^3.7.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
+  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -15101,7 +15226,7 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^7.0.0, fs-extra@^7.0.1:
+fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
   integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
@@ -18333,6 +18458,16 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stable-stringify@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz#52d4361b47d49168bcc4e564189a42e5a7439454"
+  integrity sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==
+  dependencies:
+    call-bind "^1.0.5"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
+
 json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
@@ -18388,6 +18523,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
 jsonpointer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
@@ -21063,24 +21203,26 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
-patch-package@^6.2.0:
-  version "6.4.7"
-  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.4.7.tgz#2282d53c397909a0d9ef92dae3fdeb558382b148"
-  integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
+patch-package@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
+  integrity sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
-    chalk "^2.4.2"
-    cross-spawn "^6.0.5"
+    chalk "^4.1.2"
+    ci-info "^3.7.0"
+    cross-spawn "^7.0.3"
     find-yarn-workspace-root "^2.0.0"
-    fs-extra "^7.0.1"
-    is-ci "^2.0.0"
+    fs-extra "^9.0.0"
+    json-stable-stringify "^1.0.2"
     klaw-sync "^6.0.0"
-    minimist "^1.2.0"
+    minimist "^1.2.6"
     open "^7.4.2"
     rimraf "^2.6.3"
-    semver "^5.6.0"
+    semver "^7.5.3"
     slash "^2.0.0"
     tmp "^0.0.33"
+    yaml "^2.2.2"
 
 path-browserify@0.0.1:
   version "0.0.1"
@@ -22933,17 +23075,24 @@ react-native-qrcode-svg@^6.1.2:
     prop-types "^15.7.2"
     qrcode "^1.5.0"
 
-react-native-reanimated-carousel@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.5.1.tgz#3605b9959ffc0aa1c6b8b8736d98f91f46e36b17"
-  integrity sha512-9BBQV6JAYSQm2lV7MFtT4mzapXmW4IZO6s38gfiJL84Jg23ivGB1UykcNQauKgtHyhtW2NuZJzItb1s42lM+hA==
-
-react-native-reanimated@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz#80f9d58e28fddf62fe4c1bc792337b8ab57936ab"
-  integrity sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==
-  dependencies:
-    "@babel/plugin-transform-object-assign" "^7.16.7"
+react-native-reanimated-carousel@^4.0.0-alpha.10:
+  version "4.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-4.0.0-alpha.12.tgz#5458501e8b58429a52c8cd495a1b925a896b64d2"
+  integrity sha512-7ZCpU3lfS5NR6PvDpdcOvdHo6UApg0RvlL9/YSih4cEBKdT9sdmsIhnRsiaAJGYdJl5m03wibfPf5cYxCdk64A==
+
+react-native-reanimated@^3.15.1:
+  version "3.15.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.15.1.tgz#59fb0ce9de7b8c7add2bcea80911cce332349a0e"
+  integrity sha512-DbBeUUExtJ1x1nfE94I8qgDgWjq5ztM3IO/+XFO+agOkPeVpBs5cRnxHfJKrjqJ2MgwhJOUDmtHxo+tDsoeitg==
+  dependencies:
+    "@babel/plugin-transform-arrow-functions" "^7.0.0-0"
+    "@babel/plugin-transform-class-properties" "^7.0.0-0"
+    "@babel/plugin-transform-classes" "^7.0.0-0"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0"
+    "@babel/plugin-transform-optional-chaining" "^7.0.0-0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0-0"
+    "@babel/plugin-transform-template-literals" "^7.0.0-0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0-0"
     "@babel/preset-typescript" "^7.16.7"
     convert-source-map "^2.0.0"
     invariant "^2.2.4"
@@ -27340,6 +27489,11 @@ yaml@^2.2.1:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
   integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
 
+yaml@^2.2.2:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
+  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
+
 yargs-parser@20.2.4:
   version "20.2.4"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"