react-native-reanimated-carousel 5.0.0-beta.6 → 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 (68) 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/commonjs/components/ItemRenderer.js +1 -1
  5. package/lib/commonjs/components/ItemRenderer.js.map +1 -1
  6. package/lib/commonjs/components/ScrollViewGesture.js +1 -1
  7. package/lib/commonjs/components/ScrollViewGesture.js.map +1 -1
  8. package/lib/commonjs/hooks/useOnProgressChange.js +1 -1
  9. package/lib/commonjs/hooks/useOnProgressChange.js.map +1 -1
  10. package/lib/commonjs/hooks/usePropsErrorBoundary.js +1 -1
  11. package/lib/commonjs/hooks/usePropsErrorBoundary.js.map +1 -1
  12. package/lib/commonjs/hooks/useVisibleRanges.js +1 -1
  13. package/lib/commonjs/hooks/useVisibleRanges.js.map +1 -1
  14. package/lib/module/components/CarouselLayout.js +1 -1
  15. package/lib/module/components/CarouselLayout.js.map +1 -1
  16. package/lib/module/components/ItemRenderer.js +1 -1
  17. package/lib/module/components/ItemRenderer.js.map +1 -1
  18. package/lib/module/components/ScrollViewGesture.js +1 -1
  19. package/lib/module/components/ScrollViewGesture.js.map +1 -1
  20. package/lib/module/hooks/useOnProgressChange.js +1 -1
  21. package/lib/module/hooks/useOnProgressChange.js.map +1 -1
  22. package/lib/module/hooks/usePropsErrorBoundary.js +1 -1
  23. package/lib/module/hooks/usePropsErrorBoundary.js.map +1 -1
  24. package/lib/module/hooks/useVisibleRanges.js +1 -1
  25. package/lib/module/hooks/useVisibleRanges.js.map +1 -1
  26. package/lib/typescript/components/CarouselLayout.d.ts.map +1 -1
  27. package/lib/typescript/components/ItemRenderer.d.ts +1 -0
  28. package/lib/typescript/components/ItemRenderer.d.ts.map +1 -1
  29. package/lib/typescript/components/ScrollViewGesture.d.ts.map +1 -1
  30. package/lib/typescript/hooks/usePropsErrorBoundary.d.ts.map +1 -1
  31. package/lib/typescript/hooks/useVisibleRanges.d.ts +6 -0
  32. package/lib/typescript/hooks/useVisibleRanges.d.ts.map +1 -1
  33. package/lib/typescript/types.d.ts +1 -1
  34. package/package.json +4 -2
  35. package/src/components/CarouselLayout.tsx +4 -4
  36. package/src/components/ItemRenderer.tsx +11 -6
  37. package/src/components/ScrollViewGesture.tsx +8 -11
  38. package/src/hooks/useOnProgressChange.ts +1 -1
  39. package/src/hooks/usePropsErrorBoundary.ts +4 -3
  40. package/src/hooks/useVisibleRanges.tsx +80 -54
  41. package/src/types.ts +1 -1
  42. package/src/components/Carousel.test.tsx +0 -1215
  43. package/src/components/LazyView.test.tsx +0 -61
  44. package/src/components/Pagination/Pagination.test.tsx +0 -178
  45. package/src/components/rnr-demo.test.tsx +0 -53
  46. package/src/hooks/useAutoPlay.test.ts +0 -194
  47. package/src/hooks/useCarouselController.test.tsx +0 -1158
  48. package/src/hooks/useCheckMounted.test.ts +0 -47
  49. package/src/hooks/useCommonVariables.test.tsx +0 -384
  50. package/src/hooks/useInitProps.test.tsx +0 -134
  51. package/src/hooks/useLayoutConfig.test.tsx +0 -247
  52. package/src/hooks/useOffsetX.test.ts +0 -54
  53. package/src/hooks/useOnProgressChange.test.tsx +0 -207
  54. package/src/hooks/usePanGestureProxy.test.tsx +0 -368
  55. package/src/hooks/useUpdateGestureConfig.test.ts +0 -89
  56. package/src/hooks/useVisibleRanges.test.tsx +0 -347
  57. package/src/layouts/parallax.test.ts +0 -239
  58. package/src/layouts/stack.test.ts +0 -252
  59. package/src/store/index.test.tsx +0 -314
  60. package/src/utils/compute-gesture-translation.test.ts +0 -70
  61. package/src/utils/compute-offset-if-data-changed.test.ts +0 -133
  62. package/src/utils/compute-offset-if-size-changed.test.ts +0 -78
  63. package/src/utils/computed-with-auto-fill-data.test.ts +0 -298
  64. package/src/utils/deal-with-animation.test.ts +0 -181
  65. package/src/utils/handleroffset-direction.test.ts +0 -124
  66. package/src/utils/index.test.ts +0 -90
  67. package/src/utils/log.test.ts +0 -134
  68. 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,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
- });