yes
;
+}
+
+export function No() {
+ return no
;
+}
+
+interface VersionProps {
+ version: string;
+}
+
+export function Version({ version }: VersionProps) {
+ return {version}
;
+}
+
+export function Spacer() {
+ return ;
+}
+
+interface CompatibilityItem {
+ version: string;
+ isSpacer: boolean;
+ compatibility: Record
+
+
+
+
+ );
+}
+
+export function GestureHandlerCompatibility({
+ spacerAfterIndex,
+}: GestureHandlerCompatibilityProps) {
+ const docsVersion = useDocsVersion();
+ const filteredCompatibilityData = getCompatibilityEntriesForVersion(
+ docsVersion.version
+ );
+
+ const reactNativeVersions = extractVersions(
+ filteredCompatibilityData,
+ (data) => data['react-native']
+ );
+
+ const compatibilityItems = createCompatibilityItems(
+ filteredCompatibilityData,
+ reactNativeVersions,
+ (data) => new Set(data['react-native']),
+ spacerAfterIndex
+ );
+
+ return (
+ | + {versions.map((version) => ( + | {version} | + ))} +
|---|---|
|
+ |
+ {versions.map((version) => (
+
+ {item.compatibility[version] ? |
+ ))}
+
})
-})
-})
-![]({useBaseUrl("gifs/sampleswipeable.gif")})
-Jakub Piasecki
-
-
+
+
@@ -73,7 +73,15 @@ If you've build something with this library you'd like to share, please contact
Michał Bert
-
+
+
+
+
@@ -81,7 +89,7 @@ If you've build something with this library you'd like to share, please contact
Ignacy Łątka
-
+
@@ -89,8 +97,8 @@ If you've build something with this library you'd like to share, please contact
Krzysztof Magiera
-
-
+
+
diff --git a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx
new file mode 100644
index 0000000000..b8f590d2eb
--- /dev/null
+++ b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx
@@ -0,0 +1,208 @@
+---
+id: reanimated-interactions
+title: Integration with Reanimated
+sidebar_label: Integration with Reanimated
+sidebar_position: 4
+---
+
+import CollapsibleCode from '@site/src/components/CollapsibleCode';
+
+`GestureDetector` will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread.
+
+## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks
+
+[Worklets' Babel plugin](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about) is setup in a way that automatically marks callbacks passed to gestures in the configuration chain as worklets. This means that you don't need to add a `'worklet';` directive at the beginning of the functions. Here is an example that will be automatically workletized:
+
+```jsx
+const gesture = useTapGesture({
+ onBegin: () => {
+ console.log(_WORKLET);
+ },
+});
+```
+
+And here is one that won't:
+
+```jsx
+const callback = () => {
+ console.log(_WORKLET);
+};
+
+const gesture = useTapGesture({
+ onBegin: callback,
+});
+```
+
+It also won't work when wrapped with hooks like `useCallback` or `useMemo`, e.g:
+
+```jsx
+const callback = useCallback(() => {
+ console.log(_WORKLET);
+}, []);
+
+const gesture = useTapGesture({
+ onBegin: callback,
+});
+```
+
+In the above cases, you should add a `"worklet";` directive at the beginning of the callbacks, like so:
+
+```jsx
+const callback = () => {
+ // highlight-next-line
+ 'worklet';
+ console.log(_WORKLET);
+};
+
+const gesture = useTapGesture({
+ onBegin: callback,
+});
+```
+
+```jsx
+const callback = useCallback(() => {
+ // highlight-next-line
+ 'worklet;';
+ console.log(_WORKLET);
+}, []);
+
+const gesture = useTapGesture({
+ onBegin: callback,
+});
+```
+
+## Using SharedValue in gesture config
+
+RNGH3 allows to pass [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) to gestures' configurations. This allows to react to configuration changes without unnecessary rerenders.
+
+
+ }
+ src={FlingGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A discrete gesture that activates when the movement is sufficiently long and fast.
+Gesture activates when movement is sufficiently long and it does not take too much time.
+When gesture gets activated it will end when finger is released.
+The gesture will fail to recognize if the finger is lifted before being activated.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ Directions,
+ useFlingGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+ useSharedValue,
+ useAnimatedStyle,
+ withTiming,
+} from 'react-native-reanimated';
+
+export default function App() {
+ const position = useSharedValue(0);
+
+ const flingGesture = useFlingGesture({
+ direction: Directions.RIGHT,
+ onActivate: () => {
+ position.value = withTiming(position.value + 10, { duration: 100 });
+ },
+ });
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [{ translateX: position.value }],
+ }));
+
+ return (
+
+ }
+ src={HoverGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A continuous gesture that can recognize hovering above the view it's attached to. The hover effect may be activated by moving a mouse or a stylus over the view.
+
+On iOS additional visual effects may be configured.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { View, StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ useHoverGesture,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+ const hoverGesture = useHoverGesture({});
+
+ return (
+
+ }
+ src={LongPressGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A discrete gesture that activates when the corresponding view is pressed for a sufficiently long time.
+This gesture's state will end immediately after the finger is released.
+The gesture will fail to recognize a touch event if the finger is lifted before the minimum required time or if the finger is moved further than the allowable distance.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { View, StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ useLongPressGesture,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+ const longPressGesture = useLongPressGesture({
+ onDeactivate: (e, success) => {
+ if (success) {
+ console.log(`Long pressed for ${e.duration} ms!`);
+ }
+ },
+ });
+
+ return (
+
+;
+ active: SharedValue;
+};
+
+function PointerElement(props: PointerElementProps) {
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [
+ { translateX: props.pointer.value.x },
+ { translateY: props.pointer.value.y },
+ {
+ scale:
+ (props.pointer.value.visible ? 1 : 0) *
+ (props.active.value ? 1.3 : 1),
+ },
+ ],
+ backgroundColor: props.active.value ? 'red' : 'blue',
+ }));
+
+ return [] = [];
+ const active = useSharedValue(false);
+
+ for (let i = 0; i < 10; i++) {
+ trackedPointers[i] = useSharedValue({
+ x: 0,
+ y: 0,
+ visible: false,
+ });
+ }
+
+ const gesture = useManualGesture({
+ onTouchesDown: (e) => {
+ for (const touch of e.changedTouches) {
+ trackedPointers[touch.id].value = {
+ x: touch.x,
+ y: touch.y,
+ visible: true,
+ };
+ }
+
+ if (e.numberOfTouches >= 2) {
+ GestureStateManager.activate(e.handlerTag);
+ }
+ },
+ onTouchesMove: (e) => {
+ for (const touch of e.changedTouches) {
+ trackedPointers[touch.id].value = {
+ x: touch.x,
+ y: touch.y,
+ visible: true,
+ };
+ }
+ },
+ onTouchesUp: (e) => {
+ for (const touch of e.changedTouches) {
+ trackedPointers[touch.id].value = {
+ x: touch.x,
+ y: touch.y,
+ visible: false,
+ };
+ }
+
+ if (e.numberOfTouches === 0) {
+ GestureStateManager.deactivate(e.handlerTag);
+ }
+ },
+ onActivate: () => {
+ active.value = true;
+ },
+ onDeactivate: () => {
+ active.value = false;
+ },
+ });
+
+ return (
+
+
+
+ {trackedPointers.map((pointer, index) => (
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ pointer: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ backgroundColor: 'red',
+ position: 'absolute',
+ marginStart: -30,
+ marginTop: -30,
+ },
+});
+```
+
+
+
+
+## Modifying existing gestures
+
+While manual gestures open great possibilities we are aware that reimplementing pinch or rotation from scratch just because you need to activate in specific circumstances or require position of the fingers, would be a waste of time as those gestures are already available. Therefore, you can use touch events with every gesture to extract more detailed information about the gesture than what the basic events alone provide. We also added a `manualActivation` modifier on all continuous gestures, which prevents the gesture it is applied to from activating automatically, giving you full control over its behavior.
+
+## Config
+
+Full example code
+ +```tsx +import { StyleSheet } from 'react-native'; +import { + GestureDetector, + GestureHandlerRootView, + GestureStateManager, + useManualGesture, +} from 'react-native-gesture-handler'; +import Animated, { + useAnimatedStyle, + SharedValue, + useSharedValue, +} from 'react-native-reanimated'; + +type Pointer = { + x: number; + y: number; + visible: boolean; +}; + +type PointerElementProps = { + pointer: SharedValue
+ }
+ src={PanGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+A continuous gesture that can recognize a panning (dragging) gesture and track its movement.
+
+The gesture activates when a finger is placed on the screen and moved some initial distance.
+
+Configurations such as a minimum initial distance, specific vertical or horizontal pan detection and number of fingers required for activation (allowing for multifinger swipes) may be specified.
+
+Gesture callback can be used for continuous tracking of the pan gesture. It provides information about the gesture such as its XY translation from the starting point as well as its instantaneous velocity.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ usePanGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+ useSharedValue,
+ withTiming,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
+
+export default function App() {
+ const position = useSharedValue(0);
+
+ const panGesture = usePanGesture({
+ onUpdate: (e) => {
+ position.value = e.translationX;
+ },
+ onDeactivate: () => {
+ position.value = withTiming(0, { duration: 100 });
+ },
+ });
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [{ translateX: position.value }],
+ }));
+
+ return (
+
+ }
+ src={PinchGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseContinuousGestureConfig from './\_shared/base-continuous-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A continuous gesture that recognizes pinch gesture. It allows for tracking the distance between two fingers and use that information to scale or zoom your content.
+The gesture activates when fingers are placed on the screen and move away from each other or pull closer together.
+Gesture callback can be used for continuous tracking of the pinch gesture. It provides information about velocity, anchor (focal) point of gesture and scale.
+
+The distance between the fingers is reported as a scale factor. At the beginning of the gesture, the scale factor is 1.0. As the distance between the two fingers increases, the scale factor increases proportionally.
+Similarly, the scale factor decreases as the distance between the fingers decreases.
+Pinch gestures are used most commonly to change the size of objects or content onscreen.
+For example, map views use pinch gestures to change the zoom level of the map.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ usePinchGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+ useSharedValue,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
+
+export default function App() {
+ const scale = useSharedValue(1);
+
+ const pinchGesture = usePinchGesture({
+ onUpdate: (e) => {
+ scale.value = savedScale.value * e.scale;
+ },
+ });
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [{ scale: scale.value }],
+ }));
+
+ return (
+
+ }
+ src={RotationGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseContinuousGestureConfig from './\_shared/base-continuous-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import BaseContinuousGestureCallbacks from './\_shared/base-continuous-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A continuous gesture that can recognize a rotation gesture and track its movement.
+
+The gesture activates when fingers are placed on the screen and rotate around a common point.
+
+Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ useRotationGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+ useSharedValue,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
+
+export default function App() {
+ const rotation = useSharedValue(1);
+
+ const rotationGesture = useRotationGesture({
+ onUpdate: (e) => {
+ rotation.value = savedRotation.value + e.rotation;
+ },
+ });
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [{ rotateZ: `${(rotation.value / Math.PI) * 180}deg` }],
+ }));
+
+ return (
+
+ }
+ src={TapGestureBasicSrc}
+ disableMarginBottom={true}
+ />
+
+
+import BaseEventData from './\_shared/base-gesture-event-data.md';
+import BaseGestureConfig from './\_shared/base-gesture-config.md';
+import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx';
+import SharedValueInfo from './\_shared/shared-value-info.md';
+
+A discrete gesture that recognizes one or many taps.
+
+Tap gestures detect one or more fingers briefly touching the screen.
+The pointers involved in these gestures must not move significantly from their initial touch positions. This can be changed via configuration.
+The required number of taps and allowed distance from initial position may be configured.
+For example, you might configure tap gesture recognizers to detect single taps, double taps, or triple taps.
+
+In order for a gesture to activate, specified gesture requirements such as minPointers, numberOfTaps, maxDistance, maxDuration, and maxDelay (explained below) must be met. Immediately after the gesture activates, it will end.
+
+
+
+
+
+
+
+
+## Example
+
+```jsx
+import { View, StyleSheet } from 'react-native';
+import {
+ GestureDetector,
+ GestureHandlerRootView,
+ useTapGesture,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+ const singleTap = useTapGesture({
+ onActivate: () => {
+ console.log('Single tap!');
+ },
+ });
+
+ return (
+ First let's define styles we will need to make the app:
+ Start by defining the basic structure of the application:
Then we can start writing our
+ Ball component:
+ Next, define the `SharedValues` to track the ball's position and create the animated styles required to position the ball on the screen:
+
- We also need to define{' '}
-
- shared values
- {' '}
- to keep track of the ball position and create animated styles in order to be
- able to position the ball on the screen:
-
+ Apply the animated styles to the ball component:
And add it to the ball's styles:
+
+ Now, define the
Pan gesture logic.
+
- The only thing left is to define the pan gesture and assign it to the
- detector:
+ Finally, wrap the component responsible for rendering the ball with a
GestureDetector, and attach the Pan gesture to it:
+
+
+### Renamed callbacks
+
+In Gesture Handler 3 some of the callbacks were renamed, namely:
+
+| RNGH2 | RNGH3 |
+| --------- | -------------- |
+| `onStart` | `onActivate` |
+| `onEnd` | `onDeactivate` |
+| `onTouchesCancelled` | `onTouchesCancel` |
+
+Here is comparison of the two APIs:
+
+Full changes
+ +| RNGH2 | RNGH3 | +| ---------------------- | ----------------------- | +| `Gesture.Pan()` | `usePanGesture()` | +| `Gesture.Tap()` | `useTapGesture()` | +| `Gesture.LongPress()` | `useLongPressGesture()` | +| `Gesture.Rotation()` | `useRotationGesture()` | +| `Gesture.Pinch()` | `usePinchGesture()` | +| `Gesture.Fling()` | `useFlingGesture()` | +| `Gesture.Hover()` | `useHoverGesture()` | +| `Gesture.Native()` | `useNativeGesture()` | +| `Gesture.Manual()` | `useManualGesture()` | +| `Gesture.ForceTouch()` | *Not available in hook API* | + +
+
+
+### Other components
+
+Other components have also been internally rewritten using the new hook API but are exported under their original names, so no changes are necessary on your part. However, if you need to use the previous implementation for any reason, the old components are also available and are prefixed with `Legacy`, e.g., `ScrollView` is now available as `LegacyScrollView`.
+
+Legacy buttons
+ +| RNGH2 | RNGH3 | +| --------------------- | --------------------------- | +| `RawButton` | `LegacyRawButton` | +| `BaseButton` | `LegacyBaseButton` | +| `RectButton` | `LegacyRectButton` | +| `BorderlessButton` | `LegacyBorderlessButton` | + +
+
+
+## Replaced types
+
+Most of the types, like `TapGesture`, are still present in Gesture Handler 3. However, they are now used in new hook API. Types for old API now have `Legacy` prefix, e.g. `TapGesture` becomes `LegacyTapGesture`.
+
+Legacy components
+ +| RNGH2 | RNGH3 | +| --------------------- | --------------------------- | +| `ScrollView` | `LegacyScrollView` | +| `FlatList` | `LegacyFlatList` | +| `RefreshControl` | `LegacyRefreshControl` | +| `Switch` | `LegacySwitch` | +| `TextInput` | `LegacyTextInput` | +| `DrawerLayoutAndroid` | `LegacyDrawerLayoutAndroid` | + +
+
diff --git a/packages/docs-gesture-handler/docs/under-the-hood/state.md b/packages/docs-gesture-handler/docs/under-the-hood/state.md
index 2cd6b0a5b2..01e613028f 100644
--- a/packages/docs-gesture-handler/docs/under-the-hood/state.md
+++ b/packages/docs-gesture-handler/docs/under-the-hood/state.md
@@ -4,88 +4,16 @@ title: Handler State
sidebar_label: Handler State
---
-As described in ["About Gesture Handlers"](/docs/gesture-handlers/about-handlers), gesture handlers can be treated as ["state machines"](https://en.wikipedia.org/wiki/Finite-state_machine).
+Gesture handlers can be treated as ["state machines"](https://en.wikipedia.org/wiki/Finite-state_machine).
At any given time, each handler instance has an assigned state that can change when new touch events occur or can be forced to change by the touch system in certain circumstances.
-A gesture handler can be in one of the six possible states:
+States manage the internal recognition process. You can hook into these transitions using specific gesture callbacks.
-- [Accessing state](#accessing-state)
-- [State flows](#state-flows)
-- [States](#states)
- - [UNDETERMINED](#undetermined)
- - [FAILED](#failed)
- - [BEGAN](#began)
- - [CANCELLED](#cancelled)
- - [ACTIVE](#active)
- - [END](#end)
-
-Each state has its own description below.
-
-## Accessing state
-
-We can monitor a handler's state changes by using the [`onHandlerStateChange`](/docs/gesture-handlers/common-gh#onhandlerstatechange) callback and the destructured `nativeEvent` argument passed to it.
-This can be done by comparing the `nativeEvent`'s [`state`](/docs/gesture-handlers/common-gh#state) attribute to one of the constants exported under the `State` object (see example below).
-
-```jsx
-import { State, LongPressGestureHandler } from 'react-native-gesture-handler';
-
-class Demo extends Component {
- _handleStateChange = ({ nativeEvent }) => {
- if (nativeEvent.state === State.ACTIVE) {
- Alert.alert('Longpress');
- }
- };
- render() {
- return (
- Legacy types
+ +| RNGH2 | RNGH3 | +| ----------------------- | ----------------------------- | +| `PanGesture` | `LegacyPanGesture` | +| `TapGesture` | `LegacyTapGesture` | +| `LongPressGesture` | `LegacyLongPressGesture` | +| `RotationGesture` | `LegacyRotationGesture` | +| `PinchGesture` | `LegacyPinchGesture` | +| `FlingGesture` | `LegacyFlingGesture` | +| `HoverGesture` | `LegacyHoverGesture` | +| `NativeGesture` | `LegacyNativeGesture` | +| `ManualGesture` | `LegacyManualGesture` | +| `ForceTouchGesture` | `LegacyForceTouchGesture` | +| | | +| `ComposedGesture` | `LegacyComposedGesture` | +| `RaceGesture` | `LegacyRaceGesture` | +| `SimultaneousGesture` | `LegacySimultaneousGesture` | +| `ExclusiveGesture` | `LegacyExclusiveGesture` | +| | | +| `RawButtonProps` | `LegacyRawButtonProps` | +| `BaseButtonProps` | `LegacyBaseButtonProps` | +| `RectButtonProps` | `LegacyRectButtonProps` | +| `BorderlessButtonProps` | `LegacyBorderlessButtonProps` | + +[`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) when it has new data about the gesture. | +| **`END`** | The user successfully completed the gesture. | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) with `didSucceed` parameter set to `true`.
[`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `didSucceed` parameter set to `true`. | +| **`FAILED`** | The handler failed to recognize the gesture. | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) if the gesture was in `ACTIVE` state before. `didSucceed` parameter will be set to `false`
[`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `didSucceed` parameter set to `false`. | +| **`CANCELLED`** | The system interrupted the gesture. | [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) if the gesture was in `ACTIVE` state before. `didSucceed` parameter will be set to `false`
[`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) with `didSucceed` parameter set to `false`. | diff --git a/packages/docs-gesture-handler/docusaurus.config.js b/packages/docs-gesture-handler/docusaurus.config.js index 42974be4b2..9521346f34 100644 --- a/packages/docs-gesture-handler/docusaurus.config.js +++ b/packages/docs-gesture-handler/docusaurus.config.js @@ -46,7 +46,7 @@ const config = { lastVersion: 'current', // <- this makes 2.x docs as default versions: { current: { - label: '2.x', + label: '3.x', }, }, }, diff --git a/packages/docs-gesture-handler/package.json b/packages/docs-gesture-handler/package.json index 3a16be6aca..57b14f2493 100644 --- a/packages/docs-gesture-handler/package.json +++ b/packages/docs-gesture-handler/package.json @@ -25,17 +25,18 @@ "@docusaurus/core": "3.7.0", "@docusaurus/plugin-debug": "3.7.0", "@docusaurus/preset-classic": "3.7.0", + "@docusaurus/theme-common": "3.7.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@mdx-js/react": "^3.0.0", "@mui/material": "^7.1.0", "@swmansion/t-rex-ui": "1.0.0", "@vercel/og": "^0.6.2", - "prism-react-renderer": "^2.1.0", "babel-polyfill": "^6.26.0", "babel-preset-expo": "^9.2.2", "babel-preset-react-native": "^4.0.1", "clsx": "^2.1.0", + "prism-react-renderer": "^2.1.0", "raf": "^3.4.1", "raw-loader": "^4.0.2", "react": "^18.2.0", @@ -49,7 +50,8 @@ "react-native-worklets": "^0.1.0", "source-map": "^0.7.4", "source-map-loader": "^4.0.1", - "usehooks-ts": "^2.9.1" + "usehooks-ts": "^2.9.1", + "vis-network": "^10.0.2" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.7.0", diff --git a/packages/docs-gesture-handler/src/components/CodeComparison/index.tsx b/packages/docs-gesture-handler/src/components/CodeComparison/index.tsx new file mode 100644 index 0000000000..0c14189589 --- /dev/null +++ b/packages/docs-gesture-handler/src/components/CodeComparison/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import CodeBlock from '@theme/CodeBlock'; +import useFormattedCode from '@site/src/hooks/useFormattedCode'; + +export default function CodeComparison({ + label1, + label2, + code1, + code2, + skipFormatting1 = false, + skipFormatting2 = false, +}) { + const formattedCode1 = useFormattedCode(skipFormatting1 ? '' : code1); + const formattedCode2 = useFormattedCode(skipFormatting2 ? '' : code2); + + return ( +
+
+ );
+}
diff --git a/packages/docs-gesture-handler/src/components/CollapseButton/index.tsx b/packages/docs-gesture-handler/src/components/CollapseButton/index.tsx
index 8f035ba526..7b56a7d593 100644
--- a/packages/docs-gesture-handler/src/components/CollapseButton/index.tsx
+++ b/packages/docs-gesture-handler/src/components/CollapseButton/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import-x/extensions */
import React from 'react';
import styles from './styles.module.css';
import Arrow from '@site/static/img/Arrow.svg';
@@ -7,11 +8,11 @@ import clsx from 'clsx';
const CollapseButton: React.FC<{
label: string;
- labelCollapsed: string;
+ expandedLabel: string;
collapsed: boolean;
onCollapse: () => void;
className?: string;
-}> = ({ label, labelCollapsed, collapsed, onCollapse, className }) => {
+}> = ({ label, expandedLabel, collapsed, onCollapse, className }) => {
const { colorMode } = useColorMode();
return (
@@ -25,7 +26,7 @@ const CollapseButton: React.FC<{
+
+ {skipFormatting1 ? code1 : formattedCode1}
+
+
+
+ {label1}
+
+
+ {skipFormatting2 ? code2 : formattedCode2}
+
+
+ {label2}
+ })
+})
+ })
+})
+})
+ })
+})
+})
| })
| })
|
+
+### `edgeWidth`
+
+width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.
+
+### `hideStatusBar`
+
+a boolean value. When set to `true`, drawer component will use [StatusBar API](http://reactnative.dev/docs/statusbar.html) to hide the OS status bar when the drawer is dragged or idle in the `open` position.
+
+### `statusBarAnimation`
+
+a string with possible values: `slide`, `none` or `fade`. Defaults to `slide`.
+May be used in combination with `hideStatusBar` to select the animation used for hiding the status bar.
+See [StatusBar API](http://reactnative.dev/docs/statusbar.html#statusbaranimation) docs.
+
+### `overlayColor`
+
+color of the background overlay on top of the content window when the drawer is `open`.
+This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to `rgba(0, 0, 0, 0.7)`.
+
+### `renderNavigationView`
+
+a renderer function for the drawer component, provided with a `progress` parameter.
+
+- `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+ - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+ - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `onDrawerClose`
+
+a function which is called when the drawer has been closed.
+
+### `onDrawerOpen`
+
+a function which is called when the drawer has been opened.
+
+### `onDrawerSlide`
+
+a function which is called when drawer is moving or animating, provided with a `progress` parameter.
+
+- `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+ - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+ - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `onDrawerStateChanged`
+
+a function which is called when the status of the drawer changes. It takes two arguments:
+
+- `newState` - interaction state of the drawer. It can be one of the following:
+ - `DrawerState.IDLE`
+ - `DrawerState.DRAGGING`
+ - `DrawerState.SETTLING`
+- `drawerWillShow` - `true` when `drawer` started animating to `open` position, `false` otherwise.
+
+### `enableTrackpadTwoFingerGesture` (iOS only)
+
+enables two-finger gestures on supported devices, for example iPads with trackpads.
+If not enabled, the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
+
+### `children`
+
+either a component that's rendered in the content view or a function.
+If `children` is a function, it is provided with a `progress` parameter.
+
+- `progress` - `SharedValue` that indicates the progress of drawer opening/closing animation.
+ - equals `0` when the `drawer` is closed and `1` when the `drawer` is opened
+ - can be used by the `drawer` component to animated its children while the `drawer` is opening or closing
+
+### `mouseButton(value: MouseButton)` (Web & Android only)
+
+allows users to choose which mouse button should handler respond to.
+The enum `MouseButton` consists of the following predefined fields:
+
+- `LEFT`
+- `RIGHT`
+- `MIDDLE`
+- `BUTTON_4`
+- `BUTTON_5`
+- `ALL`
+
+Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Defaults to `MouseButton.LEFT`.
+
+### `enableContextMenu(value: boolean)` (Web only)
+
+specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Defaults to `false`.
+
+## Methods
+
+### `openDrawer(options)`
+
+`openDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:
+
+- `initialVelocity` - the initial velocity of the object attached to the spring. Defaults to `0`.
+- `animationSpeed` - controls speed of the animation. Defaults to `1`.
+
+### `closeDrawer(options)`
+
+`closeDrawer` accepts an optional `options` parameter, which is an object with the following optional properties:
+
+- `initialVelocity` - initial velocity of the object attached to the spring. Defaults to `0`.
+- `animationSpeed` - controls speed of the animation. Defaults to `1`.
+
+## Example:
+
+See the [reanimated drawer layout example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/release_tests/reanimatedDrawerLayout/index.tsx) from GestureHandler example app.
+
+```js
+import React, { useRef } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import ReanimatedDrawerLayout, {
+ DrawerType,
+ DrawerPosition,
+ DrawerLayoutMethods,
+} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+
+const DrawerPage = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Sponsors
+
+We really appreciate our sponsors! Thanks to them we can develop our library and make the react-native world a better place. Special thanks for:
+
+
+
+
+
+
diff --git a/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx b/packages/docs-gesture-handler/versioned_docs/version-2.x/fundamentals/states-events.mdx
similarity index 100%
rename from packages/docs-gesture-handler/docs/fundamentals/states-events.mdx
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/fundamentals/states-events.mdx
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/_category_.json b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/_category_.json
similarity index 100%
rename from packages/docs-gesture-handler/docs/gesture-handlers/_category_.json
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/_category_.json
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/about-handlers.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/about-handlers.md
similarity index 70%
rename from packages/docs-gesture-handler/docs/gesture-handlers/about-handlers.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/about-handlers.md
index c67eb59173..6565c773a2 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/about-handlers.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/about-handlers.md
@@ -6,7 +6,7 @@ sidebar_position: 1
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
Gesture handlers are the core building blocks of this library.
@@ -16,10 +16,10 @@ Each handler type is capable of recognizing one type of gesture (pan, pinch, etc
Handlers analyze touch stream synchronously in the UI thread. This allows for uninterrupted interactions even when the Javascript thread is blocked.
-Each handler works as an isolated state machine. It takes touch stream as an input and based on it, it can flip between [states](/docs/under-the-hood/state).
+Each handler works as an isolated state machine. It takes touch stream as an input and based on it, it can flip between [states](/docs/2.x/under-the-hood/state).
When a gesture starts, based on the position where the finger was placed, a set of handlers that may be interested in recognizing the gesture is selected.
All the touch events (touch down, move, up, or when other fingers are placed or lifted) are delivered to all of the handlers selected initially.
-When one gesture becomes [active](/docs/under-the-hood/state#active), it cancels all the other gestures (read more about how to influence this process in ["Cross handler interactions"](/docs/gesture-handlers/interactions) section).
+When one gesture becomes [active](/docs/2.x/under-the-hood/state#active), it cancels all the other gestures (read more about how to influence this process in ["Cross handler interactions"](/docs/2.x/gesture-handlers/interactions) section).
Gesture handler components do not instantiate a native view in the view hierarchy. Instead, they are kept in library's own registry and are only connected to native views. When using any of the gesture handler components, it is important for it to have a native view rendered as a child.
Since handler components don't have corresponding views in the hierarchy, the events registered with them are actually hooked into the underlying view.
@@ -28,23 +28,23 @@ Since handler components don't have corresponding views in the hierarchy, the ev
Currently, the library provides the following list of gestures. Their parameters and attributes they provide to gesture events are documented under each gesture page:
-- [`PanGestureHandler`](/docs/gesture-handlers/pan-gh)
-- [`TapGestureHandler`](/docs/gesture-handlers/tap-gh)
-- [`LongPressGestureHandler`](/docs/gesture-handlers/longpress-gh)
-- [`RotationGestureHandler`](/docs/gesture-handlers/rotation-gh)
-- [`FlingGestureHandler`](/docs/gesture-handlers/fling-gh)
-- [`PinchGestureHandler`](/docs/gesture-handlers/pinch-gh)
-- [`ForceTouchGestureHandler`](/docs/gesture-handlers/force-gh)
+- [`PanGestureHandler`](/docs/2.x/gesture-handlers/pan-gh)
+- [`TapGestureHandler`](/docs/2.x/gesture-handlers/tap-gh)
+- [`LongPressGestureHandler`](/docs/2.x/gesture-handlers/longpress-gh)
+- [`RotationGestureHandler`](/docs/2.x/gesture-handlers/rotation-gh)
+- [`FlingGestureHandler`](/docs/2.x/gesture-handlers/fling-gh)
+- [`PinchGestureHandler`](/docs/2.x/gesture-handlers/pinch-gh)
+- [`ForceTouchGestureHandler`](/docs/2.x/gesture-handlers/force-gh)
### Discrete vs continuous
We distinguish between two types of gestures: discrete and continuous.
-Continuous gesture handlers can be [active](/docs/under-the-hood/state#active) for a long period of time and will generate a stream of [gesture events](/docs/gesture-handlers/common-gh#ongestureevent) until the gesture is [over](/docs/under-the-hood/state#ended).
-An example of a continuous handler is [`PanGestureHandler`](/docs/gesture-handlers/pan-gh) that once [activated](/docs/under-the-hood/state#active), will start providing updates about [translation](/docs/gesture-handlers/pan-gh#translationx) and other properties.
+Continuous gesture handlers can be [active](/docs/2.x/under-the-hood/state#active) for a long period of time and will generate a stream of [gesture events](/docs/2.x/gesture-handlers/common-gh#ongestureevent) until the gesture is [over](/docs/2.x/under-the-hood/state#ended).
+An example of a continuous handler is [`PanGestureHandler`](/docs/2.x/gesture-handlers/pan-gh) that once [activated](/docs/2.x/under-the-hood/state#active), will start providing updates about [translation](/docs/2.x/gesture-handlers/pan-gh#translationx) and other properties.
-On the other hand, discrete gesture handlers once [activated](/docs/under-the-hood/state#active) will not stay in the active state but will [end](/docs/under-the-hood/state#ended) immediately.
-[`LongPressGestureHandler`](/docs/gesture-handlers/longpress-gh) is a discrete handler, as it only detects if the finger is placed for a sufficiently long period of time, it does not track finger movements (as that's the responsibility of [`PanGestureHandler`](/docs/gesture-handlers/pan-gh)).
+On the other hand, discrete gesture handlers once [activated](/docs/2.x/under-the-hood/state#active) will not stay in the active state but will [end](/docs/2.x/under-the-hood/state#ended) immediately.
+[`LongPressGestureHandler`](/docs/2.x/gesture-handlers/longpress-gh) is a discrete handler, as it only detects if the finger is placed for a sufficiently long period of time, it does not track finger movements (as that's the responsibility of [`PanGestureHandler`](/docs/2.x/gesture-handlers/pan-gh)).
Keep in mind that `onGestureEvent` is only generated in continuous gesture handlers and shouldn't be used in the `TapGestureHandler` and other discrete handlers.
@@ -77,7 +77,7 @@ class Multitap extends Component {
### Using native components
-Gesture handler library exposes a set of components normally available in React Native that are wrapped in [`NativeViewGestureHandler`](/docs/gesture-handlers/nativeview-gh).
+Gesture handler library exposes a set of components normally available in React Native that are wrapped in [`NativeViewGestureHandler`](/docs/2.x/gesture-handlers/nativeview-gh).
Here is a list of exposed components:
- `ScrollView`
@@ -86,7 +86,7 @@ Here is a list of exposed components:
- `TextInput`
- `DrawerLayoutAndroid` (**Android only**)
-If you want to use other handlers or [buttons](/docs/components/buttons) nested in a `ScrollView`, use the [`waitFor`](/docs/gesture-handlers/common-gh#waitfor) property to define interaction between a handler and `ScrollView`
+If you want to use other handlers or [buttons](/docs/2.x/components/buttons) nested in a `ScrollView`, use the [`waitFor`](/docs/2.x/gesture-handlers/common-gh#waitfor) property to define interaction between a handler and `ScrollView`
### Events with `useNativeDriver`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/common-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/common-gh.md
similarity index 66%
rename from packages/docs-gesture-handler/docs/gesture-handlers/common-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/common-gh.md
index 58421e27ac..0133c4e096 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/common-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/common-gh.md
@@ -6,7 +6,7 @@ sidebar_position: 4
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
This page covers the common set of properties all gesture handler components expose.
@@ -25,34 +25,34 @@ This section describes properties that can be used with all gesture handler comp
Accepts a boolean value.
Indicates whether the given handler should be analyzing stream of touch events or not.
-When set to `false` we can be sure that the handler's state will **never** become [`ACTIVE`](/docs/under-the-hood/state#active).
-If the value gets updated while the handler already started recognizing a gesture, then the handler's state it will immediately change to [`FAILED`](/docs/under-the-hood/state#failed) or [`CANCELLED`](/docs/under-the-hood/state#cancelled) (depending on its current state).
+When set to `false` we can be sure that the handler's state will **never** become [`ACTIVE`](/docs/2.x/under-the-hood/state#active).
+If the value gets updated while the handler already started recognizing a gesture, then the handler's state it will immediately change to [`FAILED`](/docs/2.x/under-the-hood/state#failed) or [`CANCELLED`](/docs/2.x/under-the-hood/state#cancelled) (depending on its current state).
Default value is `true`.
### `shouldCancelWhenOutside`
Accepts a boolean value.
-When `true` the handler will [cancel](/docs/under-the-hood/state#cancelled) or [fail](/docs/under-the-hood/state#failed) recognition (depending on its current state) whenever the finger leaves the area of the connected view.
+When `true` the handler will [cancel](/docs/2.x/under-the-hood/state#cancelled) or [fail](/docs/2.x/under-the-hood/state#failed) recognition (depending on its current state) whenever the finger leaves the area of the connected view.
Default value of this property is different depending on the handler type.
-Most handlers' `shouldCancelWhenOutside` property defaults to `false` except for the [`LongPressGestureHandler`](/docs/gesture-handlers/longpress-gh) and [`TapGestureHandler`](/docs/gesture-handlers/tap-gh) which default to `true`.
+Most handlers' `shouldCancelWhenOutside` property defaults to `false` except for the [`LongPressGestureHandler`](/docs/2.x/gesture-handlers/longpress-gh) and [`TapGestureHandler`](/docs/2.x/gesture-handlers/tap-gh) which default to `true`.
### `cancelsTouchesInView` (**iOS only**)
Accepts a boolean value.
-When `true`, the handler will cancel touches for native UI components (`UIButton`, `UISwitch`, etc) it's attached to when it becomes [`ACTIVE`](/docs/under-the-hood/state#active).
+When `true`, the handler will cancel touches for native UI components (`UIButton`, `UISwitch`, etc) it's attached to when it becomes [`ACTIVE`](/docs/2.x/under-the-hood/state#active).
Default value is `true`.
### `simultaneousHandlers`
-Accepts a react ref object or an array of refs to other handler components (refs should be created using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html)). When set, the handler will be allowed to [activate](/docs/under-the-hood/state#active) even if one or more of the handlers provided by their refs are in an [`ACTIVE`](/docs/under-the-hood/state#active) state. It will also prevent the provided handlers from [cancelling](/docs/under-the-hood/state#cancelled) the current handler when they [activate](/docs/under-the-hood/state#active). Read more in the [cross handler interaction](/docs/gesture-handlers/interactions#simultaneous-recognition) section.
+Accepts a react ref object or an array of refs to other handler components (refs should be created using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html)). When set, the handler will be allowed to [activate](/docs/2.x/under-the-hood/state#active) even if one or more of the handlers provided by their refs are in an [`ACTIVE`](/docs/2.x/under-the-hood/state#active) state. It will also prevent the provided handlers from [cancelling](/docs/2.x/under-the-hood/state#cancelled) the current handler when they [activate](/docs/2.x/under-the-hood/state#active). Read more in the [cross handler interaction](/docs/2.x/gesture-handlers/interactions#simultaneous-recognition) section.
### `waitFor`
-Accepts a react ref object or an array of refs to other handler components (refs should be created using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html)). When set the handler will not [activate](/docs/under-the-hood/state#active) as long as the handlers provided by their refs are in the [`BEGAN`](/docs/under-the-hood/state#began) state. Read more in the [cross handler interaction](/docs/gesture-handlers/interactions#awaiting-other-handlers) section.
+Accepts a react ref object or an array of refs to other handler components (refs should be created using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html)). When set the handler will not [activate](/docs/2.x/under-the-hood/state#active) as long as the handlers provided by their refs are in the [`BEGAN`](/docs/2.x/under-the-hood/state#began) state. Read more in the [cross handler interaction](/docs/2.x/gesture-handlers/interactions#awaiting-other-handlers) section.
### `hitSlop`
-This parameter enables control over what part of the connected view area can be used to [begin](/docs/under-the-hood/state#began) recognizing the gesture.
+This parameter enables control over what part of the connected view area can be used to [begin](/docs/2.x/under-the-hood/state#began) recognizing the gesture.
When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
Instead you can pass an object to specify how each boundary side should be reduced by providing different number of points for `left`, `right`, `top` or `bottom` sides.
@@ -74,17 +74,17 @@ This parameter allows to specify which cursor should be used when gesture activa
### `onGestureEvent`
-Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an [ACTIVE](/docs/under-the-hood/state#active) state. Event payload depends on the particular handler type. Common set of event data attributes is documented [below](#event-data) and handler specific attributes are documented on the corresponding handler pages. E.g. event payload for [`PinchGestureHandler`](/docs/gesture-handlers/rotation-gh#event-data) contains `scale` attribute that represents how the distance between fingers changed since when the gesture started.
+Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an [ACTIVE](/docs/2.x/under-the-hood/state#active) state. Event payload depends on the particular handler type. Common set of event data attributes is documented [below](#event-data) and handler specific attributes are documented on the corresponding handler pages. E.g. event payload for [`PinchGestureHandler`](/docs/2.x/gesture-handlers/rotation-gh#event-data) contains `scale` attribute that represents how the distance between fingers changed since when the gesture started.
Instead of a callback [`Animated.event`](https://reactnative.dev/docs/animated.html#event) object can be used. Also Animated events with `useNativeDriver` flag enabled **are fully supported**.
### `onHandlerStateChange`
-Takes a callback that is going to be triggered when [state](/docs/under-the-hood/state) of the given handler changes.
+Takes a callback that is going to be triggered when [state](/docs/2.x/under-the-hood/state) of the given handler changes.
The event payload contains the same payload as in case of [`onGestureEvent`](#ongestureevent) including handler specific event attributes some handlers may provide.
-In addition `onHandlerStateChange` event payload contains `oldState` attribute which represents the [state](/docs/under-the-hood/state) of the handler right before the change.
+In addition `onHandlerStateChange` event payload contains `oldState` attribute which represents the [state](/docs/2.x/under-the-hood/state) of the handler right before the change.
Instead of a callback [`Animated.event`](https://reactnative.dev/docs/animated.html#event) object can be used. Also Animated events with `useNativeDriver` flag enabled **are fully supported**.
@@ -94,7 +94,7 @@ This section describes the attributes of event object being provided to [`onGest
### `state`
-Current [state](/docs/under-the-hood/state) of the handler. Expressed as one of the constants exported under `State` object by the library. Refer to the section about [handler state](/docs/under-the-hood/state) to learn more about how to use it.
+Current [state](/docs/2.x/under-the-hood/state) of the handler. Expressed as one of the constants exported under `State` object by the library. Refer to the section about [handler state](/docs/2.x/under-the-hood/state) to learn more about how to use it.
### `numberOfPointers`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/create-native-wrapper.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/create-native-wrapper.md
similarity index 67%
rename from packages/docs-gesture-handler/docs/gesture-handlers/create-native-wrapper.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/create-native-wrapper.md
index aa84e63b37..1bd50a5485 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/create-native-wrapper.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/create-native-wrapper.md
@@ -6,7 +6,7 @@ sidebar_position: 13
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
Creates provided component with NativeViewGestureHandler, allowing it to be part of RNGH's
@@ -20,7 +20,7 @@ The component we want to wrap.
### config
-Config is an object with properties that can be used on [`NativeViewGestureHandler`](/docs/gesture-handlers/nativeview-gh)
+Config is an object with properties that can be used on [`NativeViewGestureHandler`](/docs/2.x/gesture-handlers/nativeview-gh)
## Returns
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/fling-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/fling-gh.md
similarity index 77%
rename from packages/docs-gesture-handler/docs/gesture-handlers/fling-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/fling-gh.md
index baedfc15e1..171f43087d 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/fling-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/fling-gh.md
@@ -6,18 +6,18 @@ sidebar_position: 9
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A discrete gesture handler that activates when the movement is sufficiently long and fast.
-Handler gets [ACTIVE](/docs/under-the-hood/state#active) when movement is sufficiently long and it does not take too much time.
-When handler gets activated it will turn into [END](/docs/under-the-hood/state#end) state when finger is released.
+Handler gets [ACTIVE](/docs/2.x/under-the-hood/state#active) when movement is sufficiently long and it does not take too much time.
+When handler gets activated it will turn into [END](/docs/2.x/under-the-hood/state#end) state when finger is released.
The handler will fail to recognize if the finger is lifted before being activated.
The handler is implemented using [UISwipeGestureRecognizer](https://developer.apple.com/documentation/uikit/uiswipegesturerecognizer) on iOS and from scratch on Android.
## Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to `FlingGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to `FlingGestureHandler` component:
### `direction`
@@ -39,7 +39,7 @@ Determine exact number of points required to handle the fling gesture.
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `FlingGestureHandler`:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `FlingGestureHandler`:
### `x`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/force-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/force-gh.md
similarity index 71%
rename from packages/docs-gesture-handler/docs/gesture-handlers/force-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/force-gh.md
index 6e23205984..110ca1780d 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/force-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/force-gh.md
@@ -6,11 +6,11 @@ sidebar_position: 11
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A continuous gesture handler that recognizes force of a touch. It allows for tracking pressure of touch on some iOS devices.
-The handler [activates](/docs/under-the-hood/state#active) when pressure of touch if greater or equal than `minForce`. It fails if pressure is greater than `maxForce`
+The handler [activates](/docs/2.x/under-the-hood/state#active) when pressure of touch if greater or equal than `minForce`. It fails if pressure is greater than `maxForce`
Gesture callback can be used for continuous tracking of the touch pressure. It provides information for one finger (the first one).
At the beginning of the gesture, the pressure factor is 0.0. As the pressure increases, the pressure factor increases proportionally. The maximum pressure is 1.0.
@@ -20,15 +20,15 @@ Since this behaviour is only provided on some iOS devices, this handler should n
# Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to `ForceTouchGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to `ForceTouchGestureHandler` component:
### `minForce`
-A minimal pressure that is required before handler can [activate](/docs/under-the-hood/state#active). Should be a value from range `[0.0, 1.0]`. Default is `0.2`.
+A minimal pressure that is required before handler can [activate](/docs/2.x/under-the-hood/state#active). Should be a value from range `[0.0, 1.0]`. Default is `0.2`.
### `maxForce`
-A maximal pressure that could be applied for handler. If the pressure is greater, handler [fails](/docs/under-the-hood/state#failed). Should be a value from range `[0.0, 1.0]`.
+A maximal pressure that could be applied for handler. If the pressure is greater, handler [fails](/docs/2.x/under-the-hood/state#failed). Should be a value from range `[0.0, 1.0]`.
### `feedbackOnActivation`
@@ -36,7 +36,7 @@ Boolean value defining if haptic feedback has to be performed on activation.
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `ForceTouchGestureHandler`:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `ForceTouchGestureHandler`:
### `force`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/interactions.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/interactions.md
similarity index 77%
rename from packages/docs-gesture-handler/docs/gesture-handlers/interactions.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/interactions.md
index 64b9636051..e225e0e2b0 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/interactions.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/interactions.md
@@ -6,10 +6,10 @@ sidebar_position: 3
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
-Gesture handlers can "communicate" with each other to support complex gestures and control how they _[activate](/docs/under-the-hood/state#active)_ in certain scenarios.
+Gesture handlers can "communicate" with each other to support complex gestures and control how they _[activate](/docs/2.x/under-the-hood/state#active)_ in certain scenarios.
There are two means of achieving that described in the sections below.
In each case, it is necessary to provide a reference of one handler as a property to the other.
@@ -17,17 +17,17 @@ Gesture handler relies on ref objects created using [`React.createRef()`](https:
## Simultaneous recognition
-By default, only one gesture handler is allowed to be in the [`ACTIVE`](/docs/under-the-hood/state#active) state.
-So when a gesture handler recognizes a gesture it [cancels](/docs/under-the-hood/state#cancelled) all other handlers in the [`BEGAN`](/docs/under-the-hood/state#began) state and prevents any new handlers from receiving a stream of touch events as long as it remains [`ACTIVE`](/docs/under-the-hood/state#active).
+By default, only one gesture handler is allowed to be in the [`ACTIVE`](/docs/2.x/under-the-hood/state#active) state.
+So when a gesture handler recognizes a gesture it [cancels](/docs/2.x/under-the-hood/state#cancelled) all other handlers in the [`BEGAN`](/docs/2.x/under-the-hood/state#began) state and prevents any new handlers from receiving a stream of touch events as long as it remains [`ACTIVE`](/docs/2.x/under-the-hood/state#active).
-This behavior can be altered using the [`simultaneousHandlers`](/docs/gesture-handlers/common-gh#simultaneoushandlers) property (available for all types of handlers).
+This behavior can be altered using the [`simultaneousHandlers`](/docs/2.x/gesture-handlers/common-gh#simultaneoushandlers) property (available for all types of handlers).
This property accepts a ref or an array of refs to other handlers.
-Handlers connected in this way will be allowed to remain in the [`ACTIVE`](/docs/under-the-hood/state#active) state at the same time.
+Handlers connected in this way will be allowed to remain in the [`ACTIVE`](/docs/2.x/under-the-hood/state#active) state at the same time.
### Use cases
Simultaneous recognition needs to be used when implementing a photo preview component that supports zooming (scaling) the photo, rotating and panning it while zoomed in.
-In this case we would use a [`PinchGestureHandler`](/docs/gesture-handlers/pinch-gh), [`RotationGestureHandler`](/docs/gesture-handlers/rotation-gh) and [`PanGestureHandler`](/docs/gesture-handlers/pan-gh) that would have to simultaneously recognize gestures.
+In this case we would use a [`PinchGestureHandler`](/docs/2.x/gesture-handlers/pinch-gh), [`RotationGestureHandler`](/docs/2.x/gesture-handlers/rotation-gh) and [`PanGestureHandler`](/docs/2.x/gesture-handlers/pan-gh) that would have to simultaneously recognize gestures.
### Example
@@ -75,7 +75,7 @@ class PinchableBox extends React.Component {
A good example where awaiting is necessary is when we want to have single and double tap handlers registered for one view (a button).
In such a case we need to make single tap handler await a double tap.
-Otherwise if we try to perform a double tap the single tap handler will fire just after we hit the button for the first time, consequently [cancelling](/docs/under-the-hood/state#cancelled) the double tap handler.
+Otherwise if we try to perform a double tap the single tap handler will fire just after we hit the button for the first time, consequently [cancelling](/docs/2.x/under-the-hood/state#cancelled) the double tap handler.
### Example
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/longpress-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/longpress-gh.md
similarity index 80%
rename from packages/docs-gesture-handler/docs/gesture-handlers/longpress-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/longpress-gh.md
index 2b2e751b99..4d01bab2a5 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/longpress-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/longpress-gh.md
@@ -6,18 +6,18 @@ sidebar_position: 7
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A discrete gesture handler that activates when the corresponding view is pressed for a sufficiently long time.
-This handler's state will turn into [END](/docs/under-the-hood/state#end) immediately after the finger is released.
+This handler's state will turn into [END](/docs/2.x/under-the-hood/state#end) immediately after the finger is released.
The handler will fail to recognize a touch event if the finger is lifted before the [minimum required time](#mindurationms) or if the finger is moved further than the [allowable distance](#maxdist).
The handler is implemented using [UILongPressGestureRecognizer](https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer) on iOS and [LongPressGestureHandler](https://github.com/software-mansion/react-native-gesture-handler/blob/main/android/src/main/java/com/swmansion/gesturehandler/core/LongPressGestureHandler.kt) on Android.
## Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to the `LongPressGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to the `LongPressGestureHandler` component:
### `minDurationMs`
@@ -25,11 +25,11 @@ Minimum time, expressed in milliseconds, that a finger must remain pressed on th
### `maxDist`
-Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the handler hasn't yet [activated](/docs/under-the-hood/state#active), it will fail to recognize the gesture. The default value is 10.
+Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active), it will fail to recognize the gesture. The default value is 10.
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to the `LongPressGestureHandler` component:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to the `LongPressGestureHandler` component:
### `x`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/nativeview-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/nativeview-gh.md
similarity index 64%
rename from packages/docs-gesture-handler/docs/gesture-handlers/nativeview-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/nativeview-gh.md
index 5c494c9bff..f8712a0d24 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/nativeview-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/nativeview-gh.md
@@ -6,17 +6,17 @@ sidebar_position: 12
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A gesture handler that allows other touch handling components to participate in
RNGH's gesture system.
-Used by [`createNativeWrapper()`](/docs/gesture-handlers/create-native-wrapper).
+Used by [`createNativeWrapper()`](/docs/2.x/gesture-handlers/create-native-wrapper).
## Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to `NativeViewGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to `NativeViewGestureHandler` component:
### `shouldActivateOnStart` (**Android only**)
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/pan-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pan-gh.md
similarity index 80%
rename from packages/docs-gesture-handler/docs/gesture-handlers/pan-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pan-gh.md
index d70c80cdd0..3cf8218652 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/pan-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pan-gh.md
@@ -6,12 +6,12 @@ sidebar_position: 5
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A continuous gesture handler that can recognize a panning (dragging) gesture and track its movement.
-The handler [activates](/docs/under-the-hood/state#active) when a finger is placed on the screen and moved some initial distance.
+The handler [activates](/docs/2.x/under-the-hood/state#active) when a finger is placed on the screen and moved some initial distance.
Configurations such as a minimum initial distance, specific vertical or horizontal pan detection and [number of fingers](#minPointers) required for activation (allowing for multifinger swipes) may be specified.
@@ -21,7 +21,7 @@ The handler is implemented using [UIPanGestureRecognizer](https://developer.appl
## Custom activation criteria
-The `PanGestureHandler` component exposes a number of properties that can be used to customize the criteria under which a handler will [activate](/docs/under-the-hood/state#active) or [fail](/docs/under-the-hood/state#fail) when recognizing a gesture.
+The `PanGestureHandler` component exposes a number of properties that can be used to customize the criteria under which a handler will [activate](/docs/2.x/under-the-hood/state#active) or [fail](/docs/2.x/under-the-hood/state#fail) when recognizing a gesture.
When more than one of such a property is set, `PanGestureHandler` expects all criteria to be met for successful recognition and at most one of the criteria to be overstepped to fail recognition.
For example when both [`minDeltaX`](#mindeltax) and [`minDeltaY`](#mindeltay) are set to 20 we expect the finger to travel by 20 points in both the X and Y axis before the handler activates.
@@ -46,19 +46,19 @@ If you wish to track the "center of mass" virtual pointer and account for its ch
## Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to `PanGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to `PanGestureHandler` component:
### `minDist`
-Minimum distance the finger (or multiple finger) need to travel before the handler [activates](/docs/under-the-hood/state#active). Expressed in points.
+Minimum distance the finger (or multiple finger) need to travel before the handler [activates](/docs/2.x/under-the-hood/state#active). Expressed in points.
### `minPointers`
-A number of fingers that is required to be placed before handler can [activate](/docs/under-the-hood/state#active). Should be a higher or equal to 0 integer.
+A number of fingers that is required to be placed before handler can [activate](/docs/2.x/under-the-hood/state#active). Should be a higher or equal to 0 integer.
### `maxPointers`
-When the given number of fingers is placed on the screen and handler hasn't yet [activated](/docs/under-the-hood/state#active) it will fail recognizing the gesture. Should be a higher or equal to 0 integer.
+When the given number of fingers is placed on the screen and handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active) it will fail recognizing the gesture. Should be a higher or equal to 0 integer.
### `activeOffsetX`
@@ -88,37 +88,37 @@ If only one number `p` is given a range of `(-inf, p)` will be used if `p` is hi
> This method is deprecated but supported for backward compatibility. Instead of using `maxDeltaX={N}` you can do `failOffsetX={[-N, N]}`.
-When the finger travels the given distance expressed in points along X axis and handler hasn't yet [activated](/docs/under-the-hood/state#active) it will fail recognizing the gesture.
+When the finger travels the given distance expressed in points along X axis and handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active) it will fail recognizing the gesture.
### `maxDeltaY`
> This method is deprecated but supported for backward compatibility. Instead of using `maxDeltaY={N}` you can do `failOffsetY={[-N, N]}`.
-When the finger travels the given distance expressed in points along Y axis and handler hasn't yet [activated](/docs/under-the-hood/state#active) it will fail recognizing the gesture.
+When the finger travels the given distance expressed in points along Y axis and handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active) it will fail recognizing the gesture.
### `minOffsetX`
> This method is deprecated but supported for backward compatibility. Instead of using `minOffsetX={N}` you can do `activeOffsetX={N}`.
-Minimum distance along X (in points) axis the finger (or multiple finger) need to travel before the handler [activates](/docs/under-the-hood/state#active). If set to a lower or equal to 0 value we expect the finger to travel "left" by the given distance. When set to a higher or equal to 0 number the handler will activate on a movement to the "right". If you wish for the movement direction to be ignored use [`minDeltaX`](#mindeltax) instead.
+Minimum distance along X (in points) axis the finger (or multiple finger) need to travel before the handler [activates](/docs/2.x/under-the-hood/state#active). If set to a lower or equal to 0 value we expect the finger to travel "left" by the given distance. When set to a higher or equal to 0 number the handler will activate on a movement to the "right". If you wish for the movement direction to be ignored use [`minDeltaX`](#mindeltax) instead.
### `minOffsetY`
> This method is deprecated but supported for backward compatibility. Instead of using `minOffsetY={N}` you can do `activeOffsetY={N}`.
-Minimum distance along Y (in points) axis the finger (or multiple finger) need to travel before the handler [activates](/docs/under-the-hood/state#active). If set to a lower or equal to 0 value we expect the finger to travel "up" by the given distance. When set to a higher or equal to 0 number the handler will activate on a movement to the "bottom". If you wish for the movement direction to be ignored use [`minDeltaY`](#mindeltay) instead.
+Minimum distance along Y (in points) axis the finger (or multiple finger) need to travel before the handler [activates](/docs/2.x/under-the-hood/state#active). If set to a lower or equal to 0 value we expect the finger to travel "up" by the given distance. When set to a higher or equal to 0 number the handler will activate on a movement to the "bottom". If you wish for the movement direction to be ignored use [`minDeltaY`](#mindeltay) instead.
### `minDeltaX`
> This method is deprecated but supported for backward compatibility. Instead of using `minDeltaX={N}` you can do `activeOffsetX={[-N, N]}`.
-Minimum distance along X (in points) axis the finger (or multiple finger) need to travel (left or right) before the handler [activates](/docs/under-the-hood/state#active). Unlike [`minoffsetx`](#minoffsetx) this parameter accepts only non-lower or equal to 0 numbers that represents the distance in point units. If you want for the handler to [activate](/docs/under-the-hood/state#active) for the movement in one particular direction use [`minOffsetX`](#minoffsetx) instead.
+Minimum distance along X (in points) axis the finger (or multiple finger) need to travel (left or right) before the handler [activates](/docs/2.x/under-the-hood/state#active). Unlike [`minoffsetx`](#minoffsetx) this parameter accepts only non-lower or equal to 0 numbers that represents the distance in point units. If you want for the handler to [activate](/docs/2.x/under-the-hood/state#active) for the movement in one particular direction use [`minOffsetX`](#minoffsetx) instead.
### `minDeltaY`
> This method is deprecated but supported for backward compatibility. Instead of using `minDeltaY={N}` you can do `activeOffsetY={[-N, N]}`.
-Minimum distance along Y (in points) axis the finger (or multiple finger) need to travel (top or bottom) before the handler [activates](/docs/under-the-hood/state#active). Unlike [`minOffsetY`](#minoffsety) this parameter accepts only non-lower or equal to 0 numbers that represents the distance in point units. If you want for the handler to [activate](/docs/under-the-hood/state#active) for the movement in one particular direction use [`minOffsetY`](#minoffsety) instead.
+Minimum distance along Y (in points) axis the finger (or multiple finger) need to travel (top or bottom) before the handler [activates](/docs/2.x/under-the-hood/state#active). Unlike [`minOffsetY`](#minoffsety) this parameter accepts only non-lower or equal to 0 numbers that represents the distance in point units. If you want for the handler to [activate](/docs/2.x/under-the-hood/state#active) for the movement in one particular direction use [`minOffsetY`](#minoffsety) instead.
### `avgTouches` (Android only)
@@ -130,7 +130,7 @@ Enables two-finger gestures on supported devices, for example iPads with trackpa
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `PanGestureHandler`:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `PanGestureHandler`:
### `translationX`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/pinch-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pinch-gh.md
similarity index 83%
rename from packages/docs-gesture-handler/docs/gesture-handlers/pinch-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pinch-gh.md
index adf4ae9442..c1b52f36d8 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/pinch-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/pinch-gh.md
@@ -6,11 +6,11 @@ sidebar_position: 10
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A continuous gesture handler that recognizes pinch gesture. It allows for tracking the distance between two fingers and use that information to scale or zoom your content.
-The handler [activates](/docs/under-the-hood/state#active) when fingers are placed on the screen and change their position.
+The handler [activates](/docs/2.x/under-the-hood/state#active) when fingers are placed on the screen and change their position.
Gesture callback can be used for continuous tracking of the pinch gesture. It provides information about velocity, anchor (focal) point of gesture and scale.
The distance between the fingers is reported as a scale factor. At the beginning of the gesture, the scale factor is 1.0. As the distance between the two fingers increases, the scale factor increases proportionally.
@@ -22,11 +22,11 @@ The handler is implemented using [UIPinchGestureRecognizer](https://developer.ap
## Properties
-Properties provided to `PinchGestureHandler` do not extend [common set of properties from base handler class](/docs/gesture-handlers/common-gh#properties).
+Properties provided to `PinchGestureHandler` do not extend [common set of properties from base handler class](/docs/2.x/gesture-handlers/common-gh#properties).
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `PinchGestureHandler`:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `PinchGestureHandler`:
### `scale`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/rotation-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/rotation-gh.md
similarity index 80%
rename from packages/docs-gesture-handler/docs/gesture-handlers/rotation-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/rotation-gh.md
index b6b20f931c..c43f798163 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/rotation-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/rotation-gh.md
@@ -6,12 +6,12 @@ sidebar_position: 8
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A continuous gesture handler that can recognize a rotation gesture and track its movement.
-The handler [activates](/docs/under-the-hood/state#active) when fingers are placed on the screen and change position in a proper way.
+The handler [activates](/docs/2.x/under-the-hood/state#active) when fingers are placed on the screen and change position in a proper way.
Gesture callback can be used for continuous tracking of the rotation gesture. It provides information about the gesture such as the amount rotated, the focal point of the rotation (anchor), and its instantaneous velocity.
@@ -19,11 +19,11 @@ The handler is implemented using [UIRotationGestureRecognizer](https://developer
## Properties
-Properties provided to `RotationGestureHandler` do not extend [common set of properties from base handler class](/docs/gesture-handlers/common-gh#properties).
+Properties provided to `RotationGestureHandler` do not extend [common set of properties from base handler class](/docs/2.x/gesture-handlers/common-gh#properties).
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `RotationGestureHandler`:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to `RotationGestureHandler`:
### `rotation`
diff --git a/packages/docs-gesture-handler/docs/gesture-handlers/tap-gh.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/tap-gh.md
similarity index 70%
rename from packages/docs-gesture-handler/docs/gesture-handlers/tap-gh.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/tap-gh.md
index c151632c03..349c1fab5f 100644
--- a/packages/docs-gesture-handler/docs/gesture-handlers/tap-gh.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gesture-handlers/tap-gh.md
@@ -6,7 +6,7 @@ sidebar_position: 6
---
:::warning
-The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information.
+The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/2.x/gestures/gesture) instead. Check out our [upgrading guide](/docs/2.x/guides/upgrading-to-2) for more information.
:::
A discrete gesture handler that recognizes one or many taps.
@@ -16,15 +16,15 @@ The fingers involved in these gestures must not move significantly from their in
The required number of taps and allowed distance from initial position may be configured.
For example, you might configure tap gesture recognizers to detect single taps, double taps, or triple taps.
-In order for a handler to [activate](/docs/under-the-hood/state#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDurationMs, and maxDelayMs (explained below) must be met. Immediately after the handler [activates](/docs/under-the-hood/state#active), it will [END](/docs/under-the-hood/state#end).
+In order for a handler to [activate](/docs/2.x/under-the-hood/state#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDurationMs, and maxDelayMs (explained below) must be met. Immediately after the handler [activates](/docs/2.x/under-the-hood/state#active), it will [END](/docs/2.x/under-the-hood/state#end).
## Properties
-See [set of properties inherited from base handler class](/docs/gesture-handlers/common-gh#properties). Below is a list of properties specific to the `TapGestureHandler` component:
+See [set of properties inherited from base handler class](/docs/2.x/gesture-handlers/common-gh#properties). Below is a list of properties specific to the `TapGestureHandler` component:
### `minPointers`
-Minimum number of pointers (fingers) required to be placed before the handler [activates](/docs/under-the-hood/state#active). Should be a positive integer. The default value is 1.
+Minimum number of pointers (fingers) required to be placed before the handler [activates](/docs/2.x/under-the-hood/state#active). Should be a positive integer. The default value is 1.
### `maxDurationMs`
@@ -36,23 +36,23 @@ Maximum time, expressed in milliseconds, that can pass before the next tap — i
### `numberOfTaps`
-Number of tap gestures required to [activate](/docs/under-the-hood/state#active) the handler. The default value is 1.
+Number of tap gestures required to [activate](/docs/2.x/under-the-hood/state#active) the handler. The default value is 1.
### `maxDeltaX`
-Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. If the finger travels further than the defined distance along the X axis and the handler hasn't yet [activated](/docs/under-the-hood/state#active), it will fail to recognize the gesture.
+Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. If the finger travels further than the defined distance along the X axis and the handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active), it will fail to recognize the gesture.
### `maxDeltaY`
-Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. If the finger travels further than the defined distance along the Y axis and the handler hasn't yet [activated](/docs/under-the-hood/state#active), it will fail to recognize the gesture.
+Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. If the finger travels further than the defined distance along the Y axis and the handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active), it will fail to recognize the gesture.
### `maxDist`
-Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. If the finger travels further than the defined distance and the handler hasn't yet [activated](/docs/under-the-hood/state#active), it will fail to recognize the gesture.
+Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. If the finger travels further than the defined distance and the handler hasn't yet [activated](/docs/2.x/under-the-hood/state#active), it will fail to recognize the gesture.
## Event data
-See [set of event attributes from base handler class](/docs/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to the `TapGestureHandler` component:
+See [set of event attributes from base handler class](/docs/2.x/gesture-handlers/common-gh#event-data). Below is a list of gesture event attributes specific to the `TapGestureHandler` component:
### `x`
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_category_.json b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_category_.json
new file mode 100644
index 0000000000..26dbe96e2b
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "Gestures",
+ "position": 3,
+ "link": {
+ "type": "generated-index"
+ }
+}
diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-callbacks.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-continuous-gesture-callbacks.md
similarity index 100%
rename from packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-callbacks.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-continuous-gesture-callbacks.md
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-continuous-gesture-config.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-continuous-gesture-config.md
new file mode 100644
index 0000000000..f829d626e9
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-continuous-gesture-config.md
@@ -0,0 +1,5 @@
+### Properties common to all continuous gestures:
+
+### `manualActivation(value: boolean)`
+
+When `true` the handler will not activate by itself even if its activation criteria are met. Instead you can manipulate its state using [state manager](/docs/2.x/gestures/state-manager/).
diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-callbacks.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-callbacks.md
similarity index 100%
rename from packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-callbacks.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-callbacks.md
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-config.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-config.md
new file mode 100644
index 0000000000..6a39d4cb75
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-config.md
@@ -0,0 +1,68 @@
+### Properties common to all gestures:
+
+### `enabled(value: boolean)`
+
+Indicates whether the given handler should be analyzing stream of touch events or not.
+When set to `false` we can be sure that the handler's state will **never** become [`ACTIVE`](/docs/2.x/fundamentals/states-events#active).
+If the value gets updated while the handler already started recognizing a gesture, then the handler's state it will immediately change to [`FAILED`](/docs/2.x/fundamentals/states-events#failed) or [`CANCELLED`](/docs/2.x/fundamentals/states-events#cancelled) (depending on its current state).
+Default value is `true`.
+
+### `shouldCancelWhenOutside(value: boolean)`
+
+When `true` the handler will [cancel](/docs/2.x/fundamentals/states-events#cancelled) or [fail](/docs/2.x/fundamentals/states-events#failed) recognition (depending on its current state) whenever the finger leaves the area of the connected view.
+Default value of this property is different depending on the handler type.
+Most handlers' `shouldCancelWhenOutside` property defaults to `false` except for the [`LongPressGesture`](/docs/2.x/gestures/long-press-gesture) and [`TapGesture`](/docs/2.x/gestures/tap-gesture) which default to `true`.
+
+### `hitSlop(settings)`
+
+This parameter enables control over what part of the connected view area can be used to [begin](/docs/2.x/fundamentals/states-events#began) recognizing the gesture.
+When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
+
+Instead you can pass an object to specify how each boundary side should be reduced by providing different number of points for `left`, `right`, `top` or `bottom` sides.
+You can alternatively provide `horizontal` or `vertical` instead of specifying directly `left`, `right` or `top` and `bottom`.
+Finally, the object can also take `width` and `height` attributes.
+When `width` is set it is only allow to specify one of the sides `right` or `left`.
+Similarly when `height` is provided only `top` or `bottom` can be set.
+Specifying `width` or `height` is useful if we only want the gesture to activate on the edge of the view. In which case for example we can set `left: 0` and `width: 20` which would make it possible for the gesture to be recognize when started no more than 20 points from the left edge.
+
+**IMPORTANT:** Note that this parameter is primarily designed to reduce the area where gesture can activate. Hence it is only supported for all the values (except `width` and `height`) to be non positive (0 or lower). Although on Android it is supported for the values to also be positive and therefore allow to expand beyond view bounds but not further than the parent view bounds. To achieve this effect on both platforms you can use React Native's View [hitSlop](https://reactnative.dev/docs/view.html#hitslop) property.
+
+### `withRef(ref)`
+
+Sets a ref to the gesture object, allowing for interoperability with the old
+API.
+
+### `withTestId(testID)`
+
+Sets a `testID` property for gesture object, allowing for querying for it in tests.
+
+### `cancelsTouchesInView(value)` (**iOS only**)
+
+Accepts a boolean value.
+When `true`, the gesture will cancel touches for native UI components (`UIButton`, `UISwitch`, etc) it's attached to when it becomes [`ACTIVE`](/docs/2.x/fundamentals/states-events#active).
+Default value is `true`.
+
+### `runOnJS(value: boolean)`
+
+When `react-native-reanimated` is installed, the callbacks passed to the gestures are automatically workletized and run on the UI thread when called. This option allows for changing this behavior: when `true`, all the callbacks will be run on the JS thread instead of the UI thread, regardless of whether they are worklets or not.
+Defaults to `false`.
+
+### `simultaneousWithExternalGesture(otherGesture1, otherGesture2, ...)`
+
+Adds a gesture that should be recognized simultaneously with this one.
+
+**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/2.x/fundamentals/gesture-composition). [`GestureDetector`](/docs/2.x/gestures/gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized.
+
+### `requireExternalGestureToFail(otherGesture1, otherGesture2, ...)`
+
+Adds a relation requiring another gesture to fail, before this one can activate.
+
+### `blocksExternalGesture(otherGesture1, otherGesture2, ...)`
+
+Adds a relation that makes other gestures wait with activation until this gesture fails (or doesn't start at all).
+
+**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/2.x/fundamentals/gesture-composition).[`GestureDetector`](/docs/2.x/gestures/gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized.
+
+### `activeCursor(value)` (Web only)
+
+This parameter allows to specify which cursor should be used when gesture activates. Supports all CSS cursor values (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`.
diff --git a/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-event-data.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-event-data.md
new file mode 100644
index 0000000000..674f2fb478
--- /dev/null
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/base-gesture-event-data.md
@@ -0,0 +1,19 @@
+### Event attributes common to all gestures:
+
+### `state`
+
+Current [state](/docs/2.x/fundamentals/states-events) of the handler. Expressed as one of the constants exported under `State` object by the library.
+
+### `numberOfPointers`
+
+Represents the number of pointers (fingers) currently placed on the screen.
+
+### `pointerType`
+
+Indicates the type of pointer device in use. This value is represented by the `PointerType` enum, which includes the following fields:
+
+- `TOUCH` - represents finger
+- `STYLUS` - represents stylus or digital pen
+- `MOUSE` - represents computer mouse
+- `KEY` - represents keyboard
+- `OTHER` - represents unknown device type that is not relevant
diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/gesture-detector-functional1.md
similarity index 100%
rename from packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/_shared/gesture-detector-functional1.md
diff --git a/packages/docs-gesture-handler/docs/gestures/composed-gestures.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/composed-gestures.md
similarity index 88%
rename from packages/docs-gesture-handler/docs/gestures/composed-gestures.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/composed-gestures.md
index f9fd18f36a..5eb0ef45c5 100644
--- a/packages/docs-gesture-handler/docs/gestures/composed-gestures.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/composed-gestures.md
@@ -5,7 +5,7 @@ sidebar_label: Composed gestures
sidebar_position: 13
---
-Composed gestures (`Race`, `Simultaneous`, `Exclusive`) provide a simple way of building relations between gestures. See [Gesture Composition](/docs/fundamentals/gesture-composition) for more details.
+Composed gestures (`Race`, `Simultaneous`, `Exclusive`) provide a simple way of building relations between gestures. See [Gesture Composition](/docs/2.x/fundamentals/gesture-composition) for more details.
## Reference
diff --git a/packages/docs-gesture-handler/docs/gestures/fling-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
similarity index 94%
rename from packages/docs-gesture-handler/docs/gestures/fling-gesture.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
index fef89e4868..58a6812429 100644
--- a/packages/docs-gesture-handler/docs/gestures/fling-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/fling-gesture.md
@@ -30,8 +30,8 @@ import BaseEventConfig from './\_shared/base-gesture-config.md';
import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md';
A discrete gesture that activates when the movement is sufficiently long and fast.
-Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is sufficiently long and it does not take too much time.
-When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released.
+Gesture gets [ACTIVE](/docs/2.x/fundamentals/states-events#active) when movement is sufficiently long and it does not take too much time.
+When gesture gets activated it will turn into [END](/docs/2.x/fundamentals/states-events#end) state when finger is released.
The gesture will fail to recognize if the finger is lifted before being activated.
+
+
+
+
+
+ 
+
+
+ Expo
+
+
diff --git a/packages/docs-gesture-handler/docs/gestures/force-touch-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/force-touch-gesture.md
similarity index 84%
rename from packages/docs-gesture-handler/docs/gestures/force-touch-gesture.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/force-touch-gesture.md
index d3f85e6edd..8227c7dea2 100644
--- a/packages/docs-gesture-handler/docs/gestures/force-touch-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/force-touch-gesture.md
@@ -16,7 +16,7 @@ import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md';
import BaseContinuousEventCallbacks from './\_shared/base-continuous-gesture-callbacks.md';
A continuous gesture that recognizes force of a touch. It allows for tracking pressure of touch on some iOS devices.
-The gesture [activates](/docs/fundamentals/states-events#active) when pressure of touch is greater than or equal to `minForce`. It fails if pressure is greater than `maxForce`.
+The gesture [activates](/docs/2.x/fundamentals/states-events#active) when pressure of touch is greater than or equal to `minForce`. It fails if pressure is greater than `maxForce`.
Gesture callback can be used for continuous tracking of the touch pressure. It provides information for one finger (the first one).
At the beginning of the gesture, the pressure factor is 0.0. As the pressure increases, the pressure factor increases proportionally. The maximum pressure is 1.0.
@@ -47,11 +47,11 @@ function App() {
### `minForce(value: number)`
-A minimal pressure that is required before gesture can [activate](/docs/fundamentals/states-events#active). Should be a value from range `[0.0, 1.0]`. Default is `0.2`.
+A minimal pressure that is required before gesture can [activate](/docs/2.x/fundamentals/states-events#active). Should be a value from range `[0.0, 1.0]`. Default is `0.2`.
### `maxForce(value: number)`
-A maximal pressure that could be applied for gesture. If the pressure is greater, gesture [fails](/docs/fundamentals/states-events#failed). Should be a value from range `[0.0, 1.0]`.
+A maximal pressure that could be applied for gesture. If the pressure is greater, gesture [fails](/docs/2.x/fundamentals/states-events#failed). Should be a value from range `[0.0, 1.0]`.
### `feedbackOnActivation(value: boolean)`
diff --git a/packages/docs-gesture-handler/docs/gestures/gesture-detector.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture-detector.md
similarity index 93%
rename from packages/docs-gesture-handler/docs/gestures/gesture-detector.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture-detector.md
index cd8ca83a7d..a4184af36b 100644
--- a/packages/docs-gesture-handler/docs/gestures/gesture-detector.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture-detector.md
@@ -35,7 +35,7 @@ A gesture object containing the configuration and callbacks. Can be any of the b
:::info
GestureDetector will decide whether to use Reanimated to process provided gestures based on callbacks they have. If any of the callbacks is a worklet, tools provided by the Reanimated will be utilized bringing ability to handle gestures synchronously.
-Starting with Reanimated 2.3.0 Gesture Handler will provide a [StateManager](/docs/gestures/state-manager) in the [touch events](/docs/gestures/touch-events) that allows for managing the state of the gesture.
+Starting with Reanimated 2.3.0 Gesture Handler will provide a [StateManager](/docs/2.x/gestures/state-manager) in the [touch events](/docs/2.x/gestures/touch-events) that allows for managing the state of the gesture.
:::
### `userSelect` (Web only)
@@ -66,7 +66,9 @@ Specifies whether context menu should be enabled after clicking on underlying vi
- {/* Don't do this! */}
+
+ {' '}
+ {/* Don't do this! */}
diff --git a/packages/docs-gesture-handler/docs/gestures/gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture.md
similarity index 66%
rename from packages/docs-gesture-handler/docs/gestures/gesture.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture.md
index 08bc5888d7..94454ad961 100644
--- a/packages/docs-gesture-handler/docs/gestures/gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/gesture.md
@@ -26,43 +26,43 @@ function App() {
### Gesture.Tap()
-Creates a new instance of [`TapGesture`](/docs/gestures/tap-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`TapGesture`](/docs/2.x/gestures/tap-gesture) with its default config and no callbacks.
### Gesture.Pan()
-Creates a new instance of [`PanGesture`](/docs/gestures/pan-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`PanGesture`](/docs/2.x/gestures/pan-gesture) with its default config and no callbacks.
### Gesture.LongPress()
-Creates a new instance of [`LongPressGesture`](/docs/gestures/long-press-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`LongPressGesture`](/docs/2.x/gestures/long-press-gesture) with its default config and no callbacks.
### Gesture.Fling()
-Creates a new instance of [`FlingGesture`](/docs/gestures/fling-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`FlingGesture`](/docs/2.x/gestures/fling-gesture) with its default config and no callbacks.
### Gesture.Pinch()
-Creates a new instance of [`PinchGesture`](/docs/gestures/pinch-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`PinchGesture`](/docs/2.x/gestures/pinch-gesture) with its default config and no callbacks.
### Gesture.Rotation()
-Creates a new instance of [`RotationGesture`](/docs/gestures/rotation-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`RotationGesture`](/docs/2.x/gestures/rotation-gesture) with its default config and no callbacks.
### Gesture.Hover()
-Creates a new instance of [`HoverGesture`](/docs/gestures/hover-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`HoverGesture`](/docs/2.x/gestures/hover-gesture) with its default config and no callbacks.
### Gesture.ForceTouch()
-Creates a new instance of [`ForceTouchGesture`](/docs/gestures/force-touch-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`ForceTouchGesture`](/docs/2.x/gestures/force-touch-gesture) with its default config and no callbacks.
### Gesture.Manual()
-Creates a new instance of [`ManualGesture`](/docs/gestures/manual-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`ManualGesture`](/docs/2.x/gestures/manual-gesture) with its default config and no callbacks.
### Gesture.Native()
-Creates a new instance of [`NativeGesture`](/docs/gestures/native-gesture.md) with its default config and no callbacks.
+Creates a new instance of [`NativeGesture`](/docs/2.x/gestures/native-gesture) with its default config and no callbacks.
### Gesture.Race(gesture1, gesture2, gesture3, ...): ComposedGesture
diff --git a/packages/docs-gesture-handler/docs/gestures/hover-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
similarity index 92%
rename from packages/docs-gesture-handler/docs/gestures/hover-gesture.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
index 5ad5628dca..6b794fd4bf 100644
--- a/packages/docs-gesture-handler/docs/gestures/hover-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/hover-gesture.md
@@ -59,10 +59,9 @@ function App() {
}
```
-
## Remarks
-- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture).
+- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/2.x/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/2.x/gestures/pan-gesture).
## Config
@@ -95,11 +94,11 @@ Defaults to `HoverEffect.None`
### `x`
-X coordinate of the current position of the pointer relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). Expressed in point units.
+X coordinate of the current position of the pointer relative to the view attached to the [`GestureDetector`](/docs/2.x/gestures/gesture-detector). Expressed in point units.
### `y`
-Y coordinate of the current position of the pointer relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). Expressed in point units.
+Y coordinate of the current position of the pointer relative to the view attached to the [`GestureDetector`](/docs/2.x/gestures/gesture-detector). Expressed in point units.
### `absoluteX`
diff --git a/packages/docs-gesture-handler/docs/gestures/long-press-gesture.md b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
similarity index 84%
rename from packages/docs-gesture-handler/docs/gestures/long-press-gesture.md
rename to packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
index f92814e255..61f5431703 100644
--- a/packages/docs-gesture-handler/docs/gestures/long-press-gesture.md
+++ b/packages/docs-gesture-handler/versioned_docs/version-2.x/gestures/long-press-gesture.md
@@ -30,8 +30,8 @@ import BaseEventConfig from './\_shared/base-gesture-config.md';
import BaseEventCallbacks from './\_shared/base-gesture-callbacks.md';
A discrete gesture that activates when the corresponding view is pressed for a sufficiently long time.
-This gesture's state will turn into [END](/docs/fundamentals/states-events#end) immediately after the finger is released.
-The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/gestures/long-press-gesture#maxdistancevalue-number).
+This gesture's state will turn into [END](/docs/2.x/fundamentals/states-events#end) immediately after the finger is released.
+The gesture will fail to recognize a touch event if the finger is lifted before the [minimum required time](/docs/2.x/gestures/long-press-gesture#mindurationvalue-number) or if the finger is moved further than the [allowable distance](/docs/2.x/gestures/long-press-gesture#maxdistancevalue-number).