Skip to content

Commit

Permalink
feat: rewrite gesture apis with gesture handler 2 (#1126)
Browse files Browse the repository at this point in the history
* chore: updated dependencies

* feat: rewrite the gesture api with gh2
  • Loading branch information
gorhom authored Oct 3, 2022
1 parent 54abf0c commit 6a4d296
Show file tree
Hide file tree
Showing 21 changed files with 2,777 additions and 3,053 deletions.
8 changes: 4 additions & 4 deletions example/bare/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -382,9 +382,9 @@ PODS:
- React-perflogger (= 0.69.4)
- RNCMaskedView (0.1.11):
- React
- RNGestureHandler (2.5.0):
- RNGestureHandler (2.6.2):
- React-Core
- RNReanimated (2.9.1):
- RNReanimated (2.10.0):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
Expand Down Expand Up @@ -644,8 +644,8 @@ SPEC CHECKSUMS:
React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196
ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
RNReanimated: 2cf7451318bb9cc430abeec8d67693f9cf4e039c
RNGestureHandler: 4defbd70b2faf3d6761b82fa7880285241762cb0
RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
Yoga: ff994563b2fd98c982ca58e8cd9db2cdaf4dda74
Expand Down
4 changes: 2 additions & 2 deletions example/bare/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
"nanoid": "^3.3.3",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-gesture-handler": "^2.5.0",
"react-native-gesture-handler": "^2.6.2",
"react-native-maps": "^0.30.1",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "^2.9.1",
"react-native-reanimated": "^2.10.0",
"react-native-redash": "^16.0.11",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "^3.15.0",
Expand Down
2 changes: 1 addition & 1 deletion lint-staged.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
'**/*.js': ['eslint'],
'**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint'],
'**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint --fix'],
};
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,25 @@
"@types/react-native": "^0.67.7",
"auto-changelog": "^2.4.0",
"copyfiles": "^2.4.1",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"husky": "^4.3.8",
"lint-staged": "^11.1.2",
"prettier": "^2.3.2",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1",
"react": "~16.9.0",
"react-native": "^0.62.2",
"react-native-builder-bob": "^0.18.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.8.0",
"react-native-builder-bob": "^0.18.3",
"react-native-gesture-handler": "^2.5.0",
"react-native-reanimated": "^2.9.1",
"release-it": "^15.4.2",
"typescript": "^4.2.4"
},
"peerDependencies": {
"react": "*",
"react-native": "*",
"react-native-gesture-handler": ">=1.10.1",
"react-native-reanimated": ">=2.2.0"
"react-native-gesture-handler": ">=2.5.0",
"react-native-reanimated": ">=2.9.0"
},
"react-native-builder-bob": {
"source": "src",
Expand Down
12 changes: 7 additions & 5 deletions src/components/bottomSheet/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1642,14 +1642,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
// topInset,
// bottomInset,
animatedSheetState,
animatedScrollableState,
animatedScrollableOverrideState,
// animatedScrollableState,
// animatedScrollableOverrideState,
// isScrollableRefreshable,
// animatedScrollableContentOffsetY,
// keyboardState,
// animatedIndex,
// animatedCurrentIndex,
// animatedPosition,
animatedIndex,
animatedCurrentIndex,
animatedPosition,
animatedHandleGestureState,
animatedContentGestureState,
// animatedContainerHeight,
// animatedSheetHeight,
// animatedHandleHeight,
Expand Down
27 changes: 15 additions & 12 deletions src/components/bottomSheet/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type {
WithSpringConfig,
WithTimingConfig,
} from 'react-native-reanimated';
import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
import type { PanGesture } from 'react-native-gesture-handler';
import type { BottomSheetHandleProps } from '../bottomSheetHandle';
import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
Expand All @@ -21,17 +21,7 @@ import type { GestureEventsHandlersHookType } from '../../types';

export interface BottomSheetProps
extends BottomSheetAnimationConfigs,
Partial<
Pick<
PanGestureHandlerProps,
| 'activeOffsetY'
| 'activeOffsetX'
| 'failOffsetY'
| 'failOffsetX'
| 'waitFor'
| 'simultaneousHandlers'
>
> {
Partial<BottomSheetGestureProps> {
//#region configuration
/**
* Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
Expand Down Expand Up @@ -313,3 +303,16 @@ export type AnimateToPositionType = (
velocity?: number,
configs?: WithTimingConfig | WithSpringConfig
) => void;

export type BottomSheetGestureProps = {
activeOffsetX: Parameters<PanGesture['activeOffsetX']>[0];
activeOffsetY: Parameters<PanGesture['activeOffsetY']>[0];

failOffsetY: Parameters<PanGesture['failOffsetY']>[0];
failOffsetX: Parameters<PanGesture['failOffsetX']>[0];

simultaneousHandlers: Parameters<
PanGesture['simultaneousWithExternalGesture']
>[0];
waitFor: Parameters<PanGesture['requireExternalGestureToFail']>[0];
};
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React, { useMemo, useRef, memo } from 'react';
import React, { useMemo, memo } from 'react';
import Animated from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import {
useBottomSheetGestureHandlers,
useBottomSheetInternal,
} from '../../hooks';
import { GESTURE_SOURCE } from '../../constants';
import type { BottomSheetDraggableViewProps } from './types';
import { BottomSheetDraggableContext } from '../../contexts/gesture';

const BottomSheetDraggableViewComponent = ({
gestureType = GESTURE_SOURCE.CONTENT,
nativeGestureRef,
refreshControlGestureRef,
style,
Expand All @@ -26,19 +25,10 @@ const BottomSheetDraggableViewComponent = ({
failOffsetX,
failOffsetY,
} = useBottomSheetInternal();
const { contentPanGestureHandler, scrollablePanGestureHandler } =
useBottomSheetGestureHandlers();
const { contentPanGestureHandler } = useBottomSheetGestureHandlers();
//#endregion

//#region variables
const panGestureRef = useRef<PanGestureHandler>(null);
const gestureHandler = useMemo(
() =>
gestureType === GESTURE_SOURCE.CONTENT
? contentPanGestureHandler
: scrollablePanGestureHandler,
[gestureType, contentPanGestureHandler, scrollablePanGestureHandler]
);
const simultaneousHandlers = useMemo(() => {
const refs = [];

Expand All @@ -64,25 +54,66 @@ const BottomSheetDraggableViewComponent = ({
nativeGestureRef,
refreshControlGestureRef,
]);
const draggableGesture = useMemo(() => {
let gesture = Gesture.Pan()
.enabled(enableContentPanningGesture)
.shouldCancelWhenOutside(false)
.runOnJS(false)
.onStart(contentPanGestureHandler.handleOnStart)
.onChange(contentPanGestureHandler.handleOnChange)
.onEnd(contentPanGestureHandler.handleOnEnd)
.onFinalize(contentPanGestureHandler.handleOnFinalize);

if (waitFor) {
gesture = gesture.requireExternalGestureToFail(waitFor);
}

if (simultaneousHandlers) {
gesture = gesture.simultaneousWithExternalGesture(
simultaneousHandlers as any
);
}

if (activeOffsetX) {
gesture = gesture.activeOffsetX(activeOffsetX);
}

if (activeOffsetY) {
gesture = gesture.activeOffsetY(activeOffsetY);
}

if (failOffsetX) {
gesture = gesture.failOffsetX(failOffsetX);
}

if (failOffsetY) {
gesture = gesture.failOffsetY(failOffsetY);
}

return gesture;
}, [
activeOffsetX,
activeOffsetY,
enableContentPanningGesture,
failOffsetX,
failOffsetY,
simultaneousHandlers,
waitFor,
contentPanGestureHandler.handleOnChange,
contentPanGestureHandler.handleOnEnd,
contentPanGestureHandler.handleOnFinalize,
contentPanGestureHandler.handleOnStart,
]);
//#endregion

return (
<PanGestureHandler
ref={panGestureRef}
enabled={enableContentPanningGesture}
simultaneousHandlers={simultaneousHandlers}
shouldCancelWhenOutside={false}
waitFor={waitFor}
onGestureEvent={gestureHandler}
activeOffsetX={activeOffsetX}
activeOffsetY={activeOffsetY}
failOffsetX={failOffsetX}
failOffsetY={failOffsetY}
>
<Animated.View style={style} {...rest}>
{children}
</Animated.View>
</PanGestureHandler>
<GestureDetector gesture={draggableGesture}>
<BottomSheetDraggableContext.Provider value={draggableGesture}>
<Animated.View style={style} {...rest}>
{children}
</Animated.View>
</BottomSheetDraggableContext.Provider>
</GestureDetector>
);
};

Expand Down
16 changes: 4 additions & 12 deletions src/components/bottomSheetDraggableView/types.d.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import type { ReactNode, Ref } from 'react';
import type { ReactNode } from 'react';
import type { ViewProps as RNViewProps } from 'react-native';
import type { NativeViewGestureHandler } from 'react-native-gesture-handler';
import type { GESTURE_SOURCE } from '../../constants';
import type { GestureRef } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';

export type BottomSheetDraggableViewProps = RNViewProps & {
/**
* Defines the gesture type of the draggable view.
*
* @default GESTURE_SOURCE.CONTENT
* @type GESTURE_SOURCE
*/
gestureType?: GESTURE_SOURCE;
nativeGestureRef?: Ref<NativeViewGestureHandler> | null;
refreshControlGestureRef?: Ref<NativeViewGestureHandler> | null;
nativeGestureRef?: Exclude<GestureRef, number>;
refreshControlGestureRef?: Exclude<GestureRef, number>;
children: ReactNode[] | ReactNode;
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const BottomSheetGestureHandlersProvider = ({
//#region hooks
const { animatedContentGestureState, animatedHandleGestureState } =
useBottomSheetInternal();
const { handleOnStart, handleOnActive, handleOnEnd } =
const { handleOnStart, handleOnChange, handleOnEnd, handleOnFinalize } =
useGestureEventsHandlers();
//#endregion

Expand All @@ -33,26 +33,19 @@ const BottomSheetGestureHandlersProvider = ({
animatedContentGestureState,
animatedGestureSource,
handleOnStart,
handleOnActive,
handleOnEnd
);

const scrollablePanGestureHandler = useGestureHandler(
GESTURE_SOURCE.SCROLLABLE,
animatedContentGestureState,
animatedGestureSource,
handleOnStart,
handleOnActive,
handleOnEnd
handleOnChange,
handleOnEnd,
handleOnFinalize
);

const handlePanGestureHandler = useGestureHandler(
GESTURE_SOURCE.HANDLE,
animatedHandleGestureState,
animatedGestureSource,
handleOnStart,
handleOnActive,
handleOnEnd
handleOnChange,
handleOnEnd,
handleOnFinalize
);
//#endregion

Expand All @@ -61,15 +54,9 @@ const BottomSheetGestureHandlersProvider = ({
() => ({
contentPanGestureHandler,
handlePanGestureHandler,
scrollablePanGestureHandler,
animatedGestureSource,
}),
[
contentPanGestureHandler,
handlePanGestureHandler,
scrollablePanGestureHandler,
animatedGestureSource,
]
[contentPanGestureHandler, handlePanGestureHandler, animatedGestureSource]
);
//#endregion
return (
Expand Down
Loading

0 comments on commit 6a4d296

Please sign in to comment.