Skip to content

Commit 778d4c2

Browse files
relextm19Mateusz KiełbCopilotm-bert
authored
[docs] Update examples (#4091)
## Description Updated docs examples for v2 and v3 api. Removed videos from docs. <!-- Description and motivation for this PR. --> ## Test plan Manually tested changes <!-- --> --------- Co-authored-by: Mateusz Kiełb <mateuszkielb@Mateusz-Kiebs-MacBook-Pro.local> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>
1 parent 79c9709 commit 778d4c2

53 files changed

Lines changed: 1265 additions & 2776 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/docs-gesture-handler/babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3-
plugins: ['react-native-reanimated/plugin'],
3+
plugins: ['react-native-worklets/plugin'],
44
};

‎packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,15 @@ sidebar_label: Fling gesture
55
sidebar_position: 6
66
---
77

8-
import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
9-
10-
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import { webContainer } from '@site/src/utils/getGestureStyles';
119

1210
import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
13-
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
11+
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasic';
1412

1513

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

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

40-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
41-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
42-
<source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
43-
</video>
44-
</div>
45-
4633
## Example
4734

4835
<CollapsibleCode

‎packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,12 @@ sidebar_label: Hover gesture
55
sidebar_position: 7
66
---
77

8-
import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
9-
10-
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import { webContainer } from '@site/src/utils/getGestureStyles';
119

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

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

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

38-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
39-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
40-
<source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
41-
</video>
42-
</div>
43-
4431
:::note
4532
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.
4633
:::

‎packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,14 @@ sidebar_label: Long press gesture
55
sidebar_position: 3
66
---
77

8-
import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
9-
10-
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import { webContainer } from '@site/src/utils/getGestureStyles';
119

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

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

1715
<div className={webContainer}>
18-
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
19-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
20-
<source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
21-
</video>
22-
</div>
2316
<InteractiveExample
2417
component={<LongPressGestureBasic/>}
2518
src={LongPressGestureBasicSrc}
@@ -38,12 +31,6 @@ Gesture that activates when the corresponding view is pressed for a sufficiently
3831
This gesture will deactivate immediately after the finger is released.
3932
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).
4033

41-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
42-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
43-
<source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
44-
</video>
45-
</div>
46-
4734
## Example
4835

4936
<CollapsibleCode

‎packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/ge
1010
import useBaseUrl from '@docusaurus/useBaseUrl';
1111

1212
import PanGestureBasic from '@site/static/examples/PanGestureBasic';
13-
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';
13+
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasic';
1414

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

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

4237
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.
4338

44-
<div className={appearOnMobile} style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
45-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
46-
<source src={useBaseUrl("/video/pan.mp4")} type="video/mp4"/>
47-
</video>
48-
</div>
49-
5039
## Example
5140

5241
<CollapsibleCode

‎packages/docs-gesture-handler/docs/gestures/use-pinch-gesture.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,12 @@ sidebar_label: Pinch gesture
55
sidebar_position: 5
66
---
77

8-
import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
9-
10-
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import { webContainer } from '@site/src/utils/getGestureStyles';
119

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

1513
<div className={webContainer}>
16-
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
17-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
18-
<source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
19-
</video>
20-
</div>
2114
<InteractiveExample
2215
component={<PinchGestureBasic/>}
2316
src={PinchGestureBasicSrc}
@@ -45,12 +38,6 @@ For example, map views use pinch gestures to change the zoom level of the map.
4538
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.
4639
:::
4740

48-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
49-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
50-
<source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
51-
</video>
52-
</div>
53-
5441
## Example
5542

5643
<CollapsibleCode

‎packages/docs-gesture-handler/docs/gestures/use-rotation-gesture.mdx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,12 @@ sidebar_label: Rotation gesture
55
sidebar_position: 4
66
---
77

8-
import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';
9-
10-
import useBaseUrl from '@docusaurus/useBaseUrl';
8+
import { webContainer } from '@site/src/utils/getGestureStyles';
119

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

1513
<div className={webContainer}>
16-
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
17-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
18-
<source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
19-
</video>
20-
</div>
2114
<InteractiveExample
2215
component={<RotationGestureBasic/>}
2316
src={RotationGestureBasicSrc}
@@ -42,12 +35,6 @@ The gesture activates when fingers are placed on the screen and rotate around a
4235
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.
4336
:::
4437

45-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
46-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
47-
<source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
48-
</video>
49-
</div>
50-
5138
## Example
5239

5340
<CollapsibleCode

‎packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@ import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBas
1515
import MouseButtonProp from './\_shared/mouse-button.mdx';
1616

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

4237
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.
4338

44-
<div className={appearOnMobile} style={{ display: 'flex', justifyContent: 'center' }}>
45-
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
46-
<source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
47-
</video>
48-
</div>
49-
5039
## Example
5140

5241
<CollapsibleCode

‎packages/docs-gesture-handler/docs/legacy-gestures/composed-gestures.md‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)