[docs] Update docs #3959

m-bert · 2026-02-06T11:01:59Z

Description

In this PR, I go through each section and make sure that everything is in the same style, has correct information and there are no broken links.

Test plan

Read docs 🤓

Copilot

Pull request overview

This pull request updates and standardizes the documentation across the react-native-gesture-handler project. The changes focus on improving consistency, correcting links, fixing formatting issues, and reorganizing content for better readability. The documentation structure has been updated to reflect the new monorepo layout where docs are now located in packages/docs-gesture-handler/.

Changes:

Updated repository paths and edit URLs to reflect new packages/docs-gesture-handler/ structure
Improved documentation consistency by adding internal links, reorganizing sections, and wrapping code examples with CollapsibleCode components
Enhanced cross-referencing between related documentation pages with hyperlinks
Added support for Groovy syntax highlighting for Android code blocks
Standardized formatting and improved readability across troubleshooting, testing, installation, and gesture composition guides

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/docs-gesture-handler/docusaurus.config.js	Updated editUrl path to new monorepo structure and added groovy language support
packages/docs-gesture-handler/docs/guides/troubleshooting.mdx	Reorganized content, added Tabs for package managers, improved formatting and wording
packages/docs-gesture-handler/docs/guides/testing.md	Restructured API documentation, improved descriptions, added links to examples
packages/docs-gesture-handler/docs/guides/quickstart/index.md	Added target="_blank" to external Reanimated documentation link
packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx	Added hyperlink to gesture lifecycle documentation
packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx	Added links and removed backticks from plain text "Reanimated" mentions
packages/docs-gesture-handler/docs/fundamentals/introduction.md	Added links to specific gesture types and updated documentation repository path
packages/docs-gesture-handler/docs/fundamentals/installation.mdx	Reorganized sections, added macOS instructions, improved clarity of setup steps
packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx	Fixed touchAction type definition, improved SVG example, updated Reanimated link
packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx	Wrapped examples with CollapsibleCode, imported simultaneous example from external file
packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx	Removed backticks from "Reanimated" in plain text
packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx	Added links to callback documentation and useNativeDriver reference
packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx	New example file for simultaneous gestures demonstration

Comments suppressed due to low confidence (4)

packages/docs-gesture-handler/docs/guides/troubleshooting.mdx:14

Incorrect capitalization: "Github" should be "GitHub" (capital H and capital B) to match the correct brand name.
packages/docs-gesture-handler/docs/guides/troubleshooting.mdx:25
Incorrect capitalization: "Github" should be "GitHub" (capital H and capital B) to match the correct brand name.
packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx:9
The import path contains a double slash and escaped underscores. Based on other raw-loader imports in the codebase (e.g., in use-pan-gesture.mdx, use-tap-gesture.mdx), the path should use a single slash and unescaped underscores. The correct path should be './_examples/simultaneous'.
packages/docs-gesture-handler/docs/guides/troubleshooting.mdx:65
The bash code block has inconsistent indentation. It has 6 spaces of indentation while other code blocks in the same TabItem have 4 spaces. This should be consistent with the surrounding code blocks for proper formatting.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/docs-gesture-handler/docs/guides/testing.md

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…or.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

j-piasecki · 2026-02-09T10:42:10Z

packages/docs-gesture-handler/docs/components/reanimated_swipeable.md

 <GestureDetector gesture={panGesture}>
  <ReanimatedSwipeable simultaneousWithExternalGesture={panGesture} />
-</GestureDetector>
+</GestureDetector>;


j-piasecki · 2026-02-09T10:45:52Z

packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx

@@ -0,0 +1,95 @@
+import { StyleSheet } from 'react-native';


It may make sense to extract all of the examples in this case.

j-piasecki · 2026-02-09T10:47:05Z

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx

 ## 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.
+The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook 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/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.


Suggested change

The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook 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/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.

The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook-based 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/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.

j-piasecki · 2026-02-09T10:49:13Z

packages/docs-gesture-handler/docs/fundamentals/installation.mdx

-In order to fully utilize the [touch events](/docs/gestures/touch-events/) you also need to use `react-native-reanimated` 2.3.0 or newer.
+### Running gestures on the UI thread
+
+In order to run gestures on the UI thread, you also have to install [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/) along with [`react-native-worklets`](https://docs.swmansion.com/react-native-worklets/).


That's not entirely true - gestures always run on the ui thread. Reanimated (and Animated with native driver) allows responding to events from gestures on the UI thread.

j-piasecki · 2026-02-09T10:51:01Z

packages/docs-gesture-handler/docs/fundamentals/installation.mdx

-If you don't provide anything to the `styles` prop, it will default to `flex: 1`. If you want to customize the styling of the root view, don't forget to also include `flex: 1` in the custom style, otherwise your app won't render anything. Keep `GestureHandlerRootView` as close to the actual root of the app as possible. It's the entry point for all gestures and all gesture relations. The gestures won't be recognized outside of the root view, and relations only work between gestures mounted under the same root view.
+If you don't provide anything to the `styles` prop, it will default to `flex: 1`. If you want to customize the styling of the root view, don't forget to also include `flex: 1` in the custom style, otherwise your app won't render anything. 

 If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones.


Suggested change

If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones.

If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones by default.

Do we want to mention the unstable_forceActive prop?

j-piasecki · 2026-02-09T11:12:14Z

packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx

 ## State management

-Manual state management is based on `handlerTag`. There are two ways of manual state control.
+Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, event if they met specific criteria.


Suggested change

Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, event if they met specific criteria.

Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, even if they meet their activation criteria.

j-piasecki · 2026-02-09T11:12:29Z

packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx

 ### Inside gesture definition

-If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.
+If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter. 


Suggested change

If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.

If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.

j-piasecki · 2026-02-09T11:16:15Z

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

 ```ts
-direction: Directions | SharedValue<Directions>;
 ```


Was leaving that intentional?

j-piasecki · 2026-02-09T11:24:54Z

packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx

+When used, the native component should be the direct child of a [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector).
+
+:::danger
+Do not use `Native` gesture with components exported by React Native Gesture Handler, as they already have it preapplied. Attaching `Native` gesture twice will likely result in the components not working as intended.


Suggested change

Do not use `Native` gesture with components exported by React Native Gesture Handler, as they already have it preapplied. Attaching `Native` gesture twice will likely result in the components not working as intended.

Do not use `Native` gesture with components exported by React Native Gesture Handler, as they already have it pre-applied. Attaching `Native` gesture twice will result in undefined behavior.

j-piasecki · 2026-02-09T11:31:27Z

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

+The gesture activates when fingers are placed on the screen and rotate around a common point. It provides information such as the amount [rotated](#rotation), the focal point of the rotation ([anchor](#anchorx)), and its instantaneous [velocity](#velocity).
+
+:::note
+When implementing rotation based on `anchor` point, make sure to use it after the gesture had activated, i.e. in `onActivate` or `onUpdate` callbacks. Using it in `onBegin` may lead to unexpected behavior.


How hard would it be to hide those fields from onBegin?

m-bert added 13 commits February 4, 2026 14:12

Fix edit link

a14db83

introduction

9e1f534

installation

54889bb

Gesture detector

3e82cf8

Reanimated interactions

e005621

Animated interactions

90b1aa4

Composition

a5b73b3

Merge branch 'main' into @mbert/docs-review

6c4aa0f

State manager

b2f97c5

Callbacks

8cb20ab

Quickstart

8f442f1

Troubleshooting

12abfeb

Testing

1094f92

Copilot AI review requested due to automatic review settings February 6, 2026 11:02

m-bert mentioned this pull request Feb 6, 2026

[docs] Update docs #3958

Closed

Copilot started reviewing on behalf of m-bert February 6, 2026 11:02 View session

Copilot AI reviewed Feb 6, 2026

View reviewed changes

packages/docs-gesture-handler/docs/guides/testing.md Outdated Show resolved Hide resolved

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx Outdated Show resolved Hide resolved

m-bert added 13 commits February 6, 2026 12:31

Fix callbacks flow chart

d91e097

Pan

c503ea1

Tap

31a8db3

LongPress

b3efbbe

Rotation

d201b3e

Pinch

62d0fe8

Fling

64aa192

Hover

4667c7d

Native

5f40baf

Manual

800b37d

Touch events

004f919

Pinch typo

e8ddacc

HOOOOOOOOOOOOOOOOOOOOW?

128b226

m-bert and others added 5 commits February 9, 2026 10:04

Update packages/docs-gesture-handler/docs/guides/testing.md

cc1e783

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/docs-gesture-handler/docs/fundamentals/gesture-detect…

d48e4ea

…or.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Overrides

9f1ec51

Fix broken link

9b4aff8

Merge branch 'main' into @mbert/docs-review

0ce4f89

j-piasecki reviewed Feb 9, 2026

View reviewed changes

m-bert added 4 commits February 9, 2026 15:37

Pressable

1b48239

Swipeable

e9e88a5

Drawer

5fcdc6c

Minor adjustments

6d909f3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[docs] Update docs #3959

[docs] Update docs #3959

m-bert commented Feb 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

j-piasecki Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones.
	If you're unsure if one of your dependencies already renders `GestureHandlerRootView` on its own, don't worry and add one at the root anyway. In case of nested root views, Gesture Handler will only use the top-most one and ignore the nested ones by default.

	Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, event if they met specific criteria.
	Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, even if they meet their activation criteria.

	If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.
	If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.

	Do not use `Native` gesture with components exported by React Native Gesture Handler, as they already have it preapplied. Attaching `Native` gesture twice will likely result in the components not working as intended.
	Do not use `Native` gesture with components exported by React Native Gesture Handler, as they already have it pre-applied. Attaching `Native` gesture twice will result in undefined behavior.

Uh oh!

[docs] Update docs #3959

Are you sure you want to change the base?

[docs] Update docs #3959

Conversation

m-bert commented Feb 6, 2026

Description

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants