Skip to content
New issue

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

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

Add examples to Gestures section in docs #2876

Merged
merged 24 commits into from
May 7, 2024
Merged

Add examples to Gestures section in docs #2876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
6192535
adding interactive examples
xnameTM Apr 23, 2024
f5231ba
ctrl c + ctrl v = snack-helper
xnameTM Apr 23, 2024
1af8f85
lint
xnameTM Apr 23, 2024
1f3f955
reformatting gestures markdowns
xnameTM Apr 24, 2024
e3f331e
adding cursors & fixing touches
xnameTM Apr 24, 2024
725998c
adding bounds in pan gesture
xnameTM Apr 24, 2024
8288769
swm brand colors in tap gesture
xnameTM Apr 24, 2024
b973405
long press gesture edit
xnameTM Apr 24, 2024
50d92af
reducing height of pinch & pan gestures
xnameTM Apr 24, 2024
e49e9d5
fixing md
xnameTM Apr 24, 2024
dc639a9
fling bounces
xnameTM Apr 24, 2024
56748f3
fixing rotation example
xnameTM Apr 24, 2024
fd1bbb9
prettier
xnameTM Apr 24, 2024
c523529
changing colors
xnameTM Apr 24, 2024
d2b0e76
responsiveness for elements in docs
xnameTM Apr 25, 2024
1fb9652
fixing pan src
xnameTM Apr 25, 2024
533981b
changing worklet with runOnJS
xnameTM Apr 25, 2024
67c36df
adding interpolateColor to TapGesture
xnameTM Apr 25, 2024
dd5d467
adding hover gesture color interpolation
xnameTM Apr 25, 2024
999c6fd
Merge branch 'main' into @xnameTM/adding-interactive-examples
xnameTM Apr 26, 2024
f8dcb9a
Merge branch 'main' into @xnameTM/adding-interactive-examples
xnameTM Apr 26, 2024
c0a5d21
Merge branch 'main' into @xnameTM/adding-interactive-examples
xnameTM May 6, 2024
eba35b2
Change of duration
patrycjakalinska May 7, 2024
97554d7
Remove unnecessary component and move reusable styles to utils for be…
patrycjakalinska May 7, 2024
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
28 changes: 24 additions & 4 deletions docs/docs/gestures/fling-gesture.md
View file
Open in desktop
xnameTM marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Fling gesture
sidebar_position: 8
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/fling.mp4")} type="video/mp4"/>
</video>
import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>
<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -22,6 +34,14 @@ Gesture gets [ACTIVE](/docs/fundamentals/states-events#active) when movement is
When gesture gets activated it will turn into [END](/docs/fundamentals/states-events#end) state when finger is released.
The gesture will fail to recognize if the finger is lifted before being activated.

<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>

<samp id="FlingGestureBasicSrc">Fling Gesture</samp>

## Reference

```jsx
Expand Down
29 changes: 25 additions & 4 deletions docs/docs/gestures/hover-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,25 @@ sidebar_label: Hover gesture
sidebar_position: 9
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 375}}>
<source src={useBaseUrl("/video/hover.mp4")} type="video/mp4"/>
</video>
import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>

<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -22,6 +35,14 @@ A continuous gesture that can recognize hovering above the view it's attached to

On iOS additional visual effects 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>

<samp id="HoverGestureBasic">Hover Gesture</samp>

## Reference

```jsx
Expand Down
28 changes: 24 additions & 4 deletions docs/docs/gestures/long-press-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Long press gesture
sidebar_position: 5
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/longpress.mp4")} type="video/mp4"/>
</video>
import LongPressGestureBasic from '@site/static/examples/LongPressGestureBasic';
import LongPressGestureBasicSrc from '!!raw-loader!@site/static/examples/LongPressGestureBasic';

<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -21,6 +33,14 @@ A discrete gesture that activates when the corresponding view is pressed for a s
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).

<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>

<samp id="LongPressGestureBasic">Long Press Gesture</samp>

## Reference

```jsx
Expand Down
28 changes: 24 additions & 4 deletions docs/docs/gestures/pan-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Pan gesture
sidebar_position: 3
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div 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>
import PanGestureBasic from '@site/static/examples/PanGestureBasic';
import PanGestureBasicSrc from '!!raw-loader!@site/static/examples/PanGestureBasicSrc';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>
<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -27,6 +39,14 @@ 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>

<samp id="PanGestureBasicSrc">Pan Gesture</samp>

## Reference

```jsx
Expand Down
28 changes: 24 additions & 4 deletions docs/docs/gestures/pinch-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Pinch gesture
sidebar_position: 7
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/pinch.mp4")} type="video/mp4"/>
</video>
import PinchGestureBasic from '@site/static/examples/PinchGestureBasic';
import PinchGestureBasicSrc from '!!raw-loader!@site/static/examples/PinchGestureBasicSrc';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>
<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -28,6 +40,14 @@ Similarly, the scale factor decreases as the distance between the fingers decrea
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.

<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>

<samp id="PinchGestureBasicSrc">Pinch Gesture</samp>
xnameTM marked this conversation as resolved.
Show resolved Hide resolved

## Reference

```jsx
Expand Down
28 changes: 24 additions & 4 deletions docs/docs/gestures/rotation-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Rotation gesture
sidebar_position: 6
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/rotation.mp4")} type="video/mp4"/>
</video>
import RotationGestureBasic from '@site/static/examples/RotationGestureBasic';
import RotationGestureBasicSrc from '!!raw-loader!@site/static/examples/RotationGestureBasicSrc';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>
<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -25,6 +37,14 @@ The gesture [activates](/docs/fundamentals/states-events#active) when fingers ar

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.

<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>

<samp id="RotationGestureBasicSrc">Rotation Gesture</samp>
xnameTM marked this conversation as resolved.
Show resolved Hide resolved

## Reference

```jsx
Expand Down
28 changes: 24 additions & 4 deletions docs/docs/gestures/tap-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,24 @@ sidebar_label: Tap gesture
sidebar_position: 4
---

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

import useBaseUrl from '@docusaurus/useBaseUrl';

<div style={{ display: 'flex', margin: '16px 0', justifyContent: 'center' }}>
<video playsInline autoPlay muted loop style={{maxWidth: 360}}>
<source src={useBaseUrl("/video/tap.mp4")} type="video/mp4"/>
</video>
import TapGestureBasic from '@site/static/examples/TapGestureBasic';
import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic';

<div style={{display: 'flex', gap: 10, justifyContent: 'stretch', width: '100%', alignItems: 'stretch', marginBottom: 16}}>
<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}
disableMarginBottom={true}
/>
</div>

import BaseEventData from './\_shared/base-gesture-event-data.md';
Expand All @@ -26,6 +38,14 @@ For example, you might configure tap gesture recognizers to detect single taps,

In order for a gesture to [activate](/docs/fundamentals/states-events#active), specified gesture requirements such as minPointers, numberOfTaps, maxDist, maxDuration, and maxDelayMs (explained below) must be met. Immediately after the gesture [activates](/docs/fundamentals/states-events#active), it will [end](/docs/fundamentals/states-events#end).

<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>

<samp id="TapGestureBasic">Tap Gesture</samp>

## Reference

```jsx
Expand Down
8 changes: 8 additions & 0 deletions docs/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@ const config = {
customFields: {
shortTitle: 'Gesture Handler',
},

scripts: [
{
src: '/react-native-gesture-handler/js/snack-helpers.js',
async: true,
},
],

onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',

Expand Down
Loading
Loading