Skip to content

@relextm19/docs examples #4090

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Closed
relextm19 wants to merge 6 commits into from
Closed

@relextm19/docs examples #4090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5736594
updated pan gesture view and pan gesture example to use v3 api
Apr 14, 2026
f201788
removed videos and migarted examples in all gesture pages
Apr 14, 2026
8598093
not using the GestureBasicSrc files other than for legacy and simplif…
Apr 14, 2026
6e2f843
fixed pinch gesture example
Apr 15, 2026
3eb98c2
updated legacy a
Apr 15, 2026
4ef9b94
fixed inconsitent container sizes
Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
plugins: ['react-native-reanimated/plugin'],
plugins: ['react-native-worklets/plugin'],
};
17 changes: 2 additions & 15 deletions packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,15 @@ sidebar_label: Fling gesture
sidebar_position: 6
---

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';
import { webContainer } from '@site/src/utils/getGestureStyles';

import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';


import MouseButtonProp from './\_shared/mouse-button.mdx';

<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<FlingGestureBasic/>}
src={FlingGestureBasicSrc}
Expand All @@ -37,12 +30,6 @@ The gesture that tracks quick, sufficiently long movement in specified [directio
When the gesture gets activated it will end when the finger is released.
The gesture will fail if the finger is lifted before the gesture could activate.

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
15 changes: 1 addition & 14 deletions packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,12 @@ sidebar_label: Hover gesture
sidebar_position: 7
---

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';
import { webContainer } from '@site/src/utils/getGestureStyles';

import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';

<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<HoverGestureBasic/>}
src={HoverGestureBasicSrc}
Expand All @@ -35,12 +28,6 @@ Gesture that can recognize hovering above the view it's attached to. The hover e

On iOS additional [visual effects](#effect-ios-only) may be configured.

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
</video>
</div>

:::note
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`](/docs/gestures/use-pan-gesture) gesture.
:::
Expand Down
15 changes: 1 addition & 14 deletions packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,14 @@ sidebar_label: Long press gesture
sidebar_position: 3
---

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';
import { webContainer } from '@site/src/utils/getGestureStyles';

import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';

import MouseButtonProp from './\_shared/mouse-button.mdx';

<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<LongPressGestureBasic/>}
src={LongPressGestureBasicSrc}
Expand All @@ -38,12 +31,6 @@ Gesture that activates when the corresponding view is pressed for a sufficiently
This gesture will deactivate 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](#minduration) or if the finger is moved further than the [allowable distance](#maxdistance).

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
13 changes: 1 addition & 12 deletions packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
import useBaseUrl from '@docusaurus/useBaseUrl';

import PanGestureBasic from '@site/static/examples/PanGestureBasic';
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';

import BaseEventData from './\_shared/base-gesture-event-data.mdx';
import BaseGestureConfig from './\_shared/base-gesture-config.mdx';
Expand All @@ -21,11 +21,6 @@ import SharedValueInfo from './\_shared/shared-value-info.md';
import MouseButtonProp from './\_shared/mouse-button.mdx';

<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<PanGestureBasic/>}
src={PanGestureBasicSrc}
Expand All @@ -41,12 +36,6 @@ Configurations such as a minimum initial distance, specific vertical or horizont

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.

<div className={appearOnMobile} style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
17 changes: 2 additions & 15 deletions packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,12 @@ sidebar_label: Pinch gesture
sidebar_position: 5
---

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';
import { webContainer } from '@site/src/utils/getGestureStyles';

import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';

Comment on lines 10 to 12
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This page documents usePinchGesture, but the raw-loader PinchGestureBasicSrc import now points at static/examples/PinchGestureBasic, whose implementation currently uses a pan gesture. Update the imported example (or the example implementation) so the displayed code and interactive demo actually use usePinchGesture.

Copilot uses AI. Check for mistakes.
<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<PinchGestureBasic/>}
src={PinchGestureBasicSrc}
Expand Down Expand Up @@ -45,12 +38,6 @@ For example, map views use pinch gestures to change the zoom level of the map.
When implementing pinch based on focal point, make sure to use it after the gesture had activated, i.e. in `onActivate` or `onUpdate` callbacks. Using it in `onBegin` may lead to unexpected behavior.
:::

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
17 changes: 2 additions & 15 deletions packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,12 @@ sidebar_label: Rotation gesture
sidebar_position: 4
---

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';
import { webContainer } from '@site/src/utils/getGestureStyles';

import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';

Comment on lines 10 to 12
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This page documents useRotationGesture, but the RotationGestureBasicSrc raw-loader import now points at static/examples/RotationGestureBasic, whose implementation currently uses a pan gesture. The interactive example/source shown on the page should demonstrate useRotationGesture to match the API and event data described here.

Copilot uses AI. Check for mistakes.
<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<RotationGestureBasic/>}
src={RotationGestureBasicSrc}
Expand All @@ -42,12 +35,6 @@ The gesture activates when fingers are placed on the screen and rotate around a
When implementing rotation based on `anchor` point, make sure to use it after the gesture had activated, i.e. in `onActivate` or `onUpdate` callbacks. Using it in `onBegin` may lead to unexpected behavior.
:::

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
11 changes: 0 additions & 11 deletions packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,6 @@ import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBas
import MouseButtonProp from './\_shared/mouse-button.mdx';

<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
</video>
</div>
<InteractiveExample
component={<TapGestureBasic/>}
src={TapGestureBasicSrc}
Expand All @@ -41,12 +36,6 @@ For example, you might configure tap gesture recognizers to detect single taps,

In order for a gesture to activate, the specified gesture requirements such as [`minPointers`](#minpointers), [`numberOfTaps`](#numberoftaps), [`maxDistance`](#maxdistance), [`maxDuration`](#maxduration), and [`maxDelay`](#maxdelay) must be met.

<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
</video>
</div>

## Example

<CollapsibleCode
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/legacy-gestures/fling-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
import useBaseUrl from '@docusaurus/useBaseUrl';

import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';

Comment on lines 12 to 14
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This is a legacy gestures / Old API page, but FlingGestureBasicSrc now raw-loads static/examples/FlingGestureBasic (hook-based v3). The embedded source/demo will contradict the Gesture.Fling() sample and v2-info note on this page. Import a v2 example source file here instead.

Copilot uses AI. Check for mistakes.
import OldAPIInfo from './\_shared/v2-info.md'

Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/legacy-gestures/pan-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
import useBaseUrl from '@docusaurus/useBaseUrl';

import PanGestureBasic from '@site/static/examples/PanGestureBasic';
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';

Comment on lines 16 to 18
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This is a legacy gestures / Old API page (v2-info.md), but the raw-loader import now points to the hook-based v3 example (static/examples/PanGestureBasic). That makes the embedded source/demo inconsistent with the old-API text and Gesture.Pan() sample below. Import a v2 example source file for legacy docs instead.

Copilot uses AI. Check for mistakes.
<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/legacy-gestures/pinch-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
import useBaseUrl from '@docusaurus/useBaseUrl';

import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';
import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasic';

Comment on lines 16 to 18
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This is a legacy gestures / Old API page (v2-info.md), but the raw-loader import now points to the hook-based v3 example (static/examples/PinchGestureBasic). That makes the embedded source/demo contradict the “Old API” content and the Gesture.* code sample below. Import a v2 example source file for legacy docs instead of the v3 hook example.

Copilot uses AI. Check for mistakes.
<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/legacy-gestures/rotation-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
import useBaseUrl from '@docusaurus/useBaseUrl';

import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';
import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasic';

Comment on lines 16 to 18
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

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

This is a legacy gestures / Old API page (v2-info.md), but the raw-loader import now points to the hook-based v3 example (static/examples/RotationGestureBasic). The embedded source/demo will not match the old-API content and Gesture.Rotation() sample on the page. Import a v2 example source file here instead.

Copilot uses AI. Check for mistakes.
<div className={webContainer}>
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
Expand Down
10 changes: 5 additions & 5 deletions packages/docs-gesture-handler/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@
"react-dom": "19.1.1",
"react-draggable": "^4.4.5",
"react-native": "0.83.0",
"react-native-gesture-handler": "^2.24.0",
"react-native-reanimated": "4.0.0-nightly-20250325-d67e51599",
"react-native-web": "^0.18.12",
"react-native-worklets": "^0.1.0",
"react-native-gesture-handler": "3.0.0-beta.2",
"react-native-reanimated": "4.3.0",
"react-native-web": "0.21.2",
"react-native-worklets": "0.8.1",
"source-map": "^0.7.4",
"source-map-loader": "^4.0.1",
"usehooks-ts": "^2.9.1",
Expand Down Expand Up @@ -86,4 +86,4 @@
"webpackbar": "^7.0.0"
},
"packageManager": "yarn@1.22.22"
}
}
15 changes: 8 additions & 7 deletions packages/docs-gesture-handler/static/examples/FlingGestureBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import {
Directions,
Gesture,
GestureDetector,
GestureHandlerRootView,
useFlingGesture,
} from 'react-native-gesture-handler';
import { StyleSheet, View } from 'react-native';
import Animated, {
Expand Down Expand Up @@ -49,12 +49,12 @@ export default function App() {
};
}, []);

const fling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.onBegin((event) => {
const fling = useFlingGesture({
direction: Directions.LEFT | Directions.RIGHT,
onBegin: (event) => {
startTranslateX.value = event.x;
})
.onStart((event) => {
},
onActivate: (event) => {
translateX.value = withTiming(
clamp(
translateX.value + event.x - startTranslateX.value,
Expand All @@ -63,7 +63,8 @@ export default function App() {
),
{ duration: 200 }
);
});
},
});

const boxAnimatedStyles = useAnimatedStyle(() => ({
transform: [{ translateX: translateX.value }],
Expand Down
Loading
Loading