Skip to content

Commit 6a4d296

Browse files
gorhomgorhom
authored
feat: rewrite gesture apis with gesture handler 2 (#1126)
* chore: updated dependencies * feat: rewrite the gesture api with gh2
1 parent 54abf0c commit 6a4d296

21 files changed

+2777
-3053
lines changed

‎example/bare/ios/Podfile.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -382,9 +382,9 @@ PODS:
382382
- React-perflogger (= 0.69.4)
383383
- RNCMaskedView (0.1.11):
384384
- React
385-
- RNGestureHandler (2.5.0):
385+
- RNGestureHandler (2.6.2):
386386
- React-Core
387-
- RNReanimated (2.9.1):
387+
- RNReanimated (2.10.0):
388388
- DoubleConversion
389389
- FBLazyVector
390390
- FBReactNativeSpec
@@ -644,8 +644,8 @@ SPEC CHECKSUMS:
644644
React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196
645645
ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83
646646
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
647-
RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
648-
RNReanimated: 2cf7451318bb9cc430abeec8d67693f9cf4e039c
647+
RNGestureHandler: 4defbd70b2faf3d6761b82fa7880285241762cb0
648+
RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
649649
RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
650650
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
651651
Yoga: ff994563b2fd98c982ca58e8cd9db2cdaf4dda74

‎example/bare/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
"nanoid": "^3.3.3",
2525
"react": "18.0.0",
2626
"react-native": "0.69.4",
27-
"react-native-gesture-handler": "^2.5.0",
27+
"react-native-gesture-handler": "^2.6.2",
2828
"react-native-maps": "^0.30.1",
2929
"react-native-pager-view": "^5.4.9",
30-
"react-native-reanimated": "^2.9.1",
30+
"react-native-reanimated": "^2.10.0",
3131
"react-native-redash": "^16.0.11",
3232
"react-native-safe-area-context": "4.2.4",
3333
"react-native-screens": "^3.15.0",

‎lint-staged.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
'**/*.js': ['eslint'],
3-
'**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint'],
3+
'**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint --fix'],
44
};

‎package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -52,25 +52,25 @@
5252
"@types/react-native": "^0.67.7",
5353
"auto-changelog": "^2.4.0",
5454
"copyfiles": "^2.4.1",
55-
"eslint": "^7.32.0",
56-
"eslint-config-prettier": "^8.3.0",
57-
"eslint-plugin-prettier": "^3.4.0",
55+
"eslint": "^8.21.0",
56+
"eslint-config-prettier": "^8.5.0",
57+
"eslint-plugin-prettier": "^4.2.1",
5858
"husky": "^4.3.8",
59-
"lint-staged": "^11.1.2",
60-
"prettier": "^2.3.2",
59+
"lint-staged": "^13.0.3",
60+
"prettier": "^2.7.1",
6161
"react": "~16.9.0",
6262
"react-native": "^0.62.2",
63-
"react-native-builder-bob": "^0.18.1",
64-
"react-native-gesture-handler": "^1.10.3",
65-
"react-native-reanimated": "^2.8.0",
63+
"react-native-builder-bob": "^0.18.3",
64+
"react-native-gesture-handler": "^2.5.0",
65+
"react-native-reanimated": "^2.9.1",
6666
"release-it": "^15.4.2",
6767
"typescript": "^4.2.4"
6868
},
6969
"peerDependencies": {
7070
"react": "*",
7171
"react-native": "*",
72-
"react-native-gesture-handler": ">=1.10.1",
73-
"react-native-reanimated": ">=2.2.0"
72+
"react-native-gesture-handler": ">=2.5.0",
73+
"react-native-reanimated": ">=2.9.0"
7474
},
7575
"react-native-builder-bob": {
7676
"source": "src",

‎src/components/bottomSheet/BottomSheet.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1642,14 +1642,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
16421642
// topInset,
16431643
// bottomInset,
16441644
animatedSheetState,
1645-
animatedScrollableState,
1646-
animatedScrollableOverrideState,
1645+
// animatedScrollableState,
1646+
// animatedScrollableOverrideState,
16471647
// isScrollableRefreshable,
16481648
// animatedScrollableContentOffsetY,
16491649
// keyboardState,
1650-
// animatedIndex,
1651-
// animatedCurrentIndex,
1652-
// animatedPosition,
1650+
animatedIndex,
1651+
animatedCurrentIndex,
1652+
animatedPosition,
1653+
animatedHandleGestureState,
1654+
animatedContentGestureState,
16531655
// animatedContainerHeight,
16541656
// animatedSheetHeight,
16551657
// animatedHandleHeight,

‎src/components/bottomSheet/types.d.ts

+15-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type {
66
WithSpringConfig,
77
WithTimingConfig,
88
} from 'react-native-reanimated';
9-
import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
9+
import type { PanGesture } from 'react-native-gesture-handler';
1010
import type { BottomSheetHandleProps } from '../bottomSheetHandle';
1111
import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
1212
import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
@@ -21,17 +21,7 @@ import type { GestureEventsHandlersHookType } from '../../types';
2121

2222
export interface BottomSheetProps
2323
extends BottomSheetAnimationConfigs,
24-
Partial<
25-
Pick<
26-
PanGestureHandlerProps,
27-
| 'activeOffsetY'
28-
| 'activeOffsetX'
29-
| 'failOffsetY'
30-
| 'failOffsetX'
31-
| 'waitFor'
32-
| 'simultaneousHandlers'
33-
>
34-
> {
24+
Partial<BottomSheetGestureProps> {
3525
//#region configuration
3626
/**
3727
* Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
@@ -313,3 +303,16 @@ export type AnimateToPositionType = (
313303
velocity?: number,
314304
configs?: WithTimingConfig | WithSpringConfig
315305
) => void;
306+
307+
export type BottomSheetGestureProps = {
308+
activeOffsetX: Parameters<PanGesture['activeOffsetX']>[0];
309+
activeOffsetY: Parameters<PanGesture['activeOffsetY']>[0];
310+
311+
failOffsetY: Parameters<PanGesture['failOffsetY']>[0];
312+
failOffsetX: Parameters<PanGesture['failOffsetX']>[0];
313+
314+
simultaneousHandlers: Parameters<
315+
PanGesture['simultaneousWithExternalGesture']
316+
>[0];
317+
waitFor: Parameters<PanGesture['requireExternalGestureToFail']>[0];
318+
};

‎src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

+61-30
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import React, { useMemo, useRef, memo } from 'react';
1+
import React, { useMemo, memo } from 'react';
22
import Animated from 'react-native-reanimated';
3-
import { PanGestureHandler } from 'react-native-gesture-handler';
3+
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
44
import {
55
useBottomSheetGestureHandlers,
66
useBottomSheetInternal,
77
} from '../../hooks';
8-
import { GESTURE_SOURCE } from '../../constants';
98
import type { BottomSheetDraggableViewProps } from './types';
9+
import { BottomSheetDraggableContext } from '../../contexts/gesture';
1010

1111
const BottomSheetDraggableViewComponent = ({
12-
gestureType = GESTURE_SOURCE.CONTENT,
1312
nativeGestureRef,
1413
refreshControlGestureRef,
1514
style,
@@ -26,19 +25,10 @@ const BottomSheetDraggableViewComponent = ({
2625
failOffsetX,
2726
failOffsetY,
2827
} = useBottomSheetInternal();
29-
const { contentPanGestureHandler, scrollablePanGestureHandler } =
30-
useBottomSheetGestureHandlers();
28+
const { contentPanGestureHandler } = useBottomSheetGestureHandlers();
3129
//#endregion
3230

3331
//#region variables
34-
const panGestureRef = useRef<PanGestureHandler>(null);
35-
const gestureHandler = useMemo(
36-
() =>
37-
gestureType === GESTURE_SOURCE.CONTENT
38-
? contentPanGestureHandler
39-
: scrollablePanGestureHandler,
40-
[gestureType, contentPanGestureHandler, scrollablePanGestureHandler]
41-
);
4232
const simultaneousHandlers = useMemo(() => {
4333
const refs = [];
4434

@@ -64,25 +54,66 @@ const BottomSheetDraggableViewComponent = ({
6454
nativeGestureRef,
6555
refreshControlGestureRef,
6656
]);
57+
const draggableGesture = useMemo(() => {
58+
let gesture = Gesture.Pan()
59+
.enabled(enableContentPanningGesture)
60+
.shouldCancelWhenOutside(false)
61+
.runOnJS(false)
62+
.onStart(contentPanGestureHandler.handleOnStart)
63+
.onChange(contentPanGestureHandler.handleOnChange)
64+
.onEnd(contentPanGestureHandler.handleOnEnd)
65+
.onFinalize(contentPanGestureHandler.handleOnFinalize);
66+
67+
if (waitFor) {
68+
gesture = gesture.requireExternalGestureToFail(waitFor);
69+
}
70+
71+
if (simultaneousHandlers) {
72+
gesture = gesture.simultaneousWithExternalGesture(
73+
simultaneousHandlers as any
74+
);
75+
}
76+
77+
if (activeOffsetX) {
78+
gesture = gesture.activeOffsetX(activeOffsetX);
79+
}
80+
81+
if (activeOffsetY) {
82+
gesture = gesture.activeOffsetY(activeOffsetY);
83+
}
84+
85+
if (failOffsetX) {
86+
gesture = gesture.failOffsetX(failOffsetX);
87+
}
88+
89+
if (failOffsetY) {
90+
gesture = gesture.failOffsetY(failOffsetY);
91+
}
92+
93+
return gesture;
94+
}, [
95+
activeOffsetX,
96+
activeOffsetY,
97+
enableContentPanningGesture,
98+
failOffsetX,
99+
failOffsetY,
100+
simultaneousHandlers,
101+
waitFor,
102+
contentPanGestureHandler.handleOnChange,
103+
contentPanGestureHandler.handleOnEnd,
104+
contentPanGestureHandler.handleOnFinalize,
105+
contentPanGestureHandler.handleOnStart,
106+
]);
67107
//#endregion
68108

69109
return (
70-
<PanGestureHandler
71-
ref={panGestureRef}
72-
enabled={enableContentPanningGesture}
73-
simultaneousHandlers={simultaneousHandlers}
74-
shouldCancelWhenOutside={false}
75-
waitFor={waitFor}
76-
onGestureEvent={gestureHandler}
77-
activeOffsetX={activeOffsetX}
78-
activeOffsetY={activeOffsetY}
79-
failOffsetX={failOffsetX}
80-
failOffsetY={failOffsetY}
81-
>
82-
<Animated.View style={style} {...rest}>
83-
{children}
84-
</Animated.View>
85-
</PanGestureHandler>
110+
<GestureDetector gesture={draggableGesture}>
111+
<BottomSheetDraggableContext.Provider value={draggableGesture}>
112+
<Animated.View style={style} {...rest}>
113+
{children}
114+
</Animated.View>
115+
</BottomSheetDraggableContext.Provider>
116+
</GestureDetector>
86117
);
87118
};
88119

‎src/components/bottomSheetDraggableView/types.d.ts

+4-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import type { ReactNode, Ref } from 'react';
1+
import type { ReactNode } from 'react';
22
import type { ViewProps as RNViewProps } from 'react-native';
3-
import type { NativeViewGestureHandler } from 'react-native-gesture-handler';
4-
import type { GESTURE_SOURCE } from '../../constants';
3+
import type { GestureRef } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';
54

65
export type BottomSheetDraggableViewProps = RNViewProps & {
7-
/**
8-
* Defines the gesture type of the draggable view.
9-
*
10-
* @default GESTURE_SOURCE.CONTENT
11-
* @type GESTURE_SOURCE
12-
*/
13-
gestureType?: GESTURE_SOURCE;
14-
nativeGestureRef?: Ref<NativeViewGestureHandler> | null;
15-
refreshControlGestureRef?: Ref<NativeViewGestureHandler> | null;
6+
nativeGestureRef?: Exclude<GestureRef, number>;
7+
refreshControlGestureRef?: Exclude<GestureRef, number>;
168
children: ReactNode[] | ReactNode;
179
};

‎src/components/bottomSheetGestureHandlersProvider/BottomSheetGestureHandlersProvider.tsx

+8-21
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const BottomSheetGestureHandlersProvider = ({
2323
//#region hooks
2424
const { animatedContentGestureState, animatedHandleGestureState } =
2525
useBottomSheetInternal();
26-
const { handleOnStart, handleOnActive, handleOnEnd } =
26+
const { handleOnStart, handleOnChange, handleOnEnd, handleOnFinalize } =
2727
useGestureEventsHandlers();
2828
//#endregion
2929

@@ -33,26 +33,19 @@ const BottomSheetGestureHandlersProvider = ({
3333
animatedContentGestureState,
3434
animatedGestureSource,
3535
handleOnStart,
36-
handleOnActive,
37-
handleOnEnd
38-
);
39-
40-
const scrollablePanGestureHandler = useGestureHandler(
41-
GESTURE_SOURCE.SCROLLABLE,
42-
animatedContentGestureState,
43-
animatedGestureSource,
44-
handleOnStart,
45-
handleOnActive,
46-
handleOnEnd
36+
handleOnChange,
37+
handleOnEnd,
38+
handleOnFinalize
4739
);
4840

4941
const handlePanGestureHandler = useGestureHandler(
5042
GESTURE_SOURCE.HANDLE,
5143
animatedHandleGestureState,
5244
animatedGestureSource,
5345
handleOnStart,
54-
handleOnActive,
55-
handleOnEnd
46+
handleOnChange,
47+
handleOnEnd,
48+
handleOnFinalize
5649
);
5750
//#endregion
5851

@@ -61,15 +54,9 @@ const BottomSheetGestureHandlersProvider = ({
6154
() => ({
6255
contentPanGestureHandler,
6356
handlePanGestureHandler,
64-
scrollablePanGestureHandler,
6557
animatedGestureSource,
6658
}),
67-
[
68-
contentPanGestureHandler,
69-
handlePanGestureHandler,
70-
scrollablePanGestureHandler,
71-
animatedGestureSource,
72-
]
59+
[contentPanGestureHandler, handlePanGestureHandler, animatedGestureSource]
7360
);
7461
//#endregion
7562
return (

0 commit comments

Comments
 (0)