README (README.md)

[](https://swm-delivery.com/www/delivery/ck-slug.php?zoneid=zone-gh-react-native-gesture-handler-1&n=1)
[](https://swm-delivery.com/www/delivery/ck-slug.php?zoneid=zone-gh-react-native-gesture-handler-2&n=1)
[](https://swm-delivery.com/www/delivery/ck-slug.php?zoneid=zone-gh-react-native-gesture-handler-3&n=1)

Declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread.
It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.

Installation

Check getting started section of our docs for the detailed installation instructions.

Documentation

Check out our dedicated documentation page for info about this library, API reference and more: https://docs.swmansion.com/react-native-gesture-handler/docs/

Examples

If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the example folder and run:

bash

yarn install

Run yarn start to start the metro bundler

Run yarn android or yarn ios (depending on which platform you want to run the example app on).

You will need to have an Android or iOS device or emulator connected.

React Native Support

react-native-gesture-handler supports the three latest minor releases of react-native.

Gesture Handler 3

Check out our compatibility table in documentation.

IMPORTANT

Minimal supported react-native version for Gesture Handler 3 is 0.82

Gesture Handler 2

| version | react-native version |
| ------- | -------------------- |
| 2.32.0+ | 0.84.0+ |
| 2.28.0+ | 0.79.0+ |
| 2.26.0+ | 0.78.0+ |
| 2.25.0+ | 0.76.0+ |
| 2.24.0+ | 0.75.0+ |
| 2.21.0+ | 0.74.0+ |
| 2.18.0+ | 0.73.0+ |
| 2.16.0+ | 0.68.0+ |
| 2.14.0+ | 0.67.0+ |
| 2.10.0+ | 0.64.0+ |
| 2.0.0+ | 0.63.0+ |

It may be possible to use newer versions of react-native-gesture-handler on React Native with version <= 0.59 by reverse Jetifying.
Read more on that here <https://github.com/mikehardy/jetifier#to-reverse-jetify--convert-node_modules-dependencies-to-support-libraries>

License

Gesture handler library is licensed under The MIT License.

Credits

This project has been build and is maintained thanks to the support from Expo.io and Software Mansion

[](https://expo.io)
[](https://swmansion.com)

Community Discord

Join the Software Mansion Community Discord to chat about Gesture Handler or other Software Mansion libraries.

Gesture Handler is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

---

AGENTS (AGENTS.md)

react-native-gesture-handler library

Project structure

- This project has monorepo structure.
- It contains both, library (/packages/react-native-gesture-handler) and documentation (/packages/docs-gesture-handler).
- It is multiplatform. Library supports android, iOS, web and macos.
- Android codebase is located in /packages/react-native-gesture-handler/android directory. iOS and macos in /packages/react-native-gesture-handler/apple. Web can be found in /packages/react-native-gesture-handler/src/web.
- Some files are platform specific. Those have platform in the file extension, e.g. RNGestureHandlerModule.web.ts

Example apps

- Example apps are located in /apps directory
- basic-example is mostly used to check that android and iOS build correctly.
- expo-example is used to test more advanced examples. Sources are located in apps/common-app.
- macos-example is used to check if library works on macos. Sources are located in apps/common-app.

Packages

- /packages contains documentation and main library package
- This project contains 3 versions of API. The newest is located in packages/react-native-gesture-handler/src/v3 directory. Most of the logic is shared, but make sure that your changes do not break older APIs.
- When writing code, you can use usesNativeOrVirtualDetector function to either include only, or exclude new API v3. It is available on all platforms.

API versions — defaults for new code

- Always use the v3 API by default for any new code, examples, reproductions, or test screens. Gesture. builders (v2) and GestureHandler components (v1) are legacy. Even when a bug is reported against a legacy API, build the reproduction with v3 first to check whether it affects v3 too — switch to the legacy API only if the issue does not reproduce on v3, or the user explicitly asks for a legacy reproduction.
- v3 usage: hook-based gestures (usePanGesture, useTapGesture, useLongPressGesture, …) attached via GestureDetector, all imported from react-native-gesture-handler (the main entry re-exports src/v3).

Build checks

- To check Android build go to apps/basic-example and run yarn android command.
- To check iOS build, go to apps/basic-example and run yarn ios.
- To check macos build, go to apps/macos-example and run yarn macos.
- After any build on macOS/Linux stop the Metro server with for pid in $(lsof -ti :8081); do kill "$pid"; done (this no-ops cleanly when nothing is listening on port 8081; pkill -f "metro" is not sufficient)

JavaScript checks

- To run TypeScript checks use yarn ts-check command. You can run it directly in packages/react-native-gesture-handler if working on package, or from root of the repository.
- To run Jest tests, use yarn test command in packages/react-native-gesture-handler. You can also pass filename to run tests from specific file.
- To run eslint check, use yarn lint:js

Formatting

- To format code use use yarn format:{apple | android | js}. apple works for both, iOS and macos.

---

Package.Json (package.json)

{
"name": "react-native-gesture-handler-monorepo",
"version": "0.0.0",
"private": true,
"workspaces": [
"packages/react-native-gesture-handler",
"apps/basic-example",
"apps/expo-example",
"apps/macos-example",
"apps/common-app"
],
"scripts": {
"postinstall": "yarn build",
"build": "husky install && yarn workspaces foreach --all --parallel --topological-dev run build",
"ts-check": "yarn workspaces foreach --all --parallel --topological-dev run ts-check",
"lint-js": "yarn workspaces foreach --all --parallel --topological-dev run lint-js",
"format-js": "yarn workspaces foreach --all --parallel --topological-dev run format-js",
"clean": "yarn workspaces foreach --all --parallel --topological-dev run clean && rm -rf node_modules yarn.lock"
},
"devDependencies": {
"@types/react": "^19.0.12",
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"@yarnpkg/types": "^4.0.1",
"eslint": "^8.57.0",
"eslint-config-satya164": "3.3.0",
"eslint-import-resolver-babel-module": "^5.2.0",
"eslint-plugin-jest": "27.4.3",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-simple-import-sort": "^13.0.0",
"husky": "^8.0.1",
"jest": "^29.7.0",
"lint-staged": "^12.3.2",
"prettier": "3.3.3",
"typescript": "~6.0.3"
},
"packageManager": "[email protected]",
"resolutions": {
"expo-modules-core@npm:~57.0.10": "patch:expo-modules-core@npm%3A57.0.10#~/.yarn/patches/expo-modules-core-npm-57.0.10-1d55439aaa.patch"
}
}

---

Rnrepo.Config.Json (rnrepo.config.json)

{
"denyList": {
"android": ["react-native-gesture-handler"],
"ios": ["react-native-gesture-handler"]
}
}

---

Tsconfig.Json (tsconfig.json)

{
"compilerOptions": {
"esModuleInterop": true,
"jsx": "react-native",
"lib": ["esnext", "dom"],
"types": ["jest"],
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "esnext",
"declaration": true,
"declarationMap": false,
"noStrictGenericChecks": false,
"forceConsistentCasingInFileNames": true,
"noImplicitUseStrict": false,
"noImplicitOverride": true,
"noUnusedParameters": true,
"noUnusedLocals": true
}
}

---

.Eslintrc.Json (.eslintrc.json)

{
"root": true,
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"satya164"
],
"settings": {
"react": { "version": "19" },
"import/resolver": {
"babel-module": {}
}
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["./tsconfig.json"]
},
"env": { "browser": true, "node": true, "jest/globals": true },
"plugins": ["react", "jest", "simple-import-sort"],
"ignorePatterns": [
"packages/react-native-gesture-handler/lib//*",
"/*.config.js",
"scripts//*.js",
"/node_modules//*"
],
"rules": {
// removed in new jest-eslint-plugin, referenced in satya config
"jest/no-truthy-falsy": "off",
"jest/valid-describe": "off",

"jest/expect-expect": [
"warn",
{ "assertFunctionNames": ["expect", "assert"] }
],
"jest/no-conditional-expect": "warn",

// temporary, remove after we type internals better
"@typescript-eslint/restrict-template-expressions": "warn",
"@typescript-eslint/no-unsafe-member-access": "warn",
"@typescript-eslint/no-unsafe-call": "warn",
"@typescript-eslint/no-unsafe-assignment": "warn",
"@typescript-eslint/no-unsafe-argument": "warn",
"@typescript-eslint/no-unsafe-return": "warn",
"@typescript-eslint/no-non-null-assertion": "warn",
"@typescript-eslint/ban-types": "warn",
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/consistent-type-exports": "error",
"@typescript-eslint/no-unsafe-enum-comparison": "off",

// common
"@typescript-eslint/explicit-module-boundary-types": "off",
"import/named": "off",
"react/sort-comp": "off",
"react/no-unused-prop-types": "warn",
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/no-floating-promises": "warn",
"@eslint-react/no-missing-component-display-name": "warn",
"@eslint-react/no-nested-components": "warn",
"@eslint-react/no-nested-component-definitions": "warn",
"prefer-const": [
"error",
{
"destructuring": "all"
}
],
"@typescript-eslint/no-unused-vars": [
"error",
{ "argsIgnorePattern": "^_" }
],
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-redundant-type-constituents": "warn",
"@typescript-eslint/no-empty-function": "error",
"@typescript-eslint/no-misused-promises": "warn",
"@eslint-react/no-array-index-key": "warn",
"@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": "warn",
"@eslint-react/hooks-extra/prefer-use-state-lazy-initialization": "warn",
"@eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks": "warn",
"no-redeclare": "off",
"@typescript-eslint/no-redeclare": "error",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "error",
"@typescript-eslint/ban-ts-comment": [
"error",
{
"ts-ignore": "allow-with-description",
"ts-expect-error": "allow-with-description"
}
],
"curly": "error",
"spaced-comment": "error",
"no-alert": "warn",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
},
"overrides": [
{
"files": [
"packages/react-native-gesture-handler/src/v3/",
"packages/react-native-gesture-handler/src/web/",
"packages/react-native-gesture-handler/src/*.ts"
],
"rules": {
"no-restricted-globals": [
"error",
{
"name": "global",
"message": "Use the standard globalThis — the bare global binding is React Native/Node-specific and doesn't exist in browsers."
}
],
"no-restricted-syntax": [
"error",
{
"selector": "Identifier[name='__DEV__']:not(:function *)",
"message": "Don't read __DEV__ at module scope — the global may not be defined yet outside Metro when modules are evaluated. Read it lazily inside a function instead."
}
]
}
},
{
"files": ["packages/react-native-gesture-handler/src/web/"],
"rules": {
"no-restricted-imports": [
"error",
{
"paths": [
{
"name": "react-native",
"message": "The web handlers are platform-agnostic engine code — they must not depend on react-native. Guard on runtime capabilities (e.g. DOM availability) instead."
}
]
}
]
}
}
]
}

---

.Lintstagedrc.Json (.lintstagedrc.json)

{
"{apps/basic-example,packages/react-native-gesture-handler}/package.json": "node scripts/check-rn-versions.js",
"/*.{ts,tsx}": ["prettier --write", "eslint"],
"packages/react-native-gesture-handler/android//*.kt": [
"node scripts/check-android-dirs.js",
"yarn format:android"
],
"packages/react-native-gesture-handler/apple//*.{h,m,mm,cpp}": "yarn format:apple",
"packages/react-native-gesture-handler/{shared,android/src}//*.{h,cpp}": "yarn format:cpp"
}

---

.Prettierrc.Json (.prettierrc.json)

{
"bracketSameLine": true,
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}

---

.Yarnrc.Yml (.yarnrc.yml)

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-4.13.0.cjs

---

Apps/Basic Example/README (apps/basic-example/README.md)

Basic Gesture Handler example app

This app shows basic capabilities of Gesture Handler. It doesn't depend on any other package - this makes it easier to confirm that Gesture Handler works correctly.

Installing & running application

Before running application you need to install all dependencies. To do that:

- In project's root directory run yarn

Android

You can run this application by yarn android or from Android Studio.

iOS

To run on iOS first go to BasicExample/ios and run pod install.

Then in BasicExample run yarn ios or run application from Xcode.

---

Apps/Basic Example/App.Json (apps/basic-example/app.json)

{
"name": "BasicExample",
"displayName": "BasicExample"
}

---

Apps/Basic Example/Package.Json (apps/basic-example/package.json)

{
"name": "basic-example",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"ts-check": "yarn tsc --noEmit",
"lint-js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src//*.{js,jsx,ts,tsx}'",
"format-js": "prettier --write --list-different './src//*.{js,jsx,ts,tsx}'",
"clean-android": "rm -rf android/.gradle android/.kotlin android/build",
"clean-ios": "rm -rf ios/build ios/Pods ios/Podfile.lock",
"clean": "rm -rf node_modules && yarn clean-android && yarn clean-ios",
"pods": "cd ios && bundle install && bundle exec pod install"
},
"dependencies": {
"react": "19.2.3",
"react-native": "0.87.0",
"react-native-gesture-handler": "workspace:*",
"react-native-reanimated": "4.6.0-nightly-20260811-248dee712",
"react-native-worklets": "patch:react-native-worklets@npm%3A0.12.0-nightly-20260810-fb9cb5596#~/.yarn/patches/react-native-worklets-npm-0.12.0-nightly-20260810-fb9cb5596-f08a72b88e.patch"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "20.2.0",
"@react-native-community/cli-platform-android": "20.2.0",
"@react-native-community/cli-platform-ios": "20.2.0",
"@react-native/babel-preset": "0.87.0",
"@react-native/eslint-config": "0.87.0",
"@react-native/jest-preset": "0.87.0",
"@react-native/metro-config": "0.87.0",
"@react-native/typescript-config": "0.87.0",
"@rnrepo/build-tools": "~0.1.3-beta.0",
"@types/jest": "^29.5.13",
"@types/react": "^19.2.0",
"@types/react-test-renderer": "^19.1.0",
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"eslint": "^8.57.0",
"eslint-config-satya164": "3.3.0",
"eslint-import-resolver-babel-module": "^5.2.0",
"eslint-plugin-jest": "27.4.3",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.37.5",
"jest": "^29.6.3",
"prettier": "3.3.3",
"react-test-renderer": "19.2.3",
"typescript": "~6.0.3"
},
"engines": {
"node": ">=22.11.0"
},
"installConfig": {
"selfReferences": false
}
}

---

Apps/Basic Example/Tsconfig.Json (apps/basic-example/tsconfig.json)

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "6.0",
"noEmit": true,
"paths": {
"react-native-gesture-handler": [
"../../packages/react-native-gesture-handler/src"
],
"react-native-gesture-handler/ReanimatedSwipeable": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/"
],
"react-native-gesture-handler/ReanimatedDrawerLayout": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx"
],
"react-native-gesture-handler/jest-utils": [
"../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
]
},
"types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]
},
"include": ["src//.ts", "src//.tsx"]
}

---

Apps/Basic Example/Ios/BasicExample/Images.Xcassets/Contents.Json (apps/basic-example/ios/BasicExample/Images.xcassets/Contents.json)

{
"info" : {
"version" : 1,
"author" : "xcode"
}
}

---

Apps/Basic Example/Ios/BasicExample/Images.Xcassets/AppIcon.Appiconset/Contents.Json (apps/basic-example/ios/BasicExample/Images.xcassets/AppIcon.appiconset/Contents.json)

{
"images" : [
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "20x20"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "29x29"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "40x40"
},
{
"idiom" : "iphone",
"scale" : "2x",
"size" : "60x60"
},
{
"idiom" : "iphone",
"scale" : "3x",
"size" : "60x60"
},
{
"idiom" : "ios-marketing",
"scale" : "1x",
"size" : "1024x1024"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

---

Apps/Common App/README (apps/common-app/README.md)

Gesture Handler example app

This is project contains source code for examples shared betwwen example apps.

---

Apps/Common App/Package.Json (apps/common-app/package.json)

{
"name": "common-app",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"ts-check": "yarn tsc --noEmit",
"lint-js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src//*.{js,jsx,ts,tsx}'",
"format-js": "prettier --write --list-different App.tsx './src//*.{js,jsx,ts,tsx}'"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^2.1.2",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"@react-navigation/stack": "^7.2.10",
"@swmansion/icons": "^0.0.1",
"react-native-gesture-handler": "workspace:*",
"react-native-pager-view": "^8.0.2",
"react-native-reanimated": "4.6.0-nightly-20260811-248dee712",
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "4.25.2",
"react-native-svg": "15.15.4",
"react-native-worklets": "patch:react-native-worklets@npm%3A0.12.0-nightly-20260810-fb9cb5596#~/.yarn/patches/react-native-worklets-npm-0.12.0-nightly-20260810-fb9cb5596-f08a72b88e.patch"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "18.0.1",
"@react-native-community/cli-platform-android": "18.0.0",
"@react-native-community/cli-platform-ios": "18.0.0",
"@react-native/babel-preset": "0.79.0",
"@react-native/eslint-config": "0.79.0",
"@react-native/metro-config": "0.79.0",
"@react-native/typescript-config": "0.79.0",
"@types/jest": "^29.5.13",
"@types/react": "^19.0.12",
"@types/react-test-renderer": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^6.9.0",
"@typescript-eslint/parser": "^6.9.0",
"eslint": "^8.57.0",
"eslint-config-satya164": "3.3.0",
"eslint-import-resolver-babel-module": "^5.2.0",
"eslint-plugin-jest": "27.4.3",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.37.5",
"expo-camera": "~16.1.1",
"jest": "^29.6.3",
"prettier": "3.3.3",
"react-test-renderer": "19.0.0",
"typescript": "~6.0.3"
},
"engines": {
"node": ">=18"
}
}

---

Apps/Common App/Tsconfig.Json (apps/common-app/tsconfig.json)

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"noEmit": true,
"declaration": false,
"noImplicitOverride": false,
"paths": {
"@/": ["./"],
"react-native-gesture-handler": [
"../../packages/react-native-gesture-handler/src"
],
"react-native-gesture-handler/ReanimatedSwipeable": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/"
],
"react-native-gesture-handler/ReanimatedDrawerLayout": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx"
],
"react-native-gesture-handler/jest-utils": [
"../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
]
},
"types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]
},
"include": ["src//.ts", "src//.tsx", "index.ts"]
}

---

Apps/Expo Example/README (apps/expo-example/README.md)

Gesture Handler Expo example app

This is an example application demonstrating the functionality of the react-native-gesture-handler library with Expo.

Installing & running application

Before running the application, you need to install all dependencies. To do that:

- In the project's root directory, run yarn.

Next run npx expo prebuild.

Android

Run this application by yarn android or from Android Studio.

iOS

Run yarn ios or run application from Xcode.

Web

Run yarn web. Alternatively run yarn start and in browser navigate to localhost:8081

---

Apps/Expo Example/Package.Json (apps/expo-example/package.json)

{
"name": "expo-example",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"postinstall": "npx expo prebuild",
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"clean": "rm -rf node_modules android ios"
},
"dependencies": {
"@expo/metro-runtime": "~57.0.9",
"@react-native-async-storage/async-storage": "2.2.0",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"@react-navigation/stack": "^7.2.10",
"@swmansion/icons": "^0.0.1",
"common-app": "workspace:*",
"expo": "^57.0.0",
"expo-camera": "~57.0.3",
"expo-status-bar": "~57.0.1",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-native": "0.86.2",
"react-native-gesture-handler": "workspace:*",
"react-native-pager-view": "^8.0.2",
"react-native-reanimated": "4.6.0-nightly-20260811-248dee712",
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "4.25.2",
"react-native-svg": "15.15.4",
"react-native-web": "^0.21.0",
"react-native-worklets": "patch:react-native-worklets@npm%3A0.12.0-nightly-20260810-fb9cb5596#~/.yarn/patches/react-native-worklets-npm-0.12.0-nightly-20260810-fb9cb5596-f08a72b88e.patch"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@rnrepo/expo-config-plugin": "0.3.0-beta.3",
"@types/react": "~19.1.10",
"@types/react-dom": "~19.1.7",
"@types/react-native-web": "^0",
"typescript": "~6.0.3"
},
"private": true,
"installConfig": {
"hoistingLimits": "workspaces",
"selfReferences": false
}
}

---

Apps/Expo Example/Rnrepo.Config.Json (apps/expo-example/rnrepo.config.json)

{
"denyList": {
"android": ["react-native-gesture-handler"],
"ios": ["react-native-gesture-handler"]
}
}

---

Apps/Expo Example/Tsconfig.Json (apps/expo-example/tsconfig.json)

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"noEmit": true,
"baseUrl": ".",
"paths": {
"common-app": ["../common-app/index.ts"],
"react-native-gesture-handler": [
"../../packages/react-native-gesture-handler/src"
],
"react-native-gesture-handler/ReanimatedSwipeable": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/"
],
"react-native-gesture-handler/ReanimatedDrawerLayout": [
"../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx"
],
"react-native-gesture-handler/jest-utils": [
"../../packages/react-native-gesture-handler/src/jestUtils/index.ts"
]
},
"types": ["../../packages/react-native-gesture-handler/src/global.d.ts"]

},
"include": ["src//.ts", "src//.tsx", "App.tsx"],
"exclude": ["metro.config.js", "android", "ios", ".bundle", "node_modules"]
}

---

Apps/Macos Example/README (apps/macos-example/README.md)

macOS Gesture Handler example app

This is an example application demonstrating the functionality of the react-native-gesture-handler library on macOS.

Installing & running application

Before running the application, you need to install all dependencies. To do that:

- In the project's root directory, run yarn.
- Navigate to the MacOSExample/macos directory and run bundle install && bundle exec pod install
- Navigate to the MacOSExample and run yarn start to start the Metro bundler.
- Open the MacOSExample project in Xcode and build the app to run it on a macOS simulator or device.

---

Apps/Macos Example/App.Json (apps/macos-example/app.json)

{
"name": "MacOSExample",
"displayName": "MacOSExample"
}

---

Apps/Macos Example/Package.Json (apps/macos-example/package.json)

{
"name": "macos-example",
"version": "0.0.1",
"private": true,
"scripts": {
"macos": "npx react-native-macos run-macos",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"clean": "rm -rf node_modules && cd macos && rm -rf build Pods Podfile.lock",
"pods": "cd macos && bundle install && bundle exec pod install"
},
"dependencies": {
"@react-native-async-storage/async-storage": "2.1.2",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"@react-navigation/stack": "^7.2.10",
"@swmansion/icons": "^0.0.1",
"common-app": "workspace:*",
"react": "19.1.4",
"react-native": "0.81.2",
"react-native-gesture-handler": "workspace:*",
"react-native-macos": "0.81.2",
"react-native-reanimated": "~4.3.1",
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "4.25.2",
"react-native-svg": "15.15.4",
"react-native-worklets": "0.8.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "20.0.0",
"@react-native-community/cli-platform-android": "20.0.0",
"@react-native-community/cli-platform-ios": "20.0.0",
"@react-native/babel-preset": "0.81.2",
"@react-native/eslint-config": "0.81.2",
"@react-native/metro-config": "0.81.2",
"@react-native/typescript-config": "0.81.2",
"@types/jest": "^29.5.13",
"@types/react": "^19.1.4",
"@types/react-test-renderer": "^19.1.0",
"jest": "^29.6.3",
"react-test-renderer": "19.1.4",
"typescript": "~6.0.3"
},
"engines": {
"node": ">=20"
},
"installConfig": {
"hoistingLimits": "workspaces",
"selfReferences": false
}
}

---

Apps/Macos Example/Tsconfig.Json (apps/macos-example/tsconfig.json)

---

Apps/Macos Example/Macos/MacOSExample MacOS/Assets.Xcassets/Contents.Json (apps/macos-example/macos/MacOSExample-macOS/Assets.xcassets/Contents.json)

{
"info" : {
"author" : "xcode",
"version" : 1
}
}

---

Apps/Macos Example/Macos/MacOSExample MacOS/Assets.Xcassets/AppIcon.Appiconset/Contents.Json (apps/macos-example/macos/MacOSExample-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json)

{
"images" : [
{
"idiom" : "mac",
"scale" : "1x",
"size" : "16x16"
},
{
"idiom" : "mac",
"scale" : "2x",
"size" : "16x16"
},
{
"idiom" : "mac",
"scale" : "1x",
"size" : "32x32"
},
{
"idiom" : "mac",
"scale" : "2x",
"size" : "32x32"
},
{
"idiom" : "mac",
"scale" : "1x",
"size" : "128x128"
},
{
"idiom" : "mac",
"scale" : "2x",
"size" : "128x128"
},
{
"idiom" : "mac",
"scale" : "1x",
"size" : "256x256"
},
{
"idiom" : "mac",
"scale" : "2x",
"size" : "256x256"
},
{
"idiom" : "mac",
"scale" : "1x",
"size" : "512x512"
},
{
"idiom" : "mac",
"scale" : "2x",
"size" : "512x512"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

---

Packages/Docs Gesture Handler/README (packages/docs-gesture-handler/README.md)

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

console

yarn install

Local Development

console

yarn start

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build

console

yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

console

GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

---

Packages/Docs Gesture Handler/Package.Json (packages/docs-gesture-handler/package.json)

{
"name": "react-native-gesture-handler-docs",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build && node -r esbuild-register scripts/build-og-images.jsx",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc --noEmit",
"lint": "prettier --check docs src versioned_docs versioned_docs",
"format": "prettier --write --list-different docs src versioned_docs versioned_docs"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@docusaurus/core": "3.9.2",
"@docusaurus/plugin-client-redirects": "3.9.2",
"@docusaurus/plugin-debug": "3.9.2",
"@docusaurus/plugin-google-tag-manager": "3.9.2",
"@docusaurus/preset-classic": "3.9.2",
"@docusaurus/theme-common": "3.9.2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mdx-js/react": "^3.0.0",
"@mui/material": "^7.1.0",
"@swmansion/t-rex-ui": "1.3.7",
"@vercel/og": "^0.6.2",
"babel-polyfill": "^6.26.0",
"babel-preset-expo": "^9.2.2",
"babel-preset-react-native": "^4.0.1",
"clsx": "^2.1.0",
"copy-text-to-clipboard": "3.2.2",
"eslint-plugin-simple-import-sort": "^13.0.0",
"prism-react-renderer": "^2.1.0",
"raf": "^3.4.1",
"raw-loader": "^4.0.2",
"react": "19.1.1",
"react-colorful": "^5.6.1",
"react-dom": "19.1.1",
"react-draggable": "^4.4.5",
"react-native": "0.83.0",
"react-native-gesture-handler": "3.1.0",
"react-native-reanimated": "4.3.0",
"react-native-web": "0.21.2",
"react-native-worklets": "0.8.1",
"source-map": "^0.7.4",
"source-map-loader": "^4.0.1",
"usehooks-ts": "^2.9.1"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.9.2",
"@docusaurus/tsconfig": "3.9.2",
"copy-webpack-plugin": "^11.0.0",
"esbuild": "^0.28.1",
"esbuild-register": "^3.5.0",
"eslint-plugin-mdx": "^2.2.0",
"prettier": "^3.3.3",
"typescript": "~5.2.2",
"webpack-cli": "^7.0.2"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": ">=18.0"
},
"resolutions": {
"webpackbar": "^7.0.0"
},
"packageManager": "[email protected]"
}

---

Packages/Docs Gesture Handler/Redirects.Json (packages/docs-gesture-handler/redirects.json)

{
"redirects": [
{
"to": "/docs/fundamentals/getting-started",
"from": "/docs/"
},
{
"to": "/docs/fundamentals/getting-started",
"from": "/docs/fundamentals/introduction"
},
{
"to": "/docs/fundamentals/getting-started",
"from": "/docs/fundamentals/installation"
},
{
"to": "/docs/legacy-gestures/pan-gesture",
"from": "/docs/gestures/pan-gesture"
},
{
"to": "/docs/legacy-gestures/tap-gesture",
"from": "/docs/gestures/tap-gesture"
},
{
"to": "/docs/legacy-gestures/long-press-gesture",
"from": "/docs/gestures/long-press-gesture"
},
{
"to": "/docs/legacy-gestures/rotation-gesture",
"from": "/docs/gestures/rotation-gesture"
},
{
"to": "/docs/legacy-gestures/pinch-gesture",
"from": "/docs/gestures/pinch-gesture"
},
{
"to": "/docs/legacy-gestures/fling-gesture",
"from": "/docs/gestures/fling-gesture"
},
{
"to": "/docs/legacy-gestures/hover-gesture",
"from": "/docs/gestures/hover-gesture"
},
{
"to": "/docs/legacy-gestures/native-gesture",
"from": "/docs/gestures/native-gesture"
},
{
"to": "/docs/legacy-gestures/manual-gesture",
"from": "/docs/gestures/manual-gesture"
},
{
"to": "/docs/legacy-gestures/force-touch-gesture",
"from": "/docs/gestures/force-touch-gesture"
},
{
"to": "/docs/2.x/guides/upgrading-to-2",
"from": "/docs/guides/upgrading-to-2"
},
{
"to": "/docs/core-components/gesture-detectors",
"from": "/docs/gestures/gesture-detector"
},
{
"to": "/docs/core-components/gesture-detectors",
"from": "/docs/fundamentals/gesture-detectors"
},
{
"to": "/docs/core-components/root-view",
"from": "/docs/fundamentals/root-view"
},
{
"to": "/docs/fundamentals/gesture-animation",
"from": "/docs/guides/quickstart"
},
{
"to": "/docs/gestures/state-manager",
"from": "/docs/fundamentals/state-manager"
}
]
}

---

Packages/Docs Gesture Handler/Tsconfig.Json (packages/docs-gesture-handler/tsconfig.json)

{
// This file is not used in compilation. It is here just for a nice editor experience.
"extends": "@docusaurus/tsconfig",
"compilerOptions": {
"baseUrl": "."
}
}

---

Packages/Docs Gesture Handler/Docs/Components/ Category .Json (packages/docs-gesture-handler/docs/components/_category_.json)

{
"label": "Components",
"position": 6,
"link": {
"type": "generated-index"
}
}

---

Packages/Docs Gesture Handler/Docs/Components/Buttons (packages/docs-gesture-handler/docs/components/buttons.mdx)

---
id: buttons
title: Buttons
sidebar_label: Buttons
sidebar_position: 6
---

import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery';

:::danger
Button components described in this section are deprecated and will be removed in the future. Please use Touchable instead.
:::

The Gesture Handler library offers native components that function as buttons, serving as alternatives to TouchableHighlight or TouchableOpacity from the core React Native framework. These buttons process touch recognition natively, which ensures a deterministic response. This capability significantly enhances performance; for example, it allows for immediate ripple effects on Android, unlike TouchableNativeFeedback, which requires a touch event roundtrip to JavaScript that can cause delays, especially noticeable on older devices. Additionally, these components handle default platform interactions natively, particularly in scrollable containers where interactions are smartly delayed to prevent unintended highlighting during a fling.

Gesture Handler library exposes components that render native touchable elements under the hood:

- RawButton
- BaseButton
- RectButton
- BorderlessButton

On top of that all the buttons are wrapped with Native gesture and therefore allow for all its properties to be applied to them.

RawButton

The most basic button component does not provide any feedback and lacks props such as onPress. It serves as a foundation for other button components and is ideal if you wish to implement your own custom interactions for when the button is pressed.

RawButton accepts all Native gesture props, accessibility props, along with the following additional properties:

exclusive

exclusive?: boolean;

Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to true.

rippleColor [A]

</Badges>

rippleColor?: number | ColorValue | null;

Defines color of native ripple animation.

rippleRadius [A]

</Badges>

rippleRadius?: number | null;

Defines radius of native ripple animation.

borderless [A]

</Badges>

borderless?: boolean;

If set to false, ripple animation will render only within view bounds.

foreground [A]

</Badges>

foreground?: boolean;

Defines whether the ripple animation should be drawn on the foreground of the view.

touchSoundDisabled [A]

</Badges>

touchSoundDisabled?: boolean;

If set to true, the system will not play a sound when the button is pressed.

BaseButton

Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. It has all the props of RawButton and in addition to that it also provides the following props:

onPress

onPress?: (pointerInside: boolean) => void;

Triggered when the button gets pressed (analogous to onPress in TouchableHighlight from RN core).

onLongPress

onLongPress?: () => void;

Triggered when the button gets pressed for at least delayLongPress milliseconds.

onActiveStateChange

onActiveStateChange?: (active: boolean) => void;

Triggered when the button transitions between active and inactive states. It passes the current active state as a boolean variable to the method as the first parameter.

delayLongPress

delayLongPress?: number;

Defines the delay, in milliseconds, after which the onLongPress callback gets called. By default set to 600.

RectButton

This type of button component is ideal for use with rectangular elements or content blocks that can be pressed, such as table rows or buttons featuring text and icons. It ensures platform-specific interactions, such as rendering a rectangular ripple on Android or highlighting the background on iOS and older Android versions. In addition to the props offered by BaseButton, it accepts the following:

underlayColor

underlayColor?: string;

Background color that will be dimmed when the button is in an active state.

activeOpacity [I]

</Badges>

activeOpacity?: number;

Opacity applied to the underlay when the button is in an active state.

BorderlessButton

This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how TouchableOpacity works). In addition to the props of BaseButton, it accepts the following:

activeOpacity [I]

</Badges>

activeOpacity?: number;

Opacity applied to the button when it is in an active state.

Accessibility

To guarantee that buttons are fully accessible, you must wrap your children in a View marked as accessible and include the accessibilityRole="button" prop. This requirement applies to both iOS and Android platforms. Without these adjustments, the button won't be selectable on iOS, and on Android, it won't be clickable in accessibility mode.

tsx

// Not accessible:
const NotAccessibleButton = () => (
  <RectButton onPress={this._onPress}>
    <Text>Foo</Text>
  </RectButton>
);// Accessible:
const AccessibleButton = () => (
  <RectButton onPress={this._onPress}>
    <View accessible accessibilityRole="button">
      <Text>Bar</Text>
    </View>
  </RectButton>
);

Design patterns

Components listed here were not designed to behave and look in the same way on both platforms, but rather to be used for handling similar behaviour on iOS and Android taking into consideration their design concepts.

If you wish to get specific information about platforms design patterns, visit official Apple docs and Material.io guideline, which widely describe how to implement coherent design.

This library allows the use of native components with native feedback in adequate situations.

If you do not wish to implement a custom design approach, RectButton and BorderlessButton seem to be absolutely enough and there's no need to use anything else. In all the remaining cases, you can always rely on BaseButton which is a superclass for the other button classes and can be used as a generic React Native Touchable replacement that can be customized to your needs.

Below we list some of the common usecases for button components to be used along with the type of button that should be used according to the platform specific design guidelines.

Lists and action buttons

If you have a list with clickable items or have an action button that needs to display as a separate UI block (vs being inlined in a text) you should use RectButton. It changes opacity on click and additionally supports a ripple effect on Android.

To determine the emphasis of a button, it's vital to use a fill color or leave it transparent, especially on Android.
For medium emphasis, you may consider outlined buttons which are used for lower impact than fill buttons.

Icon or text only buttons

Use BorderlessButton for simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered, whereas on iOS the button will be dimmed.
It should be used if you wish to handle non-crucial actions and supportive behaviour.

---

Packages/Docs Gesture Handler/Docs/Components/Pressable (packages/docs-gesture-handler/docs/components/pressable.mdx)

---
id: pressable
title: Pressable
sidebar_label: Pressable
sidebar_position: 2
---

import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery';

:::info
This component is a drop-in replacement for the Pressable component.
:::

Pressable is a component that can detect various stages of tap, press, and hover interactions on any of its children.

To use Pressable, ensure that your app is wrapped in GestureHandlerRootView and import it as follows:

import { Pressable } from 'react-native-gesture-handler';

Properties

children

children?:
  | React.ReactNode
  | ((state: PressableStateCallbackType) => React.ReactNode);

Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.

style

style?:
  | StyleProp<ViewStyle>
  | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);

Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

onPress

onPress?: null | ((event: PressableEvent) => void);

Called after onPressOut when a single tap gesture is detected. Details about the event object can be found in the PressableEvent section below.

onPressIn

onPressIn?: null | ((event: PressableEvent) => void);

Called before onPress when a touch is engaged. Details about the event object can be found in the PressableEvent section below.

onPressOut

onPressOut?: null | ((event: PressableEvent) => void);

Called before onPress when a touch is released (before onPress). Details about the event object can be found in the PressableEvent section below.

onLongPress

onLongPress?: null | ((event: PressableEvent) => void);

Called immediately after pointer has been down for at least delayLongPress milliseconds.

After onLongPress has been called, onPressOut will be called as soon as the pointer is lifted and onPress will not be called at all.

cancelable

cancelable?: null | boolean;

Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true.

onHoverIn [A][W]

</Badges>

onHoverIn?: null | ((event: PressableEvent) => void);

Called when pointer is hovering over the element.

onHoverOut [A][W]

</Badges>

onHoverOut?: null | ((event: PressableEvent) => void);

Called when pointer stops hovering over the element.

delayHoverIn [W]

</Badges>

delayHoverIn?: number | null;

Duration to wait after hover in before calling onHoverIn.

delayHoverOut [W]

</Badges>

delayHoverOut?: number | null;

Duration to wait after hover out before calling onHoverOut.

delayLongPress

delayLongPress?: null | number;

Duration (in milliseconds) from onPressIn before onLongPress is called. Default value is 500 ms.

disabled

disabled?: null | boolean;

Whether the Pressable behavior is disabled.

hitSlop [A][I]

</Badges>

hitSlop?: null | Insets | number;

Additional distance outside of the view in which a press is detected and onPressIn is triggered.

The Insets type is essentially the same as Rect.

pressRetentionOffset [A][I]

</Badges>

pressRetentionOffset?: null | Insets | number;

Additional distance outside of the view (or hitSlop if present) in which a touch is considered a
press before onPressOut is triggered.

The Insets type is essentially the same as Rect.

android_disableSound [A]

</Badges>

android_disableSound?: null | boolean;

If true, doesn't play system sound on touch.

android_ripple [A]

</Badges>

android_ripple?: null | PressableAndroidRippleConfig;

Enables the Android ripple effect and configures its color, radius and other parameters.

Accepts values of type RippleConfig.

needsOffscreenAlphaCompositing [A]

</Badges>

needsOffscreenAlphaCompositing?: boolean;

Whether the view should render with an offscreen alpha-compositing buffer when its opacity is less than 1. Defaults to false.

testOnly_pressed

testOnly_pressed?: null | boolean;

Used only for documentation or testing (e.g. snapshot testing).

unstable_pressDelay

unstable_pressDelay?: number | undefined;

Duration (in milliseconds) to wait after press down before calling onPressIn.

PressableEvent

All Pressable callbacks receive an event object as a parameter, which is of type PressableEvent and has the following structure:

export type PressableEvent = { nativeEvent: InnerPressableEvent };export type InnerPressableEvent = {
  changedTouches: InnerPressableEvent[];
  identifier: number;
  locationX: number;
  locationY: number;
  pageX: number;
  pageY: number;
  target: number;
  timestamp: number;
  touches: InnerPressableEvent[];
  force?: number;
};

Example

See the full example in Gesture Handler repository.

<CollapsibleCode
label="Show full example"
expandedLabel="Hide full example"
lineBounds={[5, 20]}
src={import { View, Text, StyleSheet } from 'react-native'; import { GestureHandlerRootView, Pressable, } from 'react-native-gesture-handler';

export default function Example() { return ( <GestureHandlerRootView> <Pressable style={({ pressed }) => (pressed ? styles.highlight : styles.pressable)} hitSlop={20} pressRetentionOffset={20}> <View style={styles.textWrapper}> <Text style={styles.text}>Pressable!</Text> </View> </Pressable> </GestureHandlerRootView> ); }

const styles = StyleSheet.create({ pressable: { width: 120, height: 120, backgroundColor: 'mediumpurple', borderWidth: StyleSheet.hairlineWidth, }, highlight: { width: 120, height: 120, backgroundColor: 'red', borderWidth: StyleSheet.hairlineWidth, }, textWrapper: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { color: 'black', }, });}/>

---

Packages/Docs Gesture Handler/Docs/Components/Reanimated Drawer Layout (packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx)

---
id: reanimated-drawer-layout
title: Reanimated Drawer Layout
sidebar_label: Reanimated Drawer Layout
sidebar_position: 4
---

import useBaseUrl from '@docusaurus/useBaseUrl';

import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx';

:::info
This component acts as a cross-platform replacement for React Native's DrawerLayoutAndroid component, written using Reanimated. For detailed information on standard parameters, please refer to the React Native documentation.
:::

To use ReanimatedDrawerLayout, first ensure that Reanimated is installed and that your app is wrapped in GestureHandlerRootView. You can then import it as follows:

import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';

Properties

drawerType

drawerType?: DrawerType;

Specifies the way the drawer will be displayed.
Accepts values of the DrawerType enum. Defaults to FRONT.

- FRONT The drawer will be displayed above the content view.
- BACK The drawer will be displayed below the content view, revealed by sliding away the content view.
- SLIDE The drawer will appear attached to the content view, opening it slides both the drawer and the content view.

| FRONT | BACK | SLIDE |
| ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
| <img src={useBaseUrl('gifs/new-drawer-front.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> | <img src={useBaseUrl('gifs/new-drawer-slide.gif')} /> |

drawerBackgroundColor

drawerBackgroundColor?: string;

Color of the drawer's background.

drawerWidth

drawerWidth?: number;

Width of the drawer. Defaults to 200.

drawerLockMode

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
src={drawerLockMode?: DrawerLockMode;

export enum DrawerLockMode { UNLOCKED, LOCKED_CLOSED, LOCKED_OPEN, }}/>

Specifies the lock mode of the drawer.

- UNLOCKED The drawer is unlocked and can be opened or closed by gestures.
- LOCKED_CLOSED The drawer will move freely until it settles in a closed position, then the gestures will be disabled.
- LOCKED_OPEN The drawer will move freely until it settles in an opened position, then the gestures will be disabled.

keyboardDismissMode

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
src={keyboardDismissMode?: DrawerKeyboardDismissMode;

export enum DrawerKeyboardDismissMode { NONE, ON_DRAG, }}/>

Determines if the system keyboard should be closed upon dragging the drawer.

animationSpeed

animationSpeed?: number;

Speed of animation that will play when letting go, or dismissing the drawer.

minSwipeDistance

minSwipeDistance?: number;

Minimal distance to swipe before the drawer starts moving.

rootContainerStyle

rootContainerStyle?: StyleProp<ViewStyle>;

Style applied to the outermost container that wraps both the content view and the drawer. Note that this container has flex: 1 and overflow: 'hidden' applied by default.

contentContainerStyle

contentContainerStyle?: StyleProp<ViewStyle>;

Style applied to the container wrapping the content view (the children) and the background overlay.

drawerContainerStyle

drawerContainerStyle?: StyleProp<ViewStyle>;

Style applied to the container wrapping the drawer (the view returned by renderNavigationView).

edgeWidth

edgeWidth?: number;

Width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.

hideStatusBar

hideStatusBar?: boolean;

When set to true, drawer component will use StatusBar API to hide the OS status bar when the drawer is dragged or idle in the open position.

statusBarAnimation

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
collapsed={false}
src={statusBarAnimation?: StatusBarAnimation;

export type StatusBarAnimation = 'none' | 'fade' | 'slide';}/>

May be used in combination with hideStatusBar to select the animation used for hiding the status bar.
See StatusBar API docs. Defaults to slide.

overlayColor

overlayColor?: string;

Color of the background overlay on top of the content window when the drawer is open.
This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to rgba(0, 0, 0, 0.7).

renderNavigationView

renderNavigationView: (
  progressAnimatedValue: SharedValue<number>
) => ReactNode;

A renderer function for the drawer component is provided with a progress parameter called progressAnimatedValue, which is a SharedValue indicating the progress of the drawer's opening or closing animation. This value is 0 when the drawer is fully closed and 1 when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a ReactNode.

onDrawerClose

onDrawerClose?: () => void;

A function which is called when the drawer has been closed.

onDrawerOpen

onDrawerOpen?: () => void;

A function which is called when the drawer has been opened.

onDrawerSlide

onDrawerSlide?: (position: number) => void;

A function is called when the drawer is moving or animating, provided with a position parameter. This position value indicates the progress of the drawer's opening or closing animation. It equals 0 when the drawer is closed and 1 when the drawer is fully opened. This value can be utilized by the drawer component to animate its children as the drawer opens or closes.

onDrawerStateChanged

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 4]}
src={onDrawerStateChanged?: ( newState: DrawerState, drawerWillShow: boolean ) => void;

export enum DrawerState { IDLE, DRAGGING, SETTLING, }}/>

A function is called when the status of the drawer changes, taking newState to represent the drawer's interaction state and drawerWillShow, which is true when the drawer starts animating towards the open position and false otherwise.

enableTrackpadTwoFingerGesture [I][W]

</Badges>

enableTrackpadTwoFingerGesture?: boolean | SharedValue<boolean>;

Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture.

children

children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);

Either a component rendered in the content view or a function. If children is a function, it receives an openValue parameter - SharedValue that indicates the progress of the drawer's opening or closing animation. This value equals 0 when the drawer is closed and 1 when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a ReactNode.

enableContextMenu [W]

</Badges>

enableContextMenu: boolean;

Specifies whether the context menu should be enabled after clicking on the underlying view with the right mouse button. Default value is set to false if MouseButton.RIGHT is specified.

userSelect [W]

</Badges>

userSelect: 'none' | 'auto' | 'text';

This parameter allows specifying which userSelect property should be applied to the underlying view. Default value is set to "none".

activeCursor [W]

</Badges>

activeCursor?: ActiveCursor | SharedValue<ActiveCursor>;

This parameter allows specifying which cursor should be used when the gesture activates. Supports all CSS cursor values (e.g. "grab", "zoom-in"). Default value is set to "auto".

Drawer ref methods

Using a reference to ReanimatedDrawerLayout allows you to manually trigger the opening and closing of the component.

const drawerRef = useRef<DrawerLayoutMethods>(null);

Both methods accept an optional options parameter, which allows you to customize the animation of the drawer movement.

export type DrawerMovementOption = {
  initialVelocity?: number;
  animationSpeed?: number;
};

openDrawer

openDrawer: (options?: DrawerMovementOption) => void;

Allows manually opening the drawer.

closeDrawer

closeDrawer: (options?: DrawerMovementOption) => void;

Allows manually closing the drawer.

Example

Example of a ReanimatedDrawerLayout component can be found in Gesture Handler repository.

<CollapsibleCode
label="Show full example"
expandedLabel="Hide full example"
lineBounds={[14, 49]}
src={import React, { useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { GestureDetector, GestureHandlerRootView, useTapGesture, } from 'react-native-gesture-handler';

import ReanimatedDrawerLayout, { DrawerType, DrawerPosition, DrawerLayoutMethods, } from 'react-native-gesture-handler/ReanimatedDrawerLayout';

const DrawerPage = () => { return ( <View style={styles.drawerContainer}> <Text>Lorem ipsum</Text> </View> ); };

export default function ReanimatedDrawerExample() { const drawerRef = useRef<DrawerLayoutMethods>(null); const tapGesture = useTapGesture({ onDeactivate: () => { drawerRef.current?.openDrawer(); }, runOnJS: true, });

return ( <GestureHandlerRootView> <ReanimatedDrawerLayout ref={drawerRef} renderNavigationView={() => <DrawerPage />} drawerPosition={DrawerPosition.LEFT} drawerType={DrawerType.FRONT}> <View style={styles.innerContainer}> <GestureDetector gesture={tapGesture}> <View style={styles.box}> <Text>Open drawer</Text> </View> </GestureDetector> </View> </ReanimatedDrawerLayout> </GestureHandlerRootView> ); }

const styles = StyleSheet.create({ drawerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', }, innerContainer: { flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', gap: 20, }, box: { padding: 20, backgroundColor: 'pink', }, });}/>

---

Packages/Docs Gesture Handler/Docs/Components/Reanimated Swipeable (packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx)

---
id: reanimated_swipeable
title: Reanimated Swipeable
sidebar_label: Reanimated Swipeable
sidebar_position: 3
---

import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery'

:::info
This component is a drop-in replacement for the Swipeable component, rewritten using Reanimated.
:::

ReanimatedSwipeable is designed for implementing swipeable rows or similar interactions. It places its children inside a pannable container that enables horizontal swiping to the left and right. Depending on the direction of the swipe, one of two "action" containers will be displayed, which can be configured using the renderLeftActions or renderRightActions props.

To use ReanimatedSwipeable, first ensure that Reanimated is installed and that your app is wrapped in GestureHandlerRootView. You can then import it as follows:

import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

Properties

friction

friction?: number;

Number that specifies how much the visual interaction will be delayed compared to the gesture distance.

e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times "slower".

leftThreshold

leftThreshold?: number;

Distance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.

rightThreshold

rightThreshold?: number;

Distance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.

dragOffsetFromLeft

dragOffsetFromLeft?: number | SharedValue<number>;

The horizontal offset from the starting point required to trigger a right-swipe gesture. Defaults to 10.

dragOffsetFromRight

dragOffsetFromRight?: number | SharedValue<number>;

The horizontal offset from the starting point required to trigger a left-swipe gesture. Defaults to -10.

overshootLeft

overshootLeft?: boolean;

A boolean value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to true by default as long as the left panel render function is present.

overshootRight

overshootRight?: boolean;

A boolean value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to true by default as long as the right panel render function is present.

overshootFriction

overshootFriction?: number;

A number specifying the delay of visual interaction compared to the gesture distance when overshooting. The default value is 1, which means no friction. For a more native feel, try using a value of 8 or higher.

onSwipeableOpen

onSwipeableOpen?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable is opened (either right or left).
Receives swipe direction as an argument.

onSwipeableClose

onSwipeableClose?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable is closed.
Receives swipe direction as an argument.

onSwipeableWillOpen

onSwipeableWillOpen?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable starts animating on open (either right or left).
Receives swipe direction as an argument.

onSwipeableWillClose

onSwipeableWillClose?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable starts animating on close.
Receives swipe direction as an argument.

onSwipeableOpenStartDrag

onSwipeableOpenStartDrag?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when a user starts to drag the Swipeable to open.
Receives swipe direction as an argument.

onSwipeableCloseStartDrag

onSwipeableCloseStartDrag?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when a user starts to drag the Swipeable to close.
Receives swipe direction as an argument.

renderLeftActions

renderLeftActions?: (
  progress: SharedValue<number>,
  translation: SharedValue<number>,
  swipeableMethods: SwipeableMethods
) => React.ReactNode;

A function that returns a component which will be rendered beneath the Swipeable after it is swiped to the right. This function accepts the following parameters:

- progress - a SharedValue that represents the swiping progress relative to the width of the returned element.
- It equals 0 when the Swipeable is fully closed and 1 when it is fully opened.
- As the element overshoots its open position, the value approaches Infinity.
- translation - a horizontal offset of the Swipeable relative to its closed position.
- swipeableMethods - provides an object exposing methods detailed in the methods section.

This function must return a ReactNode. To accommodate rtl (right-to-left) flexbox layouts, use the flexDirection style property.

renderRightActions

renderRightActions?: (
  progress: SharedValue<number>,
  translation: SharedValue<number>,
  swipeableMethods: SwipeableMethods
) => React.ReactNode;

A function that returns a component which will be rendered beneath the Swipeable after it is swiped to the left. This function accepts the following parameters:

This function must return a ReactNode. To accommodate rtl (right-to-left) flexbox layouts, use the flexDirection style property.

containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style object for the container (Animated.View).

childrenContainerStyle

childrenContainerStyle?: StyleProp<ViewStyle>;

Style object for the children container (Animated.View).

simultaneousWith

simultaneousWith?: AnyGesture | AnyGesture[];

Gestures to be recognized simultaneously with the Swipeable (see simultaneousWith).

requireToFail

requireToFail?: AnyGesture | AnyGesture[];

Gestures that Swipeable has to wait for before activating (see requireToFail).

block

block?: AnyGesture | AnyGesture[];

Gestures that Swipeable will prevent from activating (see block).

enableTrackpadTwoFingerGesture [I][W]

</Badges>

enableTrackpadTwoFingerGesture?: boolean | SharedValue<boolean>;

enabled

enabled?: boolean | SharedValue<boolean>;

Indicates whether ReanimatedSwipeable should be analyzing the stream of touch events or not. Defaults to true.

testID

testID?: string;

Sets a testID property, allowing for querying ReanimatedSwipeable for it in tests.

hitSlop

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
collapsed={false}
src={hitSlop?: HitSlop | SharedValue<HitSlop>;

type HitSlop = | number | null | undefined | Partial< Record< 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal', number > > | Record<'width' | 'left', number> | Record<'width' | 'right', number> | Record<'height' | 'top', number> | Record<'height' | 'bottom', number>;}/>

This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
When a negative number is provided, the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
See hitSlop section in Pan gesture for more details.

Swipeable ref methods

Using a reference to Swipeable allows you to manually trigger the opening and closing of the component, as well as reset its swiping state.

const swipeableRef = useRef<SwipeableMethods>(null);

close

close: () => void;

A method that closes component.

openLeft

openLeft: () => void;

A method that opens component on left side.

openRight

openRight: () => void;

A method that opens component on right side.

reset

reset: () => void;

A method that resets the swiping states of this Swipeable component. Unlike close, this method does not trigger any animation.

Example

Example of a Swipeable component can be found in Gesture Handler repository.

<CollapsibleCode
label="Show full example"
expandedLabel="Hide full example"
lineBounds={[10, 41]}
src={import React from 'react'; import { Text, StyleSheet } from 'react-native';

import { GestureHandlerRootView } from 'react-native-gesture-handler'; import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; import Reanimated, { SharedValue, useAnimatedStyle, } from 'react-native-reanimated';

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) { const styleAnimation = useAnimatedStyle(() => { console.log('showRightProgress:', prog.value); console.log('appliedTranslation:', drag.value);

return { transform: [{ translateX: drag.value + 50 }], }; });

return ( <Reanimated.View style={styleAnimation}> <Text style={styles.rightAction}>Text</Text> </Reanimated.View> ); }

export default function Example() { return ( <GestureHandlerRootView> <ReanimatedSwipeable containerStyle={styles.swipeable} friction={2} enableTrackpadTwoFingerGesture rightThreshold={40} renderRightActions={RightAction}> <Text>Swipe me!</Text> </ReanimatedSwipeable> </GestureHandlerRootView> ); }

const styles = StyleSheet.create({ rightAction: { width: 50, height: 50, backgroundColor: 'purple' }, separator: { width: '100%', borderTopWidth: 1, }, swipeable: { height: 50, backgroundColor: 'papayawhip', alignItems: 'center', }, });}/>

---

Packages/Docs Gesture Handler/Docs/Components/Touchable (packages/docs-gesture-handler/docs/components/touchable.mdx)

---
id: touchable
title: Touchable
sidebar_label: Touchable
sidebar_position: 1
---

:::note
This section refers to new Touchable component, meant to replace both buttons and touchables. If you are looking for documentation for the deprecated touchable components, check out the Legacy Touchables section.
:::

Touchable is a versatile new component introduced in Gesture Handler 3 to supersede previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.

Touchable provides a simple interface for the common animations like opacity, underlay, and scale, implemented entirely on the platform. On Android, it also exposes the native ripple effect on press (turned off by default).

If the provided animations are not sufficient, it's possible to use Touchable to create fully custom interactions using either Reanimated or Animated API.

Replacing old buttons

If you were using RectButton or BorderlessButton in your app, you should replace them with Touchable. Check out the full code in the example section below.

RectButton

To replace RectButton with Touchable, add underlayColor="black" to your Touchable. This will tint the underlay when the button is pressed. The legacy RectButton switches states instantly with no fade, so also set animationDuration={0} to match its behavior.

tsx

<Touchable
  ...
  underlayColor="black"
  animationDuration={0}/>

:::note Android ripple
The legacy RectButton shows the native theme ripple on Android by default, while Touchable disables the ripple unless androidRipple is set. To keep the legacy Android feedback, set androidRipple={{}} on Android instead of underlayColor/animationDuration — combining the two would render a ripple and an underlay animation simultaneously. Use Platform.select to apply the right props per platform:

tsx

import { Platform } from 'react-native';<Touchable
  {...Platform.select({
    android: { androidRipple: {} },
    default: { underlayColor: 'black', animationDuration: 0 },
  })}
/>

:::

BorderlessButton

Replacing BorderlessButton with Touchable is as easy as replacing RectButton. Add activeOpacity={0.3} to dim the whole component on press, and animationDuration={0} to keep the transition instant — matching the legacy BorderlessButton.

tsx

<Touchable
  ...
  activeOpacity={0.3}
  animationDuration={0}/>

:::note Android ripple
Same caveat as RectButton: the legacy BorderlessButton shows the native theme ripple on Android. To preserve that, set androidRipple={{ borderless: true }} on Android instead of activeOpacity/animationDuration:

tsx

<Touchable
  {...Platform.select({
    android: { androidRipple: { borderless: true } },
    default: { activeOpacity: 0.3, animationDuration: 0 },
  })}
/>

:::

Migrating from legacy Touchable variants

If you were using the specialized touchable components (TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, or TouchableNativeFeedback), you can replicate their behavior with the unified Touchable component.

TouchableOpacity

To replace TouchableOpacity, add activeOpacity={0.2}. The legacy TouchableOpacity dims instantly on press-in and fades back over 150ms on release, so set animationDuration={{ in: 0, out: 150 }} to mirror that timing.

tsx

<Touchable
  ...
  activeOpacity={0.2}
  animationDuration={{ in: 0, out: 150 }}/>

TouchableHighlight

A perfect 1:1 replacement isn't possible — in TouchableHighlight the container's own background becomes the underlay (solid underlayColor) and activeOpacity dims just the children on top, so the underlay shows through the dimmed children. Touchable instead has a separate underlay layer between the background and children, and its activeOpacity dims the whole component (background + underlay + children together). The closest approximation: carry underlayColor and activeOpacity over unchanged and add activeUnderlayOpacity={1} so the underlay layer is rendered solid.

tsx

<Touchable
  ...
  underlayColor="#DDDDDD"
  activeUnderlayOpacity={1}
  activeOpacity={0.6}/>

TouchableWithoutFeedback

To replace TouchableWithoutFeedback, use a plain Touchable.

tsx

<Touchable ... />

TouchableNativeFeedback

To replicate TouchableNativeFeedback behavior, use the androidRipple prop. The legacy component defaults to useForeground: true, so set foreground: true to match — drop it only if the original code passed useForeground={false}. Add color, radius, or borderless if the original code customized the background prop.

tsx

<Touchable
  ...
  androidRipple={{ foreground: true }}/>

Example

In this example we will demonstrate how to recreate RectButton and BorderlessButton effects using the Touchable component.

<CollapsibleCode
label="Show full example"
expandedLabel="Hide full example"
lineBounds={[7, 40]}
src={import React from 'react'; import { StyleSheet, Text } from 'react-native'; import { GestureHandlerRootView, Touchable, } from 'react-native-gesture-handler';

export default function TouchableExample() { return ( <GestureHandlerRootView style={styles.container}> <Touchable onPress={() => { console.log('BaseButton built with Touchable'); }} style={[styles.button, { backgroundColor: '#7d63d9' }]}> <Text style={styles.buttonText}>BaseButton</Text> </Touchable>

<Touchable onPress={() => { console.log('RectButton built with Touchable'); }} style={[styles.button, { backgroundColor: '#4f9a84' }]} underlayColor="black" animationDuration={0}> <Text style={styles.buttonText}>RectButton</Text> </Touchable>

<Touchable onPress={() => { console.log('BorderlessButton built with Touchable'); }} style={[styles.button, { backgroundColor: '#5f97c8' }]} activeOpacity={0.3} animationDuration={0}> <Text style={styles.buttonText}>BorderlessButton</Text> </Touchable> </GestureHandlerRootView> ); }

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center',

gap: 20, }, button: { width: 200, height: 70, borderRadius: 15, alignItems: 'center', justifyContent: 'center', }, buttonText: { color: 'white', fontSize: 14, fontWeight: '600', }, });}/>

Properties

activeOpacity

activeOpacity?: number;

Defines the opacity of the whole component when the button is active.

defaultOpacity

defaultOpacity?: number;

Defines the opacity of the whole component when the button is active. By default set to 1.

activeScale

activeScale?: number;

Defines the scale of the whole component when the button is active.

defaultScale

defaultScale?: number;

Defines the scale of the whole component when the button is inactive. By default set to 1.

activeUnderlayOpacity

activeUnderlayOpacity?: number;

Defines the opacity of the underlay when the button is active. By default set to 0.105.

defaultUnderlayOpacity

defaultUnderlayOpacity?: number;

Defines the initial opacity of underlay when the button is inactive. By default set to 0.

hoverOpacity

hoverOpacity?: number;

Defines the opacity of the whole component when the button is hovered. By default falls back to defaultOpacity.

hoverScale

hoverScale?: number;

Defines the scale of the whole component when the button is hovered. By default falls back to defaultScale.

hoverUnderlayOpacity

hoverUnderlayOpacity?: number;

Defines the opacity of the underlay when the button is hovered. By default falls back to defaultUnderlayOpacity.

animationDuration

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
src={animationDuration?: AnimationDuration;

type InOutDuration = { in: number; out: number };

type AnimationDuration = | number | (InOutDuration & { tap?: Partial<InOutDuration>; hover?: Partial<InOutDuration>; longPress?: { out: number }; }) | { tap: InOutDuration; hover: InOutDuration; longPress?: { out: number }; };}/>

Press and hover animation timing, in milliseconds. Defaults to 50ms for the in phase and 100ms for the out phase.

Each animation has two phases — in (running while the pointer engages the component) and out (running after the pointer releases) — across two categories:
- tap — applies to presses.
- hover — pointer hover.

longPress is an optional override for the press-out timing once the press has been held past delayLongPress. It only has an out field (the press-in is always the tap in duration). If omitted, the long-press release uses the resolved tap out duration.

Three input shapes are accepted:

1. A single number applied to every phase of every category:

tsx

<Touchable animationDuration={200} />

2. A baseline in / out with optional per-category overrides — categories that aren't specified inherit the baseline, and within a category any field left out also inherits from the baseline:

tsx

<Touchable
  animationDuration={{
    in: 50,
    out: 200,
    hover: { in: 400 },
  }}
/>

3. Both categories specified explicitly (no baseline) — every field must be supplied:

tsx

<Touchable
  animationDuration={{
    tap: { in: 0, out: 200 },
    hover: { in: 300, out: 300 },
  }}
/>

To give a long press its own release timing, add longPress.out. The switch fires when the press is held past delayLongPress:

tsx

<Touchable
  delayLongPress={400}
  onLongPress={() => {}}
  animationDuration={{
    in: 50,
    out: 100,
    longPress: { out: 500 },
  }}
/>

underlayColor

underlayColor?: string;

Background color of the underlay. This only takes effect when activeUnderlayOpacity or defaultUnderlayOpacity is set. By default set to transparent.

exclusive

exclusive?: boolean;

Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to true.

touchSoundDisabled [A]

</Badges>

touchSoundDisabled?: boolean;

If set to true, the system will not play a sound when the button is pressed.

onPressIn

<CollapsibleCode
label="Show composed types definitions"
expandedLabel="Hide composed types definitions"
lineBounds={[0, 1]}
src={onPressIn?: (e: ButtonEvent) => void;

type ButtonEvent = { pointerInside: boolean; x: number; y: number; absoluteX: number; absoluteY: number; numberOfPointers: number; pointerType: PointerType; }