Skip to content

Commit

Permalink
(PC-31740) chore(global): upgrade reanimated (#6862)
Browse files Browse the repository at this point in the history
* (PC-31740) chore: upgrade reanimated to 3.15

* fix: issues with carousel

* fix: patch react-native-reanimated-carousel (dohooo/react-native-reanimated-carousel#576)

* test: fix tests

* fix: OfferPreviewModal .web file

---------

Co-authored-by: Mathieu Meissonnier <mathieu.meissonnier@passculture.app>
  • Loading branch information
2 people authored and bebstein-pass committed Sep 12, 2024
1 parent 1d0a545 commit b13810e
Show file tree
Hide file tree
Showing 14 changed files with 546 additions and 225 deletions.
40 changes: 40 additions & 0 deletions __mocks__/react-native-reanimated-carousel.tsx
Original file line number Diff line number Diff line change
@@ -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 }}
/>
)
})
41 changes: 13 additions & 28 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -1278,7 +1263,7 @@ SPEC CHECKSUMS:
RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94
RNLaunchNavigator: 058ccdb86a80a9424d5e37f6ec54379e3018c52b
RNPermissions: 215c54462104b3925b412b0fb3c9c497b21c358b
RNReanimated: 9f7068e43b9358a46a688d94a5a3adb258139457
RNReanimated: 1896df448c213a64e98cf3f796e4105bbfab41a2
RNScreens: ad1c105ac9107cf1a613bf80889485458eb20bd7
RNSentry: 221d8c3f0bf0d951e9ecc89d3e42ee97aab9d7c0
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
Expand Down
14 changes: 14 additions & 0 deletions jest/jest.web.setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
44 changes: 44 additions & 0 deletions patches/react-native-reanimated-carousel+4.0.0-alpha.12.patch
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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()}
/>
Expand All @@ -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()}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand Down
Loading

0 comments on commit b13810e

Please sign in to comment.