Add examples to Gestures section in docs (#2876)

Added InteractiveExamples to gestures for better user experience. Also code snippets are now provided with snack links to related examples on Expo. Command to change current dictionary: > cd docs Command to download required libraries: > yarn Command to preview the project: > yarn start --------- Co-authored-by: Patrycja Kalińska <cysiak0412@gmail.com>
software-mansion · May 7, 2024 · f33afb1 · f33afb1
1 parent 664b30e
commit f33afb1
Show file tree

Hide file tree

Showing 24 changed files with 1,346 additions and 61 deletions.
diff --git a/docs/docs/gestures/fling-gesture.md b/docs/docs/gestures/fling-gesture.md
@@ -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';
@@ -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

diff --git a/docs/docs/gestures/hover-gesture.md b/docs/docs/gestures/hover-gesture.md
@@ -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';
@@ -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

diff --git a/docs/docs/gestures/long-press-gesture.md b/docs/docs/gestures/long-press-gesture.md
@@ -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';
@@ -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

diff --git a/docs/docs/gestures/pan-gesture.md b/docs/docs/gestures/pan-gesture.md
@@ -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';
@@ -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

diff --git a/docs/docs/gestures/pinch-gesture.md b/docs/docs/gestures/pinch-gesture.md
@@ -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';
@@ -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>
+
 ## Reference
 
 ```jsx

diff --git a/docs/docs/gestures/rotation-gesture.md b/docs/docs/gestures/rotation-gesture.md
@@ -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';
@@ -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>
+
 ## Reference
 
 ```jsx

diff --git a/docs/docs/gestures/tap-gesture.md b/docs/docs/gestures/tap-gesture.md
@@ -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';
@@ -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

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -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',