Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add simultaneousWithExternalGesture to ReanimatedSwipable #3324

16 changes: 16 additions & 0 deletions docs/docs/components/reanimated_swipeable.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,22 @@ style object for the container (`Animated.View`), for example to override `overf

style object for the children container (`Animated.View`), for example to apply `flex: 1`.

### `simultaneousWithExternalGestures`

An array of gesture configurations to be recognized simultaneously with the swipeable gesture. This is useful for allowing other gestures to work simultaneously with swipeable gesture handler.

For example, to enable a pan gesture alongside the swipeable gesture:

```jsx
const panGesture = Gesture.Pan();

<GestureDetector gesture={panGesture}>
<ReanimatedSwipeable simultaneousWithExternalGestures={[panGesture]} />
</GestureDetector>
```

More details can be found in the [gesture composition documentation](../fundamentals/gesture-composition.md#simultaneouswithexternalgesture).

### `enableTrackpadTwoFingerGesture` (iOS only)

Enables two-finger gestures on supported devices, for example iPads with trackpads.
Expand Down
3 changes: 3 additions & 0 deletions example/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
"baseUrl": ".",
"paths": {
"react-native-gesture-handler": ["../src/index.ts"],
"react-native-gesture-handler/ReanimatedSwipeable": [
"../src/components/ReanimatedSwipeable.tsx"
],
"react-native-gesture-handler/jest-utils": ["../src/jestUtils/index.ts"]
}
},
Expand Down
14 changes: 13 additions & 1 deletion src/components/ReanimatedSwipeable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React, {
useImperativeHandle,
useMemo,
} from 'react';
import { GestureRef } from '../handlers/gestures/gesture';
import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
import { GestureDetector } from '../handlers/gestures/GestureDetector';
import {
Expand Down Expand Up @@ -202,6 +203,12 @@ export interface SwipeableProps
* apply `flex: 1`
*/
childrenContainerStyle?: StyleProp<ViewStyle>;

/**
* An array of gesture objects containing the configuration and callbacks to be
* used with the swipeable's gesture handler.
*/
simultaneousWithExternalGestures?: Exclude<GestureRef, number>[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
simultaneousWithExternalGestures?: Exclude<GestureRef, number>[];
simultaneousWithExternalGesture?: Exclude<GestureRef, number>[];

}

export interface SwipeableMethods {
Expand Down Expand Up @@ -247,6 +254,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
onSwipeableClose,
renderLeftActions,
renderRightActions,
simultaneousWithExternalGestures,
...remainingProps
} = props;

Expand Down Expand Up @@ -686,7 +694,10 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
)
.onFinalize(() => {
dragStarted.value = false;
}),
})
.simultaneousWithExternalGesture(
...(simultaneousWithExternalGestures ?? [])
),
[
dragOffsetFromLeftEdge,
dragOffsetFromRightEdge,
Expand All @@ -700,6 +711,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
updateAnimatedEvent,
updateElementWidths,
userDrag,
simultaneousWithExternalGestures,
]
);

Expand Down
Loading