react-native-reanimated-carousel 5.0.0-beta.7 → 5.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +32 -2
  2. package/lib/commonjs/components/CarouselLayout.js +1 -1
  3. package/lib/commonjs/components/CarouselLayout.js.map +1 -1
  4. package/lib/module/components/CarouselLayout.js +1 -1
  5. package/lib/module/components/CarouselLayout.js.map +1 -1
  6. package/lib/typescript/components/CarouselLayout.d.ts.map +1 -1
  7. package/package.json +4 -2
  8. package/src/components/CarouselLayout.tsx +3 -4
  9. package/src/components/Carousel.test.tsx +0 -1215
  10. package/src/components/LazyView.test.tsx +0 -61
  11. package/src/components/Pagination/Pagination.test.tsx +0 -178
  12. package/src/components/ScrollViewGesture.test.tsx +0 -155
  13. package/src/components/issue-899-parallax-reverse-loop.test.tsx +0 -131
  14. package/src/components/rnr-demo.test.tsx +0 -53
  15. package/src/hooks/useAutoPlay.test.ts +0 -194
  16. package/src/hooks/useCarouselController.test.tsx +0 -1158
  17. package/src/hooks/useCheckMounted.test.ts +0 -47
  18. package/src/hooks/useCommonVariables.test.tsx +0 -384
  19. package/src/hooks/useInitProps.test.tsx +0 -134
  20. package/src/hooks/useLayoutConfig.test.tsx +0 -247
  21. package/src/hooks/useOffsetX.test.ts +0 -54
  22. package/src/hooks/useOnProgressChange.test.tsx +0 -270
  23. package/src/hooks/usePanGestureProxy.test.tsx +0 -368
  24. package/src/hooks/usePropsErrorBoundary.test.tsx +0 -57
  25. package/src/hooks/useUpdateGestureConfig.test.ts +0 -89
  26. package/src/hooks/useVisibleRanges.test.tsx +0 -347
  27. package/src/layouts/parallax.test.ts +0 -239
  28. package/src/layouts/stack.test.ts +0 -252
  29. package/src/store/index.test.tsx +0 -314
  30. package/src/utils/compute-gesture-translation.test.ts +0 -70
  31. package/src/utils/compute-offset-if-data-changed.test.ts +0 -133
  32. package/src/utils/compute-offset-if-size-changed.test.ts +0 -78
  33. package/src/utils/computed-with-auto-fill-data.test.ts +0 -298
  34. package/src/utils/deal-with-animation.test.ts +0 -181
  35. package/src/utils/handleroffset-direction.test.ts +0 -124
  36. package/src/utils/index.test.ts +0 -90
  37. package/src/utils/log.test.ts +0 -134
  38. package/src/utils/sanitize-animation-style.test.ts +0 -40
@@ -1,368 +0,0 @@
1
- import React from "react";
2
- import { Text } from "react-native";
3
- import type { PanGesture, PanGestureHandler, TapGesture } from "react-native-gesture-handler";
4
- import {
5
- Gesture,
6
- GestureDetector,
7
- GestureHandlerRootView,
8
- State,
9
- } from "react-native-gesture-handler";
10
-
11
- import { cleanup, render } from "@testing-library/react-native";
12
- import { fireGestureHandler, getByGestureTestId } from "react-native-gesture-handler/jest-utils";
13
-
14
- import { usePanGestureProxy } from "./usePanGestureProxy";
15
-
16
- beforeEach(cleanup);
17
-
18
- const mockedEventHandlers = () => {
19
- return {
20
- begin: jest.fn(),
21
- start: jest.fn(),
22
- active: jest.fn(),
23
- end: jest.fn(),
24
- fail: jest.fn(),
25
- cancel: jest.fn(),
26
- finish: jest.fn(),
27
- };
28
- };
29
-
30
- const mockedEventHandlersFromUser = () => {
31
- return {
32
- begin: jest.fn(),
33
- start: jest.fn(),
34
- active: jest.fn(),
35
- end: jest.fn(),
36
- fail: jest.fn(),
37
- cancel: jest.fn(),
38
- finish: jest.fn(),
39
- };
40
- };
41
-
42
- describe("Using RNGH v2 gesture API", () => {
43
- interface SingleHandlerProps {
44
- handlers: ReturnType<typeof mockedEventHandlers>;
45
- handlersFromUser: ReturnType<typeof mockedEventHandlers>;
46
- treatStartAsUpdate?: boolean;
47
- }
48
-
49
- function SingleHandler({ handlers, handlersFromUser, treatStartAsUpdate }: SingleHandlerProps) {
50
- const pan = usePanGestureProxy({
51
- onConfigurePanGesture: (gesture: PanGesture) => {
52
- // This is user's customizations
53
- gesture
54
- .onBegin(handlersFromUser.begin)
55
- .onUpdate(handlersFromUser.active)
56
- .onEnd(handlersFromUser.end)
57
- .onFinalize(handlers.finish)
58
- .withTestId("pan");
59
- },
60
- onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
61
- onGestureUpdate: handlers.active,
62
- onGestureEnd: handlers.end,
63
- options: { enabled: true },
64
- });
65
-
66
- return (
67
- <GestureHandlerRootView>
68
- <GestureDetector gesture={pan}>
69
- <Text>v2 API test</Text>
70
- </GestureDetector>
71
- </GestureHandlerRootView>
72
- );
73
- }
74
-
75
- interface RacingHandlersProps {
76
- tapHandlers: ReturnType<typeof mockedEventHandlers>;
77
- panHandlers: ReturnType<typeof mockedEventHandlers>;
78
- }
79
-
80
- function RacingHandlers({ tapHandlers, panHandlers }: RacingHandlersProps) {
81
- const tap = Gesture.Tap().onBegin(tapHandlers.begin).onEnd(tapHandlers.end).withTestId("tap");
82
-
83
- const pan = usePanGestureProxy({
84
- onConfigurePanGesture: (_: PanGesture) => {
85
- _.onBegin(panHandlers.begin).onFinalize(panHandlers.finish).withTestId("pan");
86
- },
87
- onGestureStart: panHandlers.start,
88
- onGestureUpdate: panHandlers.active,
89
- onGestureEnd: panHandlers.end,
90
- options: { enabled: true },
91
- });
92
-
93
- return (
94
- <GestureHandlerRootView>
95
- <GestureDetector gesture={Gesture.Race(tap, pan)}>
96
- <Text>v2 API test</Text>
97
- </GestureDetector>
98
- </GestureHandlerRootView>
99
- );
100
- }
101
-
102
- it("sends events to handlers", () => {
103
- const tapHandlers = mockedEventHandlers();
104
- const panHandlers = mockedEventHandlers();
105
- render(<RacingHandlers tapHandlers={tapHandlers} panHandlers={panHandlers} />);
106
-
107
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
108
- { state: State.BEGAN },
109
- { state: State.ACTIVE },
110
- { state: State.END },
111
- ]);
112
- expect(panHandlers.begin).toBeCalledWith(expect.objectContaining({ state: State.BEGAN }));
113
- expect(panHandlers.finish).toBeCalled();
114
- expect(tapHandlers.begin).not.toBeCalled();
115
- });
116
-
117
- it("sends events with additional data to handlers", () => {
118
- const panHandlers = mockedEventHandlers();
119
- const panHandlersFromUser = mockedEventHandlersFromUser();
120
- render(
121
- <SingleHandler
122
- handlers={panHandlers}
123
- handlersFromUser={panHandlersFromUser}
124
- treatStartAsUpdate
125
- />
126
- );
127
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
128
- { state: State.BEGAN, translationX: 0 },
129
- { state: State.ACTIVE, translationX: 10 },
130
- { translationX: 20 },
131
- { translationX: 20 },
132
- { state: State.END, translationX: 30 },
133
- ]);
134
-
135
- expect(panHandlersFromUser.begin).toBeCalledTimes(1);
136
- expect(panHandlersFromUser.active).toBeCalledTimes(2);
137
- expect(panHandlersFromUser.end).toBeCalledTimes(1);
138
-
139
- expect(panHandlers.active).toBeCalledTimes(3);
140
- expect(panHandlers.active).toHaveBeenLastCalledWith(
141
- expect.objectContaining({ translationX: 20 })
142
- );
143
- });
144
-
145
- it("does not include console.error in the output", () => {
146
- // if react-native-gesture-handler detects that some handlers are
147
- // workletized and some are not, it will log an error to the
148
- // console. We'd like to make sure that this doesn't happen.
149
-
150
- // The error that would be shown looks like:
151
- // [react-native-gesture-handler] Some of the callbacks in the gesture are worklets and some are not. Either make sure that all calbacks are marked as 'worklet' if you wish to run them on the UI thread or use '.scheduleOnRN(true)' modifier on the gesture explicitly to run all callbacks on the JS thread.
152
-
153
- const panHandlers = mockedEventHandlers();
154
- const panHandlersFromUser = mockedEventHandlersFromUser();
155
-
156
- jest.spyOn(console, "error");
157
-
158
- render(
159
- <SingleHandler
160
- handlers={panHandlers}
161
- handlersFromUser={panHandlersFromUser}
162
- treatStartAsUpdate
163
- />
164
- );
165
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
166
- { state: State.BEGAN },
167
- { state: State.ACTIVE },
168
- { state: State.END },
169
- ]);
170
-
171
- expect(console.error).not.toBeCalled();
172
- });
173
- });
174
-
175
- describe("Event list validation", () => {
176
- interface SingleHandlerProps {
177
- handlers: ReturnType<typeof mockedEventHandlers>;
178
- handlersFromUser: ReturnType<typeof mockedEventHandlers>;
179
- treatStartAsUpdate?: boolean;
180
- }
181
-
182
- function SingleHandler({ handlers, handlersFromUser, treatStartAsUpdate }: SingleHandlerProps) {
183
- const pan = usePanGestureProxy({
184
- onConfigurePanGesture: (_: PanGesture) => {
185
- _.onBegin(handlersFromUser.begin)
186
- .onUpdate(handlersFromUser.active)
187
- .onEnd(handlersFromUser.end)
188
- .onFinalize(handlers.finish)
189
- .withTestId("pan");
190
- },
191
- onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
192
- onGestureUpdate: handlers.active,
193
- onGestureEnd: handlers.end,
194
- options: { enabled: true },
195
- });
196
-
197
- return (
198
- <GestureHandlerRootView>
199
- <GestureDetector gesture={pan}>
200
- <Text>v2 API test</Text>
201
- </GestureDetector>
202
- </GestureHandlerRootView>
203
- );
204
- }
205
-
206
- it("throws error when oldState doesn't correspond to previous event's state", () => {
207
- const panHandlers = mockedEventHandlers();
208
- const panHandlersFromUser = mockedEventHandlersFromUser();
209
- render(<SingleHandler handlers={panHandlers} handlersFromUser={panHandlersFromUser} />);
210
-
211
- expect(() => {
212
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
213
- { oldState: State.UNDETERMINED, state: State.BEGAN, x: 0, y: 10 },
214
- { oldState: State.UNDETERMINED, state: State.ACTIVE, x: 1, y: 11 },
215
- ]);
216
- }).toThrow("when state changes, oldState should be the same as previous event' state");
217
- });
218
-
219
- it.each([[State.END], [State.FAILED], [State.CANCELLED]])(
220
- "correctly handles events ending with state %s",
221
- (lastState) => {
222
- const panHandlers = mockedEventHandlers();
223
- const panHandlersFromUser = mockedEventHandlersFromUser();
224
- render(<SingleHandler handlers={panHandlers} handlersFromUser={panHandlersFromUser} />);
225
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
226
- { state: State.BEGAN },
227
- { state: State.ACTIVE },
228
- { state: lastState },
229
- ]);
230
-
231
- expect(panHandlersFromUser.begin).toBeCalledTimes(1);
232
- expect(panHandlersFromUser.active).toBeCalledTimes(0);
233
- expect(panHandlersFromUser.end).toBeCalledTimes(1);
234
-
235
- if (lastState === State.END) expect(panHandlers.end).toBeCalled();
236
- else expect(panHandlers.finish).toBeCalledWith(expect.any(Object), false);
237
- }
238
- );
239
- });
240
-
241
- describe("Filling event list with defaults", () => {
242
- interface RacingTapAndPanProps {
243
- handlers: ReturnType<typeof mockedEventHandlers>;
244
- treatStartAsUpdate?: boolean;
245
- }
246
-
247
- function RacingTapAndPan({ handlers, treatStartAsUpdate }: RacingTapAndPanProps) {
248
- const tap = Gesture.Tap().onBegin(handlers.begin).onEnd(handlers.end).withTestId("tap");
249
-
250
- const pan = usePanGestureProxy({
251
- onConfigurePanGesture: (_: PanGesture) => {
252
- _.onBegin(handlers.begin).onFinalize(handlers.finish).withTestId("pan");
253
- },
254
- onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
255
- onGestureUpdate: handlers.active,
256
- onGestureEnd: handlers.end,
257
- options: { enabled: true },
258
- });
259
-
260
- return (
261
- <GestureHandlerRootView>
262
- <GestureDetector gesture={Gesture.Exclusive(pan, tap)}>
263
- <Text>v2 API test</Text>
264
- </GestureDetector>
265
- </GestureHandlerRootView>
266
- );
267
- }
268
-
269
- it("fills oldState if not passed", () => {
270
- const handlers = mockedEventHandlers();
271
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
272
- fireGestureHandler<PanGestureHandler>(getByGestureTestId("pan"), [
273
- { state: State.BEGAN },
274
- { state: State.ACTIVE },
275
- { state: State.ACTIVE },
276
- { state: State.ACTIVE },
277
- { state: State.END },
278
- ]);
279
-
280
- expect(handlers.begin).toBeCalledWith(
281
- expect.objectContaining({ oldState: State.UNDETERMINED })
282
- );
283
- expect(handlers.active).nthCalledWith(1, expect.objectContaining({ oldState: State.BEGAN }));
284
- expect(handlers.active).lastCalledWith(
285
- expect.not.objectContaining({ oldState: expect.anything() })
286
- );
287
- expect(handlers.end).toBeCalledWith(expect.objectContaining({ oldState: State.ACTIVE }), true);
288
- });
289
-
290
- it("fills missing ACTIVE states", () => {
291
- const panHandlers = mockedEventHandlers();
292
- render(<RacingTapAndPan handlers={panHandlers} treatStartAsUpdate />);
293
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
294
- { state: State.BEGAN, x: 0, y: 10 },
295
- { state: State.ACTIVE, x: 1, y: 11 },
296
- { x: 2, y: 12 },
297
- { x: 3, y: 13 },
298
- { state: State.END, x: 4, y: 14 },
299
- ]);
300
-
301
- expect(panHandlers.active).toBeCalledTimes(3);
302
- expect(panHandlers.active).toHaveBeenLastCalledWith(expect.objectContaining({ x: 3, y: 13 }));
303
- });
304
-
305
- it("fills BEGIN and END events for discrete handlers", () => {
306
- const handlers = mockedEventHandlers();
307
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
308
- fireGestureHandler<TapGesture>(getByGestureTestId("tap"), [{ x: 5 }]);
309
- expect(handlers.begin).toBeCalledTimes(1);
310
- expect(handlers.end).toBeCalledTimes(1);
311
- });
312
-
313
- it("with FAILED event, fills BEGIN event for discrete handlers", () => {
314
- const handlers = mockedEventHandlers();
315
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
316
- fireGestureHandler<TapGesture>(getByGestureTestId("tap"), [{ state: State.FAILED }]);
317
- expect(handlers.begin).toBeCalledTimes(1);
318
- expect(handlers.end).toBeCalledTimes(1);
319
- expect(handlers.end).toBeCalledWith(expect.anything(), false);
320
- });
321
-
322
- it("uses event data from first event in filled BEGIN, ACTIVE events", () => {
323
- const handlers = mockedEventHandlers();
324
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
325
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [{ x: 120 }]);
326
- expect(handlers.begin).toBeCalledWith(expect.objectContaining({ x: 120 }));
327
- expect(handlers.active).toHaveBeenNthCalledWith(1, expect.objectContaining({ x: 120 }));
328
- });
329
-
330
- it("uses event data from last event in filled END events", () => {
331
- const handlers = mockedEventHandlers();
332
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
333
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [{ x: 120, state: State.FAILED }]);
334
- expect(handlers.begin).toBeCalledTimes(1);
335
- expect(handlers.active).toBeCalledTimes(1);
336
- expect(handlers.end).toBeCalledWith(expect.objectContaining({ x: 120 }), false);
337
- });
338
-
339
- it("uses event data filled events", () => {
340
- const handlers = mockedEventHandlers();
341
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
342
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"), [
343
- { x: 5, y: 15 },
344
- { x: 6, y: 16 },
345
- { x: 7, y: 17 },
346
- ]);
347
- expect(handlers.begin).toBeCalledWith(expect.objectContaining({ x: 5, y: 15 }));
348
- expect(handlers.active).toBeCalledTimes(3);
349
- expect(handlers.end).toBeCalledWith(expect.objectContaining({ x: 7, y: 17 }), true);
350
- });
351
-
352
- it("fills BEGIN and END events when they're not present, for discrete handlers", () => {
353
- const handlers = mockedEventHandlers();
354
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
355
- fireGestureHandler<TapGesture>(getByGestureTestId("tap"));
356
- expect(handlers.begin).toBeCalledTimes(1);
357
- expect(handlers.end).toHaveBeenCalledTimes(1);
358
- });
359
-
360
- it("fills BEGIN, ACTIVE and END events when they're not present, for continuous handlers", () => {
361
- const handlers = mockedEventHandlers();
362
- render(<RacingTapAndPan handlers={handlers} treatStartAsUpdate />);
363
- fireGestureHandler<PanGesture>(getByGestureTestId("pan"));
364
- expect(handlers.begin).toBeCalledTimes(1);
365
- expect(handlers.active).toBeCalledTimes(1);
366
- expect(handlers.end).toHaveBeenCalledTimes(1);
367
- });
368
- });
@@ -1,57 +0,0 @@
1
- import { renderHook } from "@testing-library/react-hooks";
2
-
3
- import { usePropsErrorBoundary } from "./usePropsErrorBoundary";
4
-
5
- import type { TCarouselProps } from "../types";
6
-
7
- function createProps(overrides: Partial<TCarouselProps<number>> = {}): TCarouselProps<number> & {
8
- dataLength: number;
9
- } {
10
- return {
11
- data: [0, 1, 2],
12
- dataLength: 3,
13
- renderItem: () => null,
14
- ...overrides,
15
- } as TCarouselProps<number> & { dataLength: number };
16
- }
17
-
18
- describe("usePropsErrorBoundary", () => {
19
- afterEach(() => {
20
- jest.restoreAllMocks();
21
- });
22
-
23
- it("accepts percentage and flex container sizing without contradictory warnings", () => {
24
- const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
25
-
26
- renderHook(() =>
27
- usePropsErrorBoundary(
28
- createProps({
29
- style: { width: "100%", height: 190 },
30
- itemWidth: 280,
31
- })
32
- )
33
- );
34
- renderHook(() =>
35
- usePropsErrorBoundary(
36
- createProps({
37
- vertical: true,
38
- style: { flex: 1 },
39
- itemHeight: 190,
40
- })
41
- )
42
- );
43
-
44
- expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("Horizontal mode"));
45
- expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("`itemWidth` sets"));
46
- expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("Vertical mode"));
47
- expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("`itemHeight` sets"));
48
-
49
- warnSpy.mockClear();
50
- renderHook(() => usePropsErrorBoundary(createProps({ style: { flex: 0, height: 190 } })));
51
- expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Horizontal mode"));
52
-
53
- warnSpy.mockClear();
54
- renderHook(() => usePropsErrorBoundary(createProps({ vertical: true })));
55
- expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Vertical mode"));
56
- });
57
- });
@@ -1,89 +0,0 @@
1
- import { renderHook } from "@testing-library/react-hooks";
2
-
3
- import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
4
-
5
- describe("useUpdateGestureConfig", () => {
6
- const mockGesture = {
7
- enabled: jest.fn().mockReturnThis(),
8
- };
9
-
10
- beforeEach(() => {
11
- jest.clearAllMocks();
12
- });
13
-
14
- it("should update gesture enabled state", () => {
15
- renderHook(() =>
16
- useUpdateGestureConfig(mockGesture as any, {
17
- enabled: true,
18
- })
19
- );
20
-
21
- expect(mockGesture.enabled).toHaveBeenCalledWith(true);
22
- });
23
-
24
- it("should handle undefined enabled state", () => {
25
- renderHook(() => useUpdateGestureConfig(mockGesture as any, {}));
26
-
27
- expect(mockGesture.enabled).not.toHaveBeenCalled();
28
- });
29
-
30
- it("should update when enabled state changes", () => {
31
- const { rerender } = renderHook((props) => useUpdateGestureConfig(mockGesture as any, props), {
32
- initialProps: { enabled: true },
33
- });
34
-
35
- expect(mockGesture.enabled).toHaveBeenCalledWith(true);
36
-
37
- rerender({ enabled: false });
38
- expect(mockGesture.enabled).toHaveBeenCalledWith(false);
39
- });
40
-
41
- it("should not update when enabled state remains the same", () => {
42
- const { rerender } = renderHook((props) => useUpdateGestureConfig(mockGesture as any, props), {
43
- initialProps: { enabled: true },
44
- });
45
-
46
- mockGesture.enabled.mockClear();
47
-
48
- rerender({ enabled: true });
49
- expect(mockGesture.enabled).not.toHaveBeenCalled();
50
- });
51
-
52
- it("should handle gesture object changes", () => {
53
- const newMockGesture = {
54
- enabled: jest.fn().mockReturnThis(),
55
- };
56
-
57
- const { rerender } = renderHook(
58
- ({ gesture, config }) => useUpdateGestureConfig(gesture as any, config),
59
- {
60
- initialProps: {
61
- gesture: mockGesture,
62
- config: { enabled: true },
63
- },
64
- }
65
- );
66
-
67
- expect(mockGesture.enabled).toHaveBeenCalledWith(true);
68
-
69
- rerender({
70
- gesture: newMockGesture,
71
- config: { enabled: true },
72
- });
73
-
74
- expect(newMockGesture.enabled).toHaveBeenCalledWith(true);
75
- });
76
-
77
- it("should cleanup properly on unmount", () => {
78
- const { unmount } = renderHook(() =>
79
- useUpdateGestureConfig(mockGesture as any, {
80
- enabled: true,
81
- })
82
- );
83
-
84
- mockGesture.enabled.mockClear();
85
- unmount();
86
-
87
- expect(mockGesture.enabled).not.toHaveBeenCalled();
88
- });
89
- });