diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.md index eff1b6941f..4bca1c084e 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: 4 --- 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.md b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.md new file mode 100644 index 0000000000..655cd5d7f2 --- /dev/null +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.md @@ -0,0 +1,211 @@ +--- +id: gesture-detectors +title: Gesture Detectors +sidebar_label: Gesture detectors +sidebar_position: 3 +--- + +## Gesture Detector + +`GestureDetector` is the core component of RNGH3. Unlike in previous version, it no longer manages the lifecycle of gestures directly. It supports recognizing multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). + +To facilitate a smooth migration, the gesture property accepts both RNGH3 and RNGH2 gestures. + +When using RNGH3 gestures, you can also integrate them directly with the [Animated API](https://reactnative.dev/docs/animated). + +### Example + +#### Simple example + +```js +import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; + +export default function App() { + const tap = useTapGesture({}); + + return ( + + // highlight-next-line + + + // highlight-next-line + + + ); +} +``` + +#### Usage with Animated API + +```js +import * as React from 'react'; +import { Animated, useAnimatedValue } from 'react-native'; +import { + GestureHandlerRootView, + GestureDetector, + usePanGesture, +} from 'react-native-gesture-handler'; + +export default function App() { + const value = useAnimatedValue(0); + const event = Animated.event( + [{ nativeEvent: { handlerData: { translationX: value } } }], + { + useNativeDriver: true, + } + ); + + const gesture = usePanGesture({ + onUpdate: event, + }); + + return ( + + // highlight-next-line + + + // highlight-next-line + + + ); +} +``` + +## Virtual Detectors + +In RNGH3, `GestureDetector` is a standalone native component. Depending on your view hierarchy, this can occasionally disrupt interactions between specific components. To resolve this, use `InterceptingGestureDetector` in combination with `VirtualNativeDetector`. + +### InterceptingGestureDetector + +`InterceptingGestureDetector` functions like a standard `GestureDetector`, but adds support 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 native component, it does not interfere with the native view hierarchy. This allows you to attach gestures without disrupting functionality that depends on that hierarchy. + +### Example + +```js +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import { + GestureHandlerRootView, + InterceptingGestureDetector, + useTapGesture, + VirtualGestureDetector, +} from 'react-native-gesture-handler'; +import Svg, { Circle } from 'react-native-svg'; + +export default function App() { + const outerTap = useTapGesture({}); + const innerTap = useTapGesture({}); + + 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', + }, +}); +``` + +## Interaction with Reanimated + +`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 and Reanimated is not explicitly turned off, tools provided by the Reanimated will be utilized bringing ability to handle gestures synchronously. + +## 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`. + +## Remarks + +- 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 = usePanGesture({}); + + return ( + + // highlight-next-line + + + // highlight-next-line + + + + + + + ); + } + ``` + + 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/fundamentals/states-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/states-events.mdx index 26df3bcd92..44d603e441 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: 5 --- 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..76278eac23 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 @@ -89,7 +89,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 +99,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 +109,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