diff --git a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx new file mode 100644 index 0000000000..d69d1e8017 --- /dev/null +++ b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx @@ -0,0 +1,151 @@ +--- +id: animated-interactions +title: Integration with Animated +sidebar_label: Integration with Animated +sidebar_position: 5 +--- + +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the `onUpdate` callback. The event mapping of `Animated.event` depends on the `useNativeDriver` property. + +:::danger Mixing Reanimated and Animated +It is not possible to mix `Reanimated` and `Animated` within any of the [gesture detectors](/docs/fundamentals/gesture-detectors). +::: + + + + + + + ); +} + +const styles = StyleSheet.create({ + box: { + width: 150, + height: 150, + backgroundColor: '#b58df1', + }, +}); +`}/> + +## useNativeDriver + +When using `Animated.event` with `useNativeDriver` set to `false`, it is required to set [`disableReanimated`](/docs/fundamentals/reanimated-interactions#disablereanimated) to `true` in the gesture configuration. + +Mapping of `Animated.event` depends on the value of `useNativeDriver` property. When set to `true`, event data can be accessed through `nativeEvent.handlerData` property: + +```jsx + const value = useAnimatedValue(0); + + const event = Animated.event( + [{ nativeEvent: { handlerData: { /* translationX: value, ... */ } } }], + { useNativeDriver: true } + ); +``` + +In case of `useNativeDriver` set to `false`, event data is accessed directly: + +```jsx + const value = useAnimatedValue(0); + + const event = Animated.event( + [ { /* translationX: value, ... */ } ], + { useNativeDriver: false } + ); +``` + +## Usage with VirtualGestureDetector + +Using `Animated.event` with [`VirtualGestureDetector`](/docs/fundamentals/gesture-detectors#virtualgesturedetector) is possible only when `useNativeDriver` is set to `false`. + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + outerBox: { + backgroundColor: '#b58df1', + width: 150, + height: 150, + }, + innerBox: { + width: 100, + height: 100, + backgroundColor: 'blue', + }, +}); +`}/> diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md index eff1b6941f..6463507f1a 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md @@ -2,7 +2,7 @@ id: gesture-composition title: Gesture composition & interactions sidebar_label: Gesture composition & interactions -sidebar_position: 10 +sidebar_position: 6 --- RNGH3 simplifies gesture interaction through dedicated composition hooks and configuration properties. To choose the right approach, simply ask: Are all the gestures attached to the same component? diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx new file mode 100644 index 0000000000..4756567ec6 --- /dev/null +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx @@ -0,0 +1,224 @@ +--- +id: gesture-detectors +title: Gesture Detectors +sidebar_label: Gesture detectors +sidebar_position: 3 +--- + +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + + +## Gesture Detector + +The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hooks API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section. + +When using hook API, you can also integrate it directly with the [Animated API](https://reactnative.dev/docs/animated). More on that can be found in [Integreation with Animated](/docs/fundamentals/animated-interactions) section. + +:::danger + +#### Nesting Gesture Detectors + +Because `GestureDetector` supports both the hook API and the builder pattern, it is important to avoid nesting detectors that use different APIs, as this can result in undefined behavior. + +#### Reusing Gestures +Using the same instance of a gesture across multiple Gesture Detectors may result in undefined behavior. +::: + +```js +import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; + +export default function App() { + const tap = useTapGesture({ + onDeactivate: () => { + console.log('Tap!'); + }, + }); + + return ( + + // highlight-next-line + + + // highlight-next-line + + + ); +} +``` + +## Virtual Detectors + +Since RNGH3, `GestureDetector` is a standalone host component. Depending on the view hierarchy, this can occasionally disrupt interactions between specific components. To resolve this, use `InterceptingGestureDetector` in combination with `VirtualNativeDetector`. + +### InterceptingGestureDetector + +`InterceptingGestureDetector` functions similarly to a `GestureDetector`, but it can also act as a proxy for `VirtualGestureDetector` within its component subtree. Because it can be used solely to establish the context for virtual detectors, the [`gesture`](#gesture) property is optional. + +### VirtualGestureDetector + +`VirtualGestureDetector` is similar to the `GestureDetector` from RNGH2. Because it is not a host component, it does not interfere with the host view hierarchy. This allows you to attach gestures without disrupting functionality that depends on it. + +### Known use cases + +Here are some of the most common use cases for virtual gesture detectors. + +#### SVG + +You can combine `VirtualGestureDetector` with `react-native-svg` to add gesture handling to individual SVG elements. + + { + console.log('Box tapped!'); + }, + }); + const innerTap = useTapGesture({ + onDeactivate: () => { + console.log('Circle tapped!'); + }, + }); + + return ( + + // highlight-next-line + + + + // highlight-next-line + + {}} + /> + // highlight-next-line + + + + // highlight-next-line + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + backgroundColor: '#b58df1', + }, +}); +`}/> + + +#### Text + +You can use `VirtualGestureDetector` to add gesture handling to specific parts of a `Text` component. + + { + console.log('Tapped on text!'); + }, + }); + + const nestedTap = useTapGesture({ + onDeactivate: () => { + console.log('Tapped on nested part!'); + }, + }); + + return ( + + + + Nested text + + + try tapping on this part. + + + This part is not special :c + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'space-around', + }, +}); +`}/> + + +## Properties + +### gesture + +```ts +gesture: SingleGesture | ComposedGesture; +``` + +A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition). + +### userSelect (Web only) + +```ts +userSelect: 'none' | 'auto' | 'text'; +``` + +This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. + +### touchAction (Web only) + +```ts +userSelect: TouchAction; +``` + +This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`. + +### enableContextMenu (Web only) + +```ts +enableContextMenu: boolean; +``` + +Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`. 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..9e8f1db05e --- /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. + + { + taps.value += 1; + }, + }); + + return ( + + + + + + ); +} +`}/> + +## Disabling Reanimated + +Gestures created with the hook API have `Reanimated` enabled by default, meaning all callbacks are executed on the UI thread. There are two methods available to disable this behavior for a specific gesture. + +### disableReanimated + +When `disableReanimated` is set to `true` in the gesture configuration, `Reanimated` will be completely turned off for that gesture throughout its entire lifecycle. This setting eliminates all interaction points with `Reanimated`, thereby reducing any potential overhead. Default value for this property is `false`. + +This property cannot be changed dynamically during the gesture's lifecycle. + +```jsx +const gesture = usePanGesture({ + // highlight-next-line + disableReanimated: true, + + onUpdate: () => { + console.log('Panning'); + }, +}); +``` + +### runOnJS + +The `runOnJS` property allows you to dynamically control whether callbacks are executed on the JS thread or the UI thread. When set to `true`, callbacks will run on the JS thread. Setting it to `false` will execute them on the UI thread. Default value for this property is `false`. + +This property can be changed dynamically throughout the gesture's lifecycle. + + { + console.log( + globalThis.__RUNTIME_KIND === 2 + ? 'Running on UI thread' + : 'Running on JS thread' + ); + }, + onDeactivate: () => { + shouldRunOnJS.value = !shouldRunOnJS.value; + }, + // highlight-next-line + runOnJS: shouldRunOnJS, + }); + + return ( + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + outerBox: { + backgroundColor: '#b58df1', + width: 150, + height: 150, + }, + innerBox: { + width: 100, + height: 100, + backgroundColor: 'blue', + }, +}); +`}/> diff --git a/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx index 26df3bcd92..a2b9befeb4 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx @@ -2,7 +2,7 @@ id: states-events title: Gesture states & events sidebar_label: Gesture states & events -sidebar_position: 4 +sidebar_position: 7 --- Every gesture can be treated as ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine). diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md index 852ebd68e5..af00eae8f8 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.md @@ -74,12 +74,23 @@ Default value is `true`. ### runOnJS +**Requires `react-native-reanimated`** + ```ts runOnJS: boolean | SharedValue; ``` -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`. +If set to `true`, callbacks will be executed on JS runtime. Can be changed dynamically throughout gesture lifecycle. Defaults to `false`. For more details, see the [runOnJS](/docs/fundamentals/reanimated-interactions#runonjs) section. + +### disableReanimated + +**Requires `react-native-reanimated`** + +```ts +disableReanimated: boolean | SharedValue; +``` + +If set to `true`, the gesture will ignore any interaction with `Reanimated`. This property cannot be changed during the gesture's lifecycle. For more details, see the [disableReanimated](/docs/fundamentals/reanimated-interactions#disablereanimated) section. ### simultaneousWith @@ -89,7 +100,7 @@ simultaneousWith: Gesture | Gesture[] 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/fundamentals/gesture-composition). [`GestureDetector`](/docs/gestures/gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. +**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition). [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. ### requireToFail @@ -99,7 +110,7 @@ requireToFail: Gesture | Gesture[] Adds a relation requiring another gesture to fail, before this one can activate. -**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition). [`GestureDetector`](/docs/gestures/gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. +**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition). [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. ### block @@ -109,7 +120,7 @@ block: Gesture | Gesture[] 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/fundamentals/gesture-composition).[`GestureDetector`](/docs/gestures/gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. +**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition).[`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) will not recognize the `otherGestures` and it needs to be added to another detector in order to be recognized. ### activeCursor diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md b/packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md deleted file mode 100644 index 2397af9dfa..0000000000 --- a/packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md +++ /dev/null @@ -1,19 +0,0 @@ -```jsx -export default function Example() { - const tap = Gesture.Tap().onStart(() => { - console.log('tap'); - }); - - return ( - - - - - - ); -} - -function FunctionalComponent(props) { - return {props.children}; -} -``` diff --git a/packages/docs-gesture-handler/docs/gestures/gesture-detector.md b/packages/docs-gesture-handler/docs/gestures/gesture-detector.md deleted file mode 100644 index 0c00ac8b47..0000000000 --- a/packages/docs-gesture-handler/docs/gestures/gesture-detector.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: gesture-detector -title: GestureDetector -sidebar_label: Gesture detector -sidebar_position: 11 ---- - -import FunctionalComponents from './\_shared/gesture-detector-functional1.md'; - -`GestureDetector` is the main component of the RNGH2. It is responsible for creating and updating native gesture handlers based on the config of provided gesture. The most significant difference between it and old gesture handlers is that the `GestureDetector` can recognize more than one gesture at the time thanks to gesture composition. Keep in mind that `GestureDetector` is not compatible with the [Animated API](https://reactnative.dev/docs/animated), nor with [Reanimated 1](https://docs.swmansion.com/react-native-reanimated/docs/1.x/). - -## Reference - -```javascript -import { Gesture, GestureDetector } from 'react-native-gesture-handler'; - -function App() { - const tap = Gesture.Tap(); - return ( - // highlight-next-line - - - // highlight-next-line - - ); -} -``` - -## Properties - -### `gesture` - -A gesture object containing the configuration and callbacks. Can be any of the base gestures (`Tap`, `Pan`, `LongPress`, `Fling`, `Pinch`, `Rotation`, `ForceTouch`) or any [`ComposedGesture`](/docs/fundamentals/gesture-composition) (`Race`, `Simultaneous`, `Exclusive`). - -:::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/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) - -This parameter allows to specify which `userSelect` property should be applied to underlying view. Possible values are `"none" | "auto" | "text"`. Default value is set to `"none"`. - -### `touchAction` (Web only) - -This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS `touch-action` values (e.g. `"none"`, `"pan-y"`). Default value is set to `"none"`. - -### `enableContextMenu(value: boolean)` (Web only) - -Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`. - -## Remarks - -- Gesture Detector will use first native view in its subtree to recognize gestures, however if this view is used only to group its children it may get automatically [collapsed](https://reactnative.dev/docs/view#collapsable-android). Consider this example: - - If we were to remove the collapsable prop from the View, the gesture would stop working because it would be attached to a view that is not present in the view hierarchy. Gesture Detector adds this prop automatically to its direct child but it's impossible to do automatically for more complex view trees. - -- Using the same instance of a gesture across multiple Gesture Detectors is not possible. Have a look at the code below: - - ```jsx - export default function Example() { - const pan = Gesture.Pan(); - - return ( - - - - - {' '} - {/* Don't do this! */} - - - - - - ); - } - ``` - - This example will throw an error, becuse we try to use the same instance of `Pan` in two different Gesture Detectors. diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx index f3220fcfb2..5cb582966a 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -159,7 +159,7 @@ Allows users to choose which mouse button should handler respond to. Arguments c x: number; ``` -X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) 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 (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### y @@ -167,7 +167,7 @@ X coordinate of the current position of the pointer (finger or a leading pointer y: number; ``` -Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) 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 (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### absoluteX diff --git a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx index 110f54a0bf..31f9a5a89b 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx @@ -118,7 +118,7 @@ Visual effect applied to the view while the view is hovered. Defaults to `HoverE x: number; ``` -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/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### y @@ -126,7 +126,7 @@ X coordinate of the current position of the pointer relative to the view attache y: number; ``` -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/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### absoluteX diff --git a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx index a03d7d0a71..69c832b82f 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx @@ -137,7 +137,7 @@ Allows users to choose which mouse button should handler respond to. Arguments c x: number; ``` -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). ### y @@ -145,7 +145,7 @@ X coordinate, expressed in points, of the current position of the pointer (finge y: number; ``` -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). ### absoluteX @@ -153,7 +153,7 @@ Y coordinate, expressed in points, of the current position of the pointer (finge absoluteX: number; ``` -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteX` instead of [`x`](#x) in cases when the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector) can be transformed as an effect of the gesture. +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteX` instead of [`x`](#x) in cases when the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) can be transformed as an effect of the gesture. ### absoluteY @@ -161,7 +161,7 @@ X coordinate, expressed in points, of the current position of the pointer (finge absoluteY: number; ``` -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteY` instead of [`y`](#y) in cases when the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector) can be transformed as an effect of the gesture. +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteY` instead of [`y`](#y) in cases when the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) can be transformed as an effect of the gesture. ### duration diff --git a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx index 9dbbeeece9..d662dddd87 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx @@ -301,7 +301,7 @@ Velocity of the pan gesture along the Y axis in the current moment. The value is x: number; ``` -X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) 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 (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### y @@ -309,7 +309,7 @@ X coordinate of the current position of the pointer (finger or a leading pointer y: number; ``` -Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) 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 (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. ### absoluteX diff --git a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx index 3f21c17cc9..fc61c590b9 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx @@ -180,7 +180,7 @@ Allows users to choose which mouse button should handler respond to. Arguments c x: number; ``` -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). ### y @@ -188,7 +188,7 @@ X coordinate, expressed in points, of the current position of the pointer (finge y: number; ``` -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector). +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). ### absoluteX @@ -196,7 +196,7 @@ Y coordinate, expressed in points, of the current position of the pointer (finge absoluteX: number; ``` -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteX` instead of [`x`](#x) in cases when the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector) can be transformed as an effect of the gesture. +X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteX` instead of [`x`](#x) in cases when the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) can be transformed as an effect of the gesture. ### absoluteY @@ -204,6 +204,6 @@ X coordinate, expressed in points, of the current position of the pointer (finge absoluteY: number; ``` -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteY` instead of [`y`](#y) in cases when the view attached to the [`GestureDetector`](/docs/gestures/gesture-detector) can be transformed as an effect of the gesture. +Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use `absoluteY` instead of [`y`](#y) in cases when the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) can be transformed as an effect of the gesture. diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 555fde1258..1724181bda 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -12,7 +12,7 @@ import Step3 from './\_steps/step3.md'; import Step4 from './\_steps/step4.md'; import Step5 from './\_steps/step5.md'; -RNGH2 provides much simpler way to add gestures to your app. All you need to do is wrap the view that you want your gesture to work on with [`GestureDetector`](/docs/gestures/gesture-detector), define the gesture and pass it to detector. That's all! +RNGH2 provides much simpler way to add gestures to your app. All you need to do is wrap the view that you want your gesture to work on with [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector), define the gesture and pass it to detector. That's all! To demonstrate how you would use the new API, let's make a simple app where you can drag a ball around. You will need to add `react-native-gesture-handler` (for gestures) and `react-native-reanimated` (for animations) modules. diff --git a/packages/docs-gesture-handler/docs/guides/swipe-and-scroll.md b/packages/docs-gesture-handler/docs/guides/swipe-and-scroll.md index a5ac5fbf69..6f949dcd92 100644 --- a/packages/docs-gesture-handler/docs/guides/swipe-and-scroll.md +++ b/packages/docs-gesture-handler/docs/guides/swipe-and-scroll.md @@ -4,7 +4,7 @@ title: Custom swipeable components inside ScrollView (web) sidebar_position: 5 --- -While we recommend using our own [`ReanimatedSwipeable`](/docs/components/reanimated_swipeable) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](/docs/gestures/gesture-detector#touchaction-web-only) set to `"pan-y"`, like this: +While we recommend using our own [`ReanimatedSwipeable`](/docs/components/reanimated_swipeable) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](/docs/fundamentals/gesture-detectors#touchaction-web-only) set to `"pan-y"`, like this: ```jsx 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<{ )} - + ); }; diff --git a/packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css b/packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css index 908df5fa09..43444e4535 100644 --- a/packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css +++ b/packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css @@ -13,6 +13,7 @@ font-size: 16px; color: var(--ifm-font-color-base); cursor: pointer; + user-select: none; } .arrow { diff --git a/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx b/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx index ae0ce28a48..e7ed873f99 100644 --- a/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx +++ b/packages/docs-gesture-handler/src/components/CollapsibleCode/index.tsx @@ -1,36 +1,61 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import CodeBlock from '@theme/CodeBlock'; import styles from './styles.module.css'; import CollapseButton from '@site/src/components/CollapseButton'; +import * as prettier from 'prettier/standalone'; +import tsParser from 'prettier/plugins/typescript'; +import estreeParser from 'prettier/plugins/estree'; + +const prettierOptions = { + parser: 'typescript', + plugins: [tsParser, estreeParser], +}; + interface Props { src: string; + label: string; + expandedLabel: string; lineBounds: number[]; } -export default function CollapsibleCode({ src, lineBounds }: Props) { +export default function CollapsibleCode({ + src, + label, + expandedLabel, + lineBounds, +}: Props) { const [collapsed, setCollapsed] = useState(true); + const [code, setCode] = useState(src); + + useEffect(() => { + async function formatCode() { + const formattedCode = await prettier.format(src, prettierOptions); + setCode(formattedCode); + } + void formatCode(); + }, [src]); if (!lineBounds) { - return {src}; + return {code}; } const [start, end] = lineBounds; - const codeLines = src.split('\n'); + const codeLines = code.split('\n'); const linesToShow = codeLines.slice(start, end + 1).join('\n'); return (
setCollapsed(!collapsed)} className={styles.collapseButton} /> - {collapsed ? linesToShow : src} + {collapsed ? linesToShow : code}
); }