├── .clang-format ├── .eslintrc.json ├── .git-blame-ignore-revs ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug-report.yml │ └── config.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── android-build-paper.yml │ ├── android-build.yml │ ├── check-archs-consistency.yml │ ├── close-when-stale.yml │ ├── docs-check.yml │ ├── ios-build-paper.yml │ ├── ios-build.yml │ ├── kotlin-lint.yml │ ├── macos-build.yml │ ├── main.yml │ ├── needs-more-info.yml │ ├── needs-repro.yml │ ├── platforms.yml │ ├── static-example-apps-checks.yml │ ├── static-root-checks.yml │ └── yarn-validation.yml ├── .gitignore ├── .husky ├── pre-commit └── pre-push ├── .lintstagedrc.json ├── .prettierrc.json ├── .yarn └── releases │ └── yarn-4.7.0.cjs ├── .yarnrc.yml ├── LICENSE ├── README.md ├── apps ├── basic-example │ ├── .bundle │ │ └── config │ ├── .gitignore │ ├── Gemfile │ ├── Gemfile.lock │ ├── README.md │ ├── android │ │ ├── app │ │ │ ├── build.gradle │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── basicexample │ │ │ │ │ ├── MainActivity.kt │ │ │ │ │ └── MainApplication.kt │ │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── index.js │ ├── ios │ │ ├── .xcode.env │ │ ├── BasicExample.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── BasicExample.xcscheme │ │ ├── BasicExample.xcworkspace │ │ │ └── contents.xcworkspacedata │ │ ├── BasicExample │ │ │ ├── AppDelegate.swift │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── PrivacyInfo.xcprivacy │ │ ├── Podfile │ │ └── Podfile.lock │ ├── jest.config.js │ ├── metro.config.js │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── ComponentsScreen.tsx │ │ ├── FinalScreen.tsx │ │ ├── GestureCompositionScreen.tsx │ │ ├── HomeScreen.tsx │ │ ├── Navigator.tsx │ │ ├── ViewFlatteningScreen.tsx │ │ ├── colors.ts │ │ └── utils.ts │ └── tsconfig.json ├── common-app │ ├── .gitignore │ ├── App.tsx │ ├── README.md │ ├── index.ts │ ├── package.json │ ├── src │ │ ├── ListWithHeader │ │ │ ├── Header.tsx │ │ │ ├── ListWithHeader.tsx │ │ │ ├── index.ts │ │ │ ├── signet.png │ │ │ └── text.png │ │ ├── basic │ │ │ ├── bouncing │ │ │ │ └── index.tsx │ │ │ ├── draggable │ │ │ │ └── index.tsx │ │ │ ├── fling │ │ │ │ └── index.tsx │ │ │ ├── forcetouch │ │ │ │ └── index.tsx │ │ │ ├── horizontalDrawer │ │ │ │ └── index.tsx │ │ │ ├── multitap │ │ │ │ └── index.tsx │ │ │ ├── pagerAndDrawer │ │ │ │ ├── index.android.tsx │ │ │ │ └── index.tsx │ │ │ └── panResponder │ │ │ │ └── index.tsx │ │ ├── common.tsx │ │ ├── config.tsx │ │ ├── empty │ │ │ └── EmptyExample.tsx │ │ ├── new_api │ │ │ ├── betterHorizontalDrawer │ │ │ │ ├── BetterHorizonatalDrawer.tsx │ │ │ │ └── index.tsx │ │ │ ├── bottom_sheet │ │ │ │ └── index.tsx │ │ │ ├── calculator │ │ │ │ └── index.tsx │ │ │ ├── camera │ │ │ │ ├── AnimatedCameraView.macos.tsx │ │ │ │ ├── AnimatedCameraView.tsx │ │ │ │ └── index.tsx │ │ │ ├── chat_heads │ │ │ │ └── index.tsx │ │ │ ├── drag_n_drop │ │ │ │ ├── DragAndDrop.tsx │ │ │ │ ├── Draggable.tsx │ │ │ │ ├── Tile.tsx │ │ │ │ ├── constants.tsx │ │ │ │ └── index.tsx │ │ │ ├── hover │ │ │ │ └── index.tsx │ │ │ ├── hoverable_icons │ │ │ │ ├── freeze.png │ │ │ │ ├── gh.png │ │ │ │ ├── index.tsx │ │ │ │ ├── rea.png │ │ │ │ ├── screens.png │ │ │ │ └── svg.png │ │ │ ├── manualGestures │ │ │ │ └── index.tsx │ │ │ ├── overlap │ │ │ │ └── index.tsx │ │ │ ├── pressable │ │ │ │ └── index.tsx │ │ │ ├── swipeable │ │ │ │ ├── AppleStyleSwipeableRow.tsx │ │ │ │ ├── GmailStyleSwipeableRow.tsx │ │ │ │ └── index.tsx │ │ │ ├── transformations │ │ │ │ └── index.tsx │ │ │ └── velocityTest │ │ │ │ └── index.tsx │ │ ├── recipes │ │ │ ├── panAndScroll │ │ │ │ └── index.tsx │ │ │ └── scaleAndRotate │ │ │ │ ├── index.tsx │ │ │ │ ├── swm.svg │ │ │ │ └── swmansion.png │ │ ├── release_tests │ │ │ ├── StylusData │ │ │ │ └── index.tsx │ │ │ ├── combo │ │ │ │ └── index.tsx │ │ │ ├── contextMenu │ │ │ │ └── index.tsx │ │ │ ├── doubleDraggable │ │ │ │ └── index.tsx │ │ │ ├── doubleScalePinchAndRotate │ │ │ │ └── index.tsx │ │ │ ├── gesturizedPressable │ │ │ │ ├── androidRippleExample.tsx │ │ │ │ ├── delayedPressExample.tsx │ │ │ │ ├── functionalStylesExample.tsx │ │ │ │ ├── hitSlopExample.tsx │ │ │ │ ├── hoverDelayExample.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── testingBase.tsx │ │ │ ├── mouseButtons │ │ │ │ └── index.tsx │ │ │ ├── nestedButtons │ │ │ │ └── index.tsx │ │ │ ├── nestedFling │ │ │ │ └── index.tsx │ │ │ ├── nestedGHRootViewWithModal │ │ │ │ └── index.tsx │ │ │ ├── nestedPressables │ │ │ │ └── index.tsx │ │ │ ├── nestedText │ │ │ │ └── index.tsx │ │ │ ├── nestedTouchables │ │ │ │ └── index.tsx │ │ │ ├── overflowParent │ │ │ │ └── index.tsx │ │ │ ├── pointerType │ │ │ │ └── index.tsx │ │ │ ├── reanimatedDrawerLayout │ │ │ │ └── index.tsx │ │ │ ├── rectButton │ │ │ │ └── index.tsx │ │ │ ├── rows │ │ │ │ └── index.tsx │ │ │ ├── svg │ │ │ │ └── index.tsx │ │ │ ├── swipeableReanimation │ │ │ │ └── index.tsx │ │ │ ├── touchables │ │ │ │ └── index.tsx │ │ │ ├── twoFingerPan │ │ │ │ └── index.tsx │ │ │ └── webStylesReset │ │ │ │ └── index.tsx │ │ ├── showcase │ │ │ ├── bottomSheet │ │ │ │ └── index.tsx │ │ │ ├── chatHeads │ │ │ │ └── index.tsx │ │ │ └── swipeable │ │ │ │ ├── AppleStyleSwipeableRow.tsx │ │ │ │ ├── GmailStyleSwipeableRow.tsx │ │ │ │ └── index.tsx │ │ └── simple │ │ │ ├── draggable │ │ │ └── index.tsx │ │ │ ├── fling │ │ │ └── index.tsx │ │ │ ├── longPress │ │ │ └── index.tsx │ │ │ ├── manual │ │ │ └── index.tsx │ │ │ └── tap │ │ │ └── index.tsx │ └── tsconfig.json ├── expo-example │ ├── .gitignore │ ├── App.tsx │ ├── README.md │ ├── app.config.js │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ ├── splash-icon.png │ │ └── splash.png │ ├── index.ts │ ├── metro.config.js │ ├── package.json │ └── tsconfig.json └── macos-example │ ├── .gitignore │ ├── Gemfile │ ├── Gemfile.lock │ ├── README.md │ ├── app.json │ ├── babel.config.js │ ├── index.ts │ ├── jest.config.js │ ├── macos │ ├── .gitignore │ ├── .xcode.env │ ├── MacOSExample-macOS │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Assets.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Base.lproj │ │ │ └── Main.storyboard │ │ ├── Info.plist │ │ ├── MacOSExample.entitlements │ │ └── main.m │ ├── MacOSExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── MacOSExample-macOS.xcscheme │ ├── MacOSExample.xcworkspace │ │ └── contents.xcworkspacedata │ ├── Podfile │ ├── Podfile.lock │ └── PrivacyInfo.xcprivacy │ ├── metro.config.js │ ├── package.json │ └── tsconfig.json ├── package.json ├── packages ├── docs-gesture-handler │ ├── .gitignore │ ├── .yarn │ │ └── releases │ │ │ └── yarn-1.22.22.cjs │ ├── .yarnrc │ ├── README.md │ ├── babel.config.js │ ├── components │ │ └── GifGallery.js │ ├── docs │ │ ├── components │ │ │ ├── _category_.json │ │ │ ├── buttons.mdx │ │ │ ├── drawer-layout.mdx │ │ │ ├── pressable.mdx │ │ │ ├── reanimated-drawer-layout.mdx │ │ │ ├── reanimated_swipeable.md │ │ │ ├── swipeable.md │ │ │ └── touchables.md │ │ ├── fundamentals │ │ │ ├── _category_.json │ │ │ ├── gesture-composition.md │ │ │ ├── installation.md │ │ │ ├── introduction.md │ │ │ └── states-events.mdx │ │ ├── gesture-handlers │ │ │ ├── _category_.json │ │ │ ├── about-handlers.md │ │ │ ├── common-gh.md │ │ │ ├── create-native-wrapper.md │ │ │ ├── fling-gh.md │ │ │ ├── force-gh.md │ │ │ ├── interactions.md │ │ │ ├── longpress-gh.md │ │ │ ├── nativeview-gh.md │ │ │ ├── pan-gh.md │ │ │ ├── pinch-gh.md │ │ │ ├── rotation-gh.md │ │ │ └── tap-gh.md │ │ ├── gestures │ │ │ ├── _category_.json │ │ │ ├── _shared │ │ │ │ ├── base-continuous-gesture-callbacks.md │ │ │ │ ├── base-continuous-gesture-config.md │ │ │ │ ├── base-gesture-callbacks.md │ │ │ │ ├── base-gesture-config.md │ │ │ │ ├── base-gesture-event-data.md │ │ │ │ └── gesture-detector-functional1.md │ │ │ ├── composed-gestures.md │ │ │ ├── fling-gesture.md │ │ │ ├── force-touch-gesture.md │ │ │ ├── gesture-detector.md │ │ │ ├── gesture.md │ │ │ ├── hover-gesture.md │ │ │ ├── long-press-gesture.md │ │ │ ├── manual-gesture.md │ │ │ ├── native-gesture.md │ │ │ ├── pan-gesture.md │ │ │ ├── pinch-gesture.md │ │ │ ├── rotation-gesture.md │ │ │ ├── state-manager.md │ │ │ ├── tap-gesture.md │ │ │ └── touch-events.md │ │ ├── guides │ │ │ ├── _category_.json │ │ │ ├── manual-gestures │ │ │ │ ├── _steps │ │ │ │ │ ├── step1.md │ │ │ │ │ ├── step2.md │ │ │ │ │ ├── step3.md │ │ │ │ │ ├── step4.md │ │ │ │ │ ├── step5.md │ │ │ │ │ ├── step6.md │ │ │ │ │ └── step7.md │ │ │ │ └── index.md │ │ │ ├── migrating-off-rnghenabledroot.md │ │ │ ├── quickstart │ │ │ │ ├── _steps │ │ │ │ │ ├── step1.md │ │ │ │ │ ├── step2.md │ │ │ │ │ ├── step3.md │ │ │ │ │ ├── step4.md │ │ │ │ │ └── step5.md │ │ │ │ └── index.md │ │ │ ├── swipe-and-scroll.md │ │ │ ├── testing.md │ │ │ ├── troubleshooting.md │ │ │ └── upgrading-to-2.md │ │ └── under-the-hood │ │ │ ├── _category_.json │ │ │ ├── how-does-it-work.md │ │ │ └── state.md │ ├── docusaurus.config.js │ ├── package.json │ ├── scripts │ │ ├── build-og-images.jsx │ │ └── og-image-stream.jsx │ ├── sidebars.js │ ├── src │ │ ├── components │ │ │ ├── AlgoliaSearchBar │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── AnimableIcon │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── CollapseButton │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── CollapsibleCode │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── FooterBackground │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── GestureExamples │ │ │ │ ├── FlingExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── GestureExampleItem │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── LongPressExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── PanExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── PinchExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── RotationExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── TapExample │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ └── utils.tsx │ │ │ ├── GestureFeatures │ │ │ │ ├── GestureFeatureItem │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── GestureFeatureList │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── Hero │ │ │ │ ├── LandingBackground │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Planets │ │ │ │ │ ├── PlanetsIcon │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── PlanetsIconDark │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Stars │ │ │ │ │ ├── StarsIcon │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── StarsIconDark │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ └── StartScreen │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ ├── HomepageButton │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── InteractiveExample │ │ │ │ ├── InteractiveExampleComponent │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── LandingExampleComponent │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── Moon │ │ │ │ ├── MoonIcon │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ └── MoonIconDark │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ ├── Playground │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── ReducedMotionWarning │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── SidebarLabel │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── Sponsors │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ ├── Testimonials │ │ │ │ ├── TestimonialItem │ │ │ │ │ ├── QuoteIcon │ │ │ │ │ │ └── index.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── TestimonialList │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ └── Wave │ │ │ │ ├── WaveIcon │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ │ ├── WaveIconBig │ │ │ │ ├── index.tsx │ │ │ │ └── styles.module.css │ │ │ │ └── index.tsx │ │ ├── css │ │ │ ├── colors.css │ │ │ ├── index.css │ │ │ ├── overrides.css │ │ │ └── typography.css │ │ ├── examples │ │ │ └── GestureStateFlowExample │ │ │ │ ├── Arrow.tsx │ │ │ │ ├── ChartItem.tsx │ │ │ │ ├── ChartManager.ts │ │ │ │ ├── FlowChart.tsx │ │ │ │ └── index.tsx │ │ ├── hooks │ │ │ ├── usePageType.tsx │ │ │ └── useScreenSize.tsx │ │ ├── pages │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── theme │ │ │ ├── Admonition │ │ │ │ └── index.js │ │ │ ├── AnnouncementBar │ │ │ │ ├── CloseButton │ │ │ │ │ ├── index.js │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Content │ │ │ │ │ ├── ArrowButton │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── styles.module.css │ │ │ │ ├── index.js │ │ │ │ └── styles.module.css │ │ │ ├── CodeBlock │ │ │ │ ├── highlighting-dark.js │ │ │ │ └── highlighting-light.js │ │ │ ├── DocCard │ │ │ │ └── index.js │ │ │ ├── DocItem │ │ │ │ ├── Metadata │ │ │ │ │ └── index.js │ │ │ │ └── TOC │ │ │ │ │ └── Mobile │ │ │ │ │ └── index.js │ │ │ ├── DocSidebar │ │ │ │ └── index.js │ │ │ ├── DocSidebarItem │ │ │ │ └── index.js │ │ │ ├── DocSidebarItems │ │ │ │ └── index.js │ │ │ ├── Footer │ │ │ │ └── index.js │ │ │ ├── MDXComponents.js │ │ │ ├── MDXComponents │ │ │ │ ├── Details.js │ │ │ │ ├── DetailsStyling.tsx │ │ │ │ └── styles.module.css │ │ │ ├── Navbar │ │ │ │ └── index.js │ │ │ ├── NotFound │ │ │ │ ├── index.js │ │ │ │ └── mapLegacyUrl.js │ │ │ ├── PaginatorNavLink │ │ │ │ └── index.js │ │ │ ├── Root.js │ │ │ ├── SearchPage │ │ │ │ └── index.js │ │ │ ├── Step │ │ │ │ ├── index.js │ │ │ │ └── styles.module.css │ │ │ ├── TOCCollapsible │ │ │ │ └── index.js │ │ │ ├── TOCItems │ │ │ │ ├── Tree.js │ │ │ │ └── index.js │ │ │ └── muiTheme.tsx │ │ └── utils │ │ │ ├── getGestureStyles.tsx │ │ │ └── style.module.css │ ├── static │ │ ├── .nojekyll │ │ ├── examples │ │ │ ├── FlingGestureBasic.js │ │ │ ├── FlingGestureBasicSrc.js │ │ │ ├── HoverGestureBasic.js │ │ │ ├── LongPressGestureBasic.js │ │ │ ├── PanGestureBasic.js │ │ │ ├── PanGestureBasicSrc.js │ │ │ ├── PinchGestureBasic.js │ │ │ ├── PinchGestureBasicSrc.js │ │ │ ├── RotationGestureBasic.js │ │ │ ├── RotationGestureBasicSrc.js │ │ │ └── TapGestureBasic.js │ │ ├── fonts │ │ │ ├── Aeonik-Air.woff │ │ │ ├── Aeonik-Air.woff2 │ │ │ ├── Aeonik-AirItalic.woff │ │ │ ├── Aeonik-AirItalic.woff2 │ │ │ ├── Aeonik-Black.woff │ │ │ ├── Aeonik-Black.woff2 │ │ │ ├── Aeonik-BlackItalic.woff │ │ │ ├── Aeonik-BlackItalic.woff2 │ │ │ ├── Aeonik-Bold.otf │ │ │ ├── Aeonik-Bold.woff │ │ │ ├── Aeonik-Bold.woff2 │ │ │ ├── Aeonik-BoldItalic.woff │ │ │ ├── Aeonik-BoldItalic.woff2 │ │ │ ├── Aeonik-Light.woff │ │ │ ├── Aeonik-Light.woff2 │ │ │ ├── Aeonik-LightItalic.woff │ │ │ ├── Aeonik-LightItalic.woff2 │ │ │ ├── Aeonik-Medium.otf │ │ │ ├── Aeonik-Medium.woff │ │ │ ├── Aeonik-Medium.woff2 │ │ │ ├── Aeonik-MediumItalic.woff │ │ │ ├── Aeonik-MediumItalic.woff2 │ │ │ ├── Aeonik-Regular.otf │ │ │ ├── Aeonik-Regular.woff │ │ │ ├── Aeonik-Regular.woff2 │ │ │ ├── Aeonik-RegularItalic.woff │ │ │ ├── Aeonik-RegularItalic.woff2 │ │ │ ├── Aeonik-Thin.woff │ │ │ ├── Aeonik-Thin.woff2 │ │ │ ├── Aeonik-ThinItalic.woff │ │ │ ├── Aeonik-ThinItalic.woff2 │ │ │ ├── DMMono-Regular.ttf │ │ │ ├── Lexend-Bold.ttf │ │ │ └── Lexend-SemiBold.ttf │ │ ├── gifs │ │ │ ├── androidbutton.gif │ │ │ ├── androidmail.gif │ │ │ ├── androidsettings.gif │ │ │ ├── drawer-back.gif │ │ │ ├── drawer-front.gif │ │ │ ├── drawer-parallax.gif │ │ │ ├── drawer-slide.gif │ │ │ ├── iosmail.gif │ │ │ ├── iossettings.gif │ │ │ ├── new-drawer-back.gif │ │ │ ├── new-drawer-front.gif │ │ │ ├── new-drawer-slide.gif │ │ │ ├── pressable.gif │ │ │ ├── sampleapp.gif │ │ │ ├── samplebutton.gif │ │ │ └── sampleswipeable.gif │ │ ├── img │ │ │ ├── Arrow-dark.svg │ │ │ ├── Arrow.svg │ │ │ ├── arrow-circle-left.svg │ │ │ ├── arrow-left-dark.svg │ │ │ ├── arrow-left.svg │ │ │ ├── arrow-right-dark.svg │ │ │ ├── arrow-right-hero.svg │ │ │ ├── arrow-right.svg │ │ │ ├── brand-dark.svg │ │ │ ├── brand.svg │ │ │ ├── card-icon-dark.svg │ │ │ ├── card-icon.svg │ │ │ ├── copy-dark.svg │ │ │ ├── copy.svg │ │ │ ├── danger-dark.svg │ │ │ ├── danger.svg │ │ │ ├── expo-dark.svg │ │ │ ├── expo.svg │ │ │ ├── favicon.ico │ │ │ ├── github.svg │ │ │ ├── hand-one.svg │ │ │ ├── hand-two.svg │ │ │ ├── logo-hero.svg │ │ │ ├── og-image.png │ │ │ ├── pinch-reworked.svg │ │ │ ├── react-native-paradise.svg │ │ │ ├── reset-dark.svg │ │ │ ├── reset.svg │ │ │ ├── shopify-dark.svg │ │ │ ├── shopify.svg │ │ │ ├── state-of-react-native-logo.svg │ │ │ ├── swm-react-native-reanimated-illu-kon-06.svg │ │ │ ├── swm-react-native-reanimated-illu-top-05.svg │ │ │ ├── swmLogo.svg │ │ │ ├── title-dark.svg │ │ │ ├── title.svg │ │ │ └── two-arrows.svg │ │ ├── js │ │ │ └── snack-helpers.js │ │ └── video │ │ │ ├── fling.mp4 │ │ │ ├── hover.mp4 │ │ │ ├── longpress.mp4 │ │ │ ├── pan.mp4 │ │ │ ├── pinch.mp4 │ │ │ ├── rotation.mp4 │ │ │ └── tap.mp4 │ ├── tsconfig.json │ ├── unproccessed │ │ └── og-image.png │ ├── versioned_docs │ │ └── version-1.x │ │ │ ├── about-handlers.md │ │ │ ├── api │ │ │ ├── components │ │ │ │ ├── buttons.mdx │ │ │ │ ├── drawer-layout.mdx │ │ │ │ ├── swipeable.md │ │ │ │ └── touchables.md │ │ │ └── gesture-handlers │ │ │ │ ├── common-gh.md │ │ │ │ ├── create-native-wrapper.md │ │ │ │ ├── fling-gh.md │ │ │ │ ├── force-gh.md │ │ │ │ ├── longpress-gh.md │ │ │ │ ├── nativeview-gh.md │ │ │ │ ├── pan-gh.md │ │ │ │ ├── pinch-gh.md │ │ │ │ ├── rotation-gh.md │ │ │ │ └── tap-gh.md │ │ │ ├── contributing.md │ │ │ ├── credits.md │ │ │ ├── example.md │ │ │ ├── getting-started.md │ │ │ ├── interactions.md │ │ │ ├── resources.md │ │ │ ├── state.md │ │ │ └── troubleshooting.md │ ├── versioned_sidebars │ │ └── version-1.x-sidebars.json │ ├── versions.json │ └── yarn.lock └── react-native-gesture-handler │ ├── .gitignore │ ├── DrawerLayout │ └── package.json │ ├── LICENSE │ ├── RNGestureHandler.podspec │ ├── ReanimatedDrawerLayout │ └── package.json │ ├── ReanimatedSwipeable │ └── package.json │ ├── Swipeable │ └── package.json │ ├── android │ ├── build.gradle │ ├── fabric │ │ └── src │ │ │ └── main │ │ │ └── java │ │ │ └── com │ │ │ └── swmansion │ │ │ └── gesturehandler │ │ │ ├── RNGestureHandlerComponentsRegistry.java │ │ │ └── ReactContextExtensions.kt │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── noreanimated │ │ └── src │ │ │ └── main │ │ │ └── java │ │ │ └── com │ │ │ └── swmansion │ │ │ ├── common │ │ │ └── GestureHandlerStateManager.kt │ │ │ └── gesturehandler │ │ │ └── ReanimatedEventDispatcher.kt │ ├── nosvg │ │ └── src │ │ │ └── main │ │ │ └── java │ │ │ └── com │ │ │ └── swmansion │ │ │ └── gesturehandler │ │ │ └── RNSVGHitTester.kt │ ├── paper │ │ └── src │ │ │ └── main │ │ │ └── java │ │ │ └── com │ │ │ ├── facebook │ │ │ └── react │ │ │ │ └── viewmanagers │ │ │ │ ├── RNGestureHandlerButtonManagerDelegate.java │ │ │ │ ├── RNGestureHandlerButtonManagerInterface.java │ │ │ │ ├── RNGestureHandlerRootViewManagerDelegate.java │ │ │ │ └── RNGestureHandlerRootViewManagerInterface.java │ │ │ └── swmansion │ │ │ └── gesturehandler │ │ │ ├── NativeRNGestureHandlerModuleSpec.java │ │ │ └── ReactContextExtensions.kt │ ├── reanimated │ │ └── src │ │ │ └── main │ │ │ └── java │ │ │ └── com │ │ │ └── swmansion │ │ │ └── gesturehandler │ │ │ └── ReanimatedEventDispatcher.kt │ ├── settings.gradle │ ├── spotless.gradle │ ├── src │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── swmansion │ │ │ │ └── gesturehandler │ │ │ │ ├── RNGestureHandlerPackage.kt │ │ │ │ ├── core │ │ │ │ ├── DiagonalDirections.kt │ │ │ │ ├── FlingGestureHandler.kt │ │ │ │ ├── GestureHandler.kt │ │ │ │ ├── GestureHandlerInteractionController.kt │ │ │ │ ├── GestureHandlerOrchestrator.kt │ │ │ │ ├── GestureHandlerRegistry.kt │ │ │ │ ├── GestureUtils.kt │ │ │ │ ├── HoverGestureHandler.kt │ │ │ │ ├── LongPressGestureHandler.kt │ │ │ │ ├── ManualGestureHandler.kt │ │ │ │ ├── NativeViewGestureHandler.kt │ │ │ │ ├── OnTouchEventListener.kt │ │ │ │ ├── PanGestureHandler.kt │ │ │ │ ├── PinchGestureHandler.kt │ │ │ │ ├── PointerEventsConfig.kt │ │ │ │ ├── RotationGestureDetector.kt │ │ │ │ ├── RotationGestureHandler.kt │ │ │ │ ├── ScaleGestureDetector.java │ │ │ │ ├── StylusData.kt │ │ │ │ ├── TapGestureHandler.kt │ │ │ │ ├── Vector.kt │ │ │ │ └── ViewConfigurationHelper.kt │ │ │ │ └── react │ │ │ │ ├── Extensions.kt │ │ │ │ ├── RNGestureHandlerButtonViewManager.kt │ │ │ │ ├── RNGestureHandlerEnabledRootView.kt │ │ │ │ ├── RNGestureHandlerEvent.kt │ │ │ │ ├── RNGestureHandlerEventDispatcher.kt │ │ │ │ ├── RNGestureHandlerFactoryUtil.kt │ │ │ │ ├── RNGestureHandlerInteractionManager.kt │ │ │ │ ├── RNGestureHandlerModule.kt │ │ │ │ ├── RNGestureHandlerRegistry.kt │ │ │ │ ├── RNGestureHandlerRootHelper.kt │ │ │ │ ├── RNGestureHandlerRootInterface.kt │ │ │ │ ├── RNGestureHandlerRootView.kt │ │ │ │ ├── RNGestureHandlerRootViewManager.kt │ │ │ │ ├── RNGestureHandlerStateChangeEvent.kt │ │ │ │ ├── RNGestureHandlerTouchEvent.kt │ │ │ │ ├── RNViewConfigurationHelper.kt │ │ │ │ └── eventbuilders │ │ │ │ ├── FlingGestureHandlerEventDataBuilder.kt │ │ │ │ ├── GestureHandlerEventDataBuilder.kt │ │ │ │ ├── HoverGestureHandlerEventDataBuilder.kt │ │ │ │ ├── LongPressGestureHandlerEventDataBuilder.kt │ │ │ │ ├── ManualGestureHandlerEventDataBuilder.kt │ │ │ │ ├── NativeGestureHandlerEventDataBuilder.kt │ │ │ │ ├── PanGestureHandlerEventDataBuilder.kt │ │ │ │ ├── PinchGestureHandlerEventDataBuilder.kt │ │ │ │ ├── RotationGestureHandlerEventDataBuilder.kt │ │ │ │ └── TapGestureHandlerEventDataBuilder.kt │ │ │ └── jni │ │ │ ├── CMakeLists.txt │ │ │ └── cpp-adapter.cpp │ └── svg │ │ └── src │ │ └── main │ │ └── java │ │ └── com │ │ └── swmansion │ │ └── gesturehandler │ │ └── RNSVGHitTester.kt │ ├── apple │ ├── Handlers │ │ ├── RNFlingHandler.h │ │ ├── RNFlingHandler.m │ │ ├── RNForceTouchHandler.h │ │ ├── RNForceTouchHandler.m │ │ ├── RNHoverHandler.h │ │ ├── RNHoverHandler.m │ │ ├── RNLongPressHandler.h │ │ ├── RNLongPressHandler.m │ │ ├── RNManualHandler.h │ │ ├── RNManualHandler.m │ │ ├── RNNativeViewHandler.h │ │ ├── RNNativeViewHandler.mm │ │ ├── RNPanHandler.h │ │ ├── RNPanHandler.m │ │ ├── RNPinchHandler.h │ │ ├── RNPinchHandler.m │ │ ├── RNRotationHandler.h │ │ ├── RNRotationHandler.m │ │ ├── RNTapHandler.h │ │ └── RNTapHandler.m │ ├── RNGHStylusData.h │ ├── RNGHStylusData.m │ ├── RNGHTouchEventType.h │ ├── RNGHUIKit.h │ ├── RNGHVector.h │ ├── RNGHVector.m │ ├── RNGestureHandler.h │ ├── RNGestureHandler.mm │ ├── RNGestureHandler.xcodeproj │ │ ├── project.pbxproj │ │ └── project.xcworkspace │ │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── RNGestureHandlerActionType.h │ ├── RNGestureHandlerButton.h │ ├── RNGestureHandlerButton.mm │ ├── RNGestureHandlerButtonComponentView.h │ ├── RNGestureHandlerButtonComponentView.mm │ ├── RNGestureHandlerButtonManager.h │ ├── RNGestureHandlerButtonManager.mm │ ├── RNGestureHandlerDirection.h │ ├── RNGestureHandlerEvents.h │ ├── RNGestureHandlerEvents.m │ ├── RNGestureHandlerManager.h │ ├── RNGestureHandlerManager.mm │ ├── RNGestureHandlerModule.h │ ├── RNGestureHandlerModule.mm │ ├── RNGestureHandlerPointerTracker.h │ ├── RNGestureHandlerPointerTracker.m │ ├── RNGestureHandlerPointerType.h │ ├── RNGestureHandlerRegistry.h │ ├── RNGestureHandlerRegistry.m │ ├── RNGestureHandlerRootViewComponentView.mm │ ├── RNGestureHandlerState.h │ ├── RNGestureHandlerStateManager.h │ ├── RNManualActivationRecognizer.h │ ├── RNManualActivationRecognizer.m │ ├── RNRootViewGestureRecognizer.h │ └── RNRootViewGestureRecognizer.m │ ├── babel.config.js │ ├── jest-utils │ └── package.json │ ├── jest.config.js │ ├── jestSetup.js │ ├── package.json │ ├── src │ ├── ActionType.ts │ ├── Directions.ts │ ├── EnableNewWebImplementation.ts │ ├── GestureHandlerRootViewContext.ts │ ├── PlatformConstants.ts │ ├── PlatformConstants.web.ts │ ├── PointerType.ts │ ├── RNGestureHandlerModule.ts │ ├── RNGestureHandlerModule.web.ts │ ├── RNGestureHandlerModule.windows.ts │ ├── RNRenderer.ts │ ├── RNRenderer.web.ts │ ├── State.ts │ ├── TouchEventType.ts │ ├── __mocks__ │ │ └── RNGestureHandlerModule.ts │ ├── __tests__ │ │ ├── Events.test.tsx │ │ └── utils.test.tsx │ ├── components │ │ ├── DrawerLayout.tsx │ │ ├── GestureButtons.tsx │ │ ├── GestureButtonsProps.ts │ │ ├── GestureComponents.tsx │ │ ├── GestureComponents.web.tsx │ │ ├── GestureHandlerButton.tsx │ │ ├── GestureHandlerButton.web.tsx │ │ ├── GestureHandlerRootView.android.tsx │ │ ├── GestureHandlerRootView.tsx │ │ ├── GestureHandlerRootView.web.tsx │ │ ├── Pressable │ │ │ ├── Pressable.tsx │ │ │ ├── PressableProps.tsx │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ ├── ReanimatedDrawerLayout.tsx │ │ ├── ReanimatedSwipeable.tsx │ │ ├── Swipeable.tsx │ │ ├── Text.tsx │ │ ├── gestureHandlerRootHOC.tsx │ │ ├── touchables │ │ │ ├── ExtraButtonProps.ts │ │ │ ├── GenericTouchable.tsx │ │ │ ├── GenericTouchableProps.ts │ │ │ ├── TouchableHighlight.tsx │ │ │ ├── TouchableNativeFeedback.android.tsx │ │ │ ├── TouchableNativeFeedback.tsx │ │ │ ├── TouchableNativeFeedbackProps.tsx │ │ │ ├── TouchableOpacity.tsx │ │ │ ├── TouchableWithoutFeedback.tsx │ │ │ └── index.ts │ │ └── utils.ts │ ├── findNodeHandle.ts │ ├── findNodeHandle.web.ts │ ├── getShadowNodeFromRef.ts │ ├── getShadowNodeFromRef.web.ts │ ├── ghQueueMicrotask.ts │ ├── handlers │ │ ├── FlingGestureHandler.ts │ │ ├── ForceTouchGestureHandler.ts │ │ ├── GestureHandlerEventPayload.ts │ │ ├── LongPressGestureHandler.ts │ │ ├── NativeViewGestureHandler.ts │ │ ├── PanGestureHandler.ts │ │ ├── PinchGestureHandler.ts │ │ ├── PressabilityDebugView.tsx │ │ ├── PressabilityDebugView.web.tsx │ │ ├── RotationGestureHandler.ts │ │ ├── TapGestureHandler.ts │ │ ├── createHandler.tsx │ │ ├── createNativeWrapper.tsx │ │ ├── customDirectEventTypes.ts │ │ ├── customDirectEventTypes.web.ts │ │ ├── gestureHandlerCommon.ts │ │ ├── gestureHandlerTypesCompat.ts │ │ ├── gestures │ │ │ ├── GestureDetector │ │ │ │ ├── Wrap.tsx │ │ │ │ ├── Wrap.web.tsx │ │ │ │ ├── attachHandlers.ts │ │ │ │ ├── dropHandlers.ts │ │ │ │ ├── index.tsx │ │ │ │ ├── needsToReattach.ts │ │ │ │ ├── types.ts │ │ │ │ ├── updateHandlers.ts │ │ │ │ ├── useAnimatedGesture.ts │ │ │ │ ├── useDetectorUpdater.ts │ │ │ │ ├── useMountReactions.ts │ │ │ │ ├── useViewRefHandler.ts │ │ │ │ └── utils.ts │ │ │ ├── eventReceiver.ts │ │ │ ├── flingGesture.ts │ │ │ ├── forceTouchGesture.ts │ │ │ ├── gesture.ts │ │ │ ├── gestureComposition.ts │ │ │ ├── gestureObjects.ts │ │ │ ├── gestureStateManager.ts │ │ │ ├── gestureStateManager.web.ts │ │ │ ├── hoverGesture.ts │ │ │ ├── longPressGesture.ts │ │ │ ├── manualGesture.ts │ │ │ ├── nativeGesture.ts │ │ │ ├── panGesture.ts │ │ │ ├── pinchGesture.ts │ │ │ ├── reanimatedWrapper.ts │ │ │ ├── rotationGesture.ts │ │ │ └── tapGesture.ts │ │ ├── getNextHandlerTag.ts │ │ ├── handlersRegistry.ts │ │ └── utils.ts │ ├── index.ts │ ├── init.ts │ ├── jestUtils │ │ ├── index.ts │ │ └── jestUtils.ts │ ├── mocks.tsx │ ├── mountRegistry.ts │ ├── specs │ │ ├── NativeRNGestureHandlerModule.ts │ │ ├── RNGestureHandlerButtonNativeComponent.ts │ │ └── RNGestureHandlerRootViewNativeComponent.ts │ ├── typeUtils.ts │ ├── utils.ts │ ├── web │ │ ├── Gestures.ts │ │ ├── constants.ts │ │ ├── detectors │ │ │ ├── RotationGestureDetector.ts │ │ │ └── ScaleGestureDetector.ts │ │ ├── handlers │ │ │ ├── FlingGestureHandler.ts │ │ │ ├── GestureHandler.ts │ │ │ ├── HoverGestureHandler.ts │ │ │ ├── IGestureHandler.ts │ │ │ ├── LongPressGestureHandler.ts │ │ │ ├── ManualGestureHandler.ts │ │ │ ├── NativeViewGestureHandler.ts │ │ │ ├── PanGestureHandler.ts │ │ │ ├── PinchGestureHandler.ts │ │ │ ├── RotationGestureHandler.ts │ │ │ └── TapGestureHandler.ts │ │ ├── interfaces.ts │ │ ├── tools │ │ │ ├── CircularBuffer.ts │ │ │ ├── EventManager.ts │ │ │ ├── GestureHandlerDelegate.ts │ │ │ ├── GestureHandlerOrchestrator.ts │ │ │ ├── GestureHandlerWebDelegate.ts │ │ │ ├── InteractionManager.ts │ │ │ ├── KeyboardEventManager.ts │ │ │ ├── LeastSquareSolver.ts │ │ │ ├── NodeManager.ts │ │ │ ├── PointerEventManager.ts │ │ │ ├── PointerTracker.ts │ │ │ ├── Vector.ts │ │ │ ├── VelocityTracker.ts │ │ │ └── WheelEventManager.ts │ │ └── utils.ts │ └── web_hammer │ │ ├── DiscreteGestureHandler.ts │ │ ├── DraggingGestureHandler.ts │ │ ├── Errors.ts │ │ ├── FlingGestureHandler.ts │ │ ├── GestureHandler.ts │ │ ├── IndiscreteGestureHandler.ts │ │ ├── LongPressGestureHandler.ts │ │ ├── NativeViewGestureHandler.ts │ │ ├── NodeManager.ts │ │ ├── PanGestureHandler.ts │ │ ├── PinchGestureHandler.ts │ │ ├── PressGestureHandler.ts │ │ ├── RotationGestureHandler.ts │ │ ├── TapGestureHandler.ts │ │ ├── constants.ts │ │ └── utils.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── scripts ├── check-android-dirs.js ├── check-rn-versions.js ├── clangd-add-xcode-step.rb ├── clangd-generate-xcode-metadata.sh ├── codegen-check-consistency.js ├── codegen-sync-archs.js ├── codegen-utils.js ├── format-android.js └── format-apple.js ├── tsconfig.json └── yarn.lock /.git-blame-ignore-revs: -------------------------------------------------------------------------------- 1 | # .git-blame-ignore-revs 2 | # Reformatted iOS codebase 3 | 9cf4245740e01f216850da999a7e630da53c7ea6 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: software-mansion 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Question 4 | url: https://github.com/software-mansion/react-native-gesture-handler/discussions/categories/q-a 5 | about: Please ask and answer questions here. 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 8 | 9 | ## Test plan 10 | 11 | 14 | -------------------------------------------------------------------------------- /.github/workflows/close-when-stale.yml: -------------------------------------------------------------------------------- 1 | name: Check for stale issues 2 | 3 | on: 4 | schedule: 5 | - cron: '37 21 * * *' # at 21:37 every day 6 | issues: 7 | types: [edited] 8 | issue_comment: 9 | types: [created, edited] 10 | workflow_dispatch: 11 | 12 | jobs: 13 | main: 14 | if: github.repository == 'software-mansion/react-native-gesture-handler' 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - name: Checkout Actions 19 | uses: actions/checkout@v4 20 | with: 21 | repository: software-mansion-labs/swmansion-bot 22 | ref: stable 23 | 24 | - uses: actions/cache@v4 25 | with: 26 | path: '**/node_modules' 27 | key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} 28 | 29 | - name: Install Actions 30 | run: yarn install 31 | 32 | - name: Close when stale 33 | uses: ./close-when-stale 34 | with: 35 | close-when-stale-label: Close when stale 36 | days-to-close: 20 37 | -------------------------------------------------------------------------------- /.github/workflows/docs-check.yml: -------------------------------------------------------------------------------- 1 | name: Check documentation 2 | 3 | on: 4 | pull_request: 5 | paths: 6 | - packages/docs-gesture-handler/** 7 | workflow_dispatch: 8 | 9 | jobs: 10 | check: 11 | if: github.repository == 'software-mansion/react-native-gesture-handler' 12 | 13 | runs-on: ubuntu-latest 14 | env: 15 | WORKING_DIRECTORY: packages/docs-gesture-handler 16 | concurrency: 17 | group: docs-check-${{ github.ref }} 18 | cancel-in-progress: true 19 | 20 | steps: 21 | - name: checkout 22 | uses: actions/checkout@v4 23 | 24 | - name: Use Node.js 18 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: 18 28 | cache: yarn 29 | 30 | - name: Install node dependencies 31 | working-directory: ${{ env.WORKING_DIRECTORY }} 32 | run: yarn 33 | 34 | - name: Generate docs 35 | working-directory: ${{ env.WORKING_DIRECTORY }} 36 | run: yarn build 37 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Publish to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | publish: 10 | if: github.repository == 'software-mansion/react-native-gesture-handler' 11 | 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - name: Check out 16 | uses: actions/checkout@v1 17 | 18 | - name: Generate docs 19 | run: >- 20 | git config --local user.email "action@github.com" 21 | && git config --local user.name "GitHub Action" 22 | && cd packages/docs-gesture-handler 23 | && yarn 24 | && yarn build 25 | 26 | - name: Publish generated content to GitHub Pages 27 | uses: JamesIves/github-pages-deploy-action@releases/v3 28 | with: 29 | FOLDER: packages/docs-gesture-handler/build 30 | BRANCH: gh-pages 31 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # CocoaPods 25 | **/ios/Pods 26 | 27 | # Android/IntelliJ 28 | # 29 | build/ 30 | .idea 31 | .gradle 32 | .cxx 33 | local.properties 34 | *.iml 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # Expo 49 | .expo/ 50 | web-build/ 51 | 52 | # vscode 53 | jsconfig.json 54 | .classpath 55 | .project 56 | .settings/ 57 | .vscode 58 | 59 | # Yarn 60 | .yarn/* 61 | !.yarn/cache 62 | !.yarn/patches 63 | !.yarn/plugins 64 | !.yarn/releases 65 | !.yarn/sdks 66 | !.yarn/versions 67 | 68 | 69 | # TS 70 | dist/ 71 | 72 | # generated by bob 73 | /lib/ 74 | 75 | # clangd 76 | .cache 77 | CompilationDatabase 78 | compile_commands.json 79 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | print() { 5 | echo " [PRECOMMIT]: $1" >&2 6 | } 7 | 8 | BRANCH=$(git symbolic-ref HEAD) 9 | if [ "$BRANCH" = "refs/heads/main" ]; then 10 | print "You tried to commit to main, which is probably a mistake. Aborting commit." 11 | exit 1 12 | fi 13 | 14 | yarn lint-staged 15 | yarn ts-check 16 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | print() { 4 | echo " [PREPUSH]: $1" >&2 5 | } 6 | 7 | BRANCH=$(git symbolic-ref HEAD) 8 | if [ "$BRANCH" = "refs/heads/main" ]; then 9 | print "You tried to push to main, which is probably a mistake. Aborting push." 10 | exit 1 11 | fi 12 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "{apps/basic-example,packages/react-native-gesture-handler}/package.json": "node scripts/check-rn-versions.js", 3 | "**/*.{ts,tsx}": ["prettier --write", "eslint"], 4 | "packages/react-native-gesture-handler/android/**/*.kt": [ 5 | "node scripts/check-android-dirs.js", 6 | "yarn format:android" 7 | ], 8 | "packages/react-native-gesture-handler/apple/**/*.{h,m,mm,cpp}": "yarn format:apple", 9 | "packages/react-native-gesture-handler/src/specs/*.ts": "yarn workspace react-native-gesture-handler sync-architectures" 10 | } 11 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSameLine": true, 3 | "printWidth": 80, 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "es5" 8 | } 9 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | yarnPath: .yarn/releases/yarn-4.7.0.cjs 2 | nodeLinker: node-modules 3 | -------------------------------------------------------------------------------- /apps/basic-example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /apps/basic-example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | 12 | # Ruby 3.4.0 has removed some libraries from the standard library. 13 | gem 'bigdecimal' 14 | gem 'logger' 15 | gem 'benchmark' 16 | gem 'mutex_m' 17 | -------------------------------------------------------------------------------- /apps/basic-example/README.md: -------------------------------------------------------------------------------- 1 | # Basic Gesture Handler example app 2 | 3 | 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. 4 | 5 | ## Installing & running application 6 | 7 | Before running application you need to install all dependencies. To do that: 8 | 9 | - In project's root directory run `yarn` 10 | 11 | ### Android 12 | 13 | You can run this application by `yarn android` or from Android Studio. 14 | 15 | ### iOS 16 | 17 | To run on iOS first go to `BasicExample/ios` and run `pod install`. 18 | 19 | Then in `BasicExample` run `yarn ios` or run application from Xcode. 20 | -------------------------------------------------------------------------------- /apps/basic-example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/debug.keystore -------------------------------------------------------------------------------- /apps/basic-example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/java/com/basicexample/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.basicexample 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "BasicExample" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | BasicExample 3 | 4 | -------------------------------------------------------------------------------- /apps/basic-example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/basic-example/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "35.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 35 6 | targetSdkVersion = 35 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.0.21" 9 | isGHExampleApp = true 10 | } 11 | repositories { 12 | google() 13 | mavenCentral() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle") 17 | classpath("com.facebook.react:react-native-gradle-plugin") 18 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 19 | } 20 | allprojects { 21 | project.pluginManager.withPlugin("com.facebook.react") { 22 | react { 23 | reactNativeDir = rootProject.file("../../../node_modules/react-native/") 24 | codegenDir = rootProject.file("../../../node_modules/react-native-codegen/") 25 | } 26 | } 27 | } 28 | } 29 | 30 | apply plugin: "com.facebook.react.rootproject" 31 | -------------------------------------------------------------------------------- /apps/basic-example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/basic-example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /apps/basic-example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /apps/basic-example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'BasicExample' 5 | include ':app' 6 | includeBuild('../../../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /apps/basic-example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BasicExample", 3 | "displayName": "BasicExample" 4 | } 5 | -------------------------------------------------------------------------------- /apps/basic-example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /apps/basic-example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import { AppRegistry } from 'react-native'; 6 | import App from './src/App'; 7 | import { name as appName } from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /apps/basic-example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /apps/basic-example/ios/BasicExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /apps/basic-example/ios/BasicExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /apps/basic-example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /apps/basic-example/src/colors.ts: -------------------------------------------------------------------------------- 1 | export const COLORS = { 2 | NAVY: '#001A72', 3 | KINDA_RED: '#FFB2AD', 4 | YELLOW: '#FFF096', 5 | KINDA_GREEN: '#C4E7DB', 6 | KINDA_BLUE: '#A0D5EF', 7 | }; 8 | -------------------------------------------------------------------------------- /apps/basic-example/src/utils.ts: -------------------------------------------------------------------------------- 1 | export function isHermes(): boolean { 2 | // @ts-expect-error HermesInternal is not yet included in the RN types 3 | return !!global?.HermesInternal; 4 | } 5 | 6 | export function isFabric(): boolean { 7 | // @ts-expect-error nativeFabricUIManager is not yet included in the RN types 8 | return !!global?.nativeFabricUIManager; 9 | } 10 | -------------------------------------------------------------------------------- /apps/basic-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "react-native-gesture-handler": [ 8 | "../../packages/react-native-gesture-handler/src" 9 | ], 10 | "react-native-gesture-handler/ReanimatedSwipeable": [ 11 | "../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx" 12 | ], 13 | "react-native-gesture-handler/ReanimatedDrawerLayout": [ 14 | "../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx" 15 | ], 16 | "react-native-gesture-handler/jest-utils": [ 17 | "../../packages/react-native-gesture-handler/src/jestUtils/index.ts" 18 | ] 19 | } 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.tsx"] 22 | } 23 | -------------------------------------------------------------------------------- /apps/common-app/README.md: -------------------------------------------------------------------------------- 1 | # Gesture Handler example app 2 | 3 | This is project contains source code for examples shared betwwen example apps. 4 | -------------------------------------------------------------------------------- /apps/common-app/index.ts: -------------------------------------------------------------------------------- 1 | import App from './App'; 2 | 3 | export default App; 4 | -------------------------------------------------------------------------------- /apps/common-app/src/ListWithHeader/index.ts: -------------------------------------------------------------------------------- 1 | export { ListWithHeader } from './ListWithHeader'; 2 | export { HEADER_HEIGHT, COLLAPSED_HEADER_HEIGHT } from './Header'; 3 | -------------------------------------------------------------------------------- /apps/common-app/src/ListWithHeader/signet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/ListWithHeader/signet.png -------------------------------------------------------------------------------- /apps/common-app/src/ListWithHeader/text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/ListWithHeader/text.png -------------------------------------------------------------------------------- /apps/common-app/src/basic/pagerAndDrawer/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Text } from 'react-native'; 3 | 4 | export default class Example extends Component { 5 | render() { 6 | return Sorry, this is a demo of android-only native components; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /apps/common-app/src/config.tsx: -------------------------------------------------------------------------------- 1 | export const USE_NATIVE_DRIVER = true; 2 | -------------------------------------------------------------------------------- /apps/common-app/src/empty/EmptyExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | export default function EmptyExample() { 5 | return ( 6 | 7 | 😞 8 | It's so empty here 9 | 10 | ); 11 | } 12 | 13 | const styles = StyleSheet.create({ 14 | container: { 15 | flex: 1, 16 | justifyContent: 'center', 17 | alignItems: 'center', 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /apps/common-app/src/new_api/camera/AnimatedCameraView.macos.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | 4 | export default function Camera() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /apps/common-app/src/new_api/drag_n_drop/constants.tsx: -------------------------------------------------------------------------------- 1 | import { Dimensions } from 'react-native'; 2 | 3 | export function getSizeConstants({ 4 | itemsInRowCount, 5 | rowGap, 6 | columnGap, 7 | }: { 8 | itemsInRowCount: number; 9 | rowGap: number; 10 | columnGap: number; 11 | }) { 12 | const TILE_SIZE = 13 | (Dimensions.get('screen').width - (itemsInRowCount + 1) * columnGap) / 14 | itemsInRowCount; 15 | const TILE_WITH_MARGIN_SIZE = TILE_SIZE + columnGap; 16 | const ROW_HEIGHT = TILE_SIZE + rowGap; 17 | 18 | return { 19 | TILE_SIZE, 20 | TILE_WITH_MARGIN_SIZE, 21 | ROW_HEIGHT, 22 | }; 23 | } 24 | 25 | export const ANIMATE_TO_NEW_PLACE_DURATION = 100; 26 | -------------------------------------------------------------------------------- /apps/common-app/src/new_api/hoverable_icons/freeze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/new_api/hoverable_icons/freeze.png -------------------------------------------------------------------------------- /apps/common-app/src/new_api/hoverable_icons/gh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/new_api/hoverable_icons/gh.png -------------------------------------------------------------------------------- /apps/common-app/src/new_api/hoverable_icons/rea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/new_api/hoverable_icons/rea.png -------------------------------------------------------------------------------- /apps/common-app/src/new_api/hoverable_icons/screens.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/new_api/hoverable_icons/screens.png -------------------------------------------------------------------------------- /apps/common-app/src/new_api/hoverable_icons/svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/new_api/hoverable_icons/svg.png -------------------------------------------------------------------------------- /apps/common-app/src/recipes/scaleAndRotate/swmansion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/common-app/src/recipes/scaleAndRotate/swmansion.png -------------------------------------------------------------------------------- /apps/common-app/src/release_tests/doubleDraggable/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { StyleSheet, View } from 'react-native'; 3 | 4 | import { LoremIpsum } from '../../common'; 5 | import { DraggableBox } from '../../basic/draggable/index'; 6 | 7 | export default class Example extends Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | const styles = StyleSheet.create({ 20 | scrollView: { 21 | flex: 1, 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /apps/common-app/src/release_tests/doubleScalePinchAndRotate/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { StyleSheet, View } from 'react-native'; 3 | 4 | import { PinchableBox } from '../../recipes/scaleAndRotate/index'; 5 | 6 | export default class Example extends Component { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | } 16 | 17 | const styles = StyleSheet.create({ 18 | container: { 19 | flex: 1, 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /apps/common-app/src/release_tests/gesturizedPressable/androidRippleExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Platform, StyleSheet, View } from 'react-native'; 3 | import TestingBase from './testingBase'; 4 | 5 | export function RippleExample() { 6 | const buttonOpacity = 7 | Platform.OS === 'android' ? { opacity: 1 } : { opacity: 0.6 }; 8 | 9 | return ( 10 | 11 | 19 | 20 | ); 21 | } 22 | 23 | const styles = StyleSheet.create({ 24 | container: { 25 | flex: 1, 26 | flexDirection: 'row', 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | gap: 40, 30 | padding: 20, 31 | }, 32 | pressable: { 33 | width: 100, 34 | height: 100, 35 | borderWidth: StyleSheet.hairlineWidth, 36 | backgroundColor: 'mediumpurple', 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /apps/common-app/src/release_tests/gesturizedPressable/functionalStylesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { PressableStateCallbackType, StyleSheet, View } from 'react-native'; 3 | import TestingBase from './testingBase'; 4 | 5 | export function FunctionalStyleExample() { 6 | const functionalStyle = (state: PressableStateCallbackType) => { 7 | if (state.pressed) { 8 | return { 9 | width: 100, 10 | height: 100, 11 | backgroundColor: 'red', 12 | }; 13 | } else { 14 | return { 15 | width: 100, 16 | height: 100, 17 | backgroundColor: 'mediumpurple', 18 | }; 19 | } 20 | }; 21 | return ( 22 | 23 | 24 | 25 | ); 26 | } 27 | 28 | const styles = StyleSheet.create({ 29 | container: { 30 | flex: 1, 31 | flexDirection: 'row', 32 | justifyContent: 'center', 33 | alignItems: 'center', 34 | gap: 40, 35 | padding: 20, 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /apps/common-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./*"], 8 | "react-native-gesture-handler": [ 9 | "../../packages/react-native-gesture-handler/src" 10 | ], 11 | "react-native-gesture-handler/ReanimatedSwipeable": [ 12 | "../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx" 13 | ], 14 | "react-native-gesture-handler/ReanimatedDrawerLayout": [ 15 | "../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx" 16 | ], 17 | "react-native-gesture-handler/jest-utils": [ 18 | "../../packages/react-native-gesture-handler/src/jestUtils/index.ts" 19 | ] 20 | } 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx", "index.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /apps/expo-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | expo-env.d.ts 11 | 12 | # Native 13 | .kotlin/ 14 | *.orig.* 15 | *.jks 16 | *.p8 17 | *.p12 18 | *.key 19 | *.mobileprovision 20 | 21 | # Metro 22 | .metro-health-check* 23 | 24 | # debug 25 | npm-debug.* 26 | yarn-debug.* 27 | yarn-error.* 28 | 29 | # macOS 30 | .DS_Store 31 | *.pem 32 | 33 | # local env files 34 | .env*.local 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | 39 | android 40 | ios 41 | -------------------------------------------------------------------------------- /apps/expo-example/App.tsx: -------------------------------------------------------------------------------- 1 | import App from 'common-app'; 2 | 3 | export default App; 4 | -------------------------------------------------------------------------------- /apps/expo-example/README.md: -------------------------------------------------------------------------------- 1 | # Gesture Handler Expo example app 2 | 3 | This is an example application demonstrating the functionality of the react-native-gesture-handler library with Expo. 4 | 5 | ## Installing & running application 6 | 7 | Before running the application, you need to install all dependencies. To do that: 8 | 9 | - In the project's root directory, run `yarn`. 10 | 11 | Next run `npx expo prebuild`. 12 | 13 | ## Android 14 | 15 | Run this application by `yarn android` or from Android Studio. 16 | 17 | ## iOS 18 | 19 | Run `yarn ios` or run application from Xcode. 20 | 21 | ## Web 22 | 23 | Run `yarn web`. Alternatively run `yarn start` and in browser navigate to localhost:8081 24 | -------------------------------------------------------------------------------- /apps/expo-example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/expo-example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /apps/expo-example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/expo-example/assets/favicon.png -------------------------------------------------------------------------------- /apps/expo-example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/expo-example/assets/icon.png -------------------------------------------------------------------------------- /apps/expo-example/assets/splash-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/expo-example/assets/splash-icon.png -------------------------------------------------------------------------------- /apps/expo-example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/apps/expo-example/assets/splash.png -------------------------------------------------------------------------------- /apps/expo-example/index.ts: -------------------------------------------------------------------------------- 1 | import '@expo/metro-runtime'; 2 | import { registerRootComponent } from 'expo'; 3 | 4 | import App from './App'; 5 | 6 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 7 | // It also ensures that whether you load the app in Expo Go or in a native build, 8 | // the environment is set up appropriately 9 | registerRootComponent(App); 10 | -------------------------------------------------------------------------------- /apps/expo-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "common-app": ["../common-app/index.ts"], 8 | "react-native-gesture-handler": [ 9 | "../../packages/react-native-gesture-handler/src" 10 | ], 11 | "react-native-gesture-handler/ReanimatedSwipeable": [ 12 | "../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx" 13 | ], 14 | "react-native-gesture-handler/ReanimatedDrawerLayout": [ 15 | "../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx" 16 | ], 17 | "react-native-gesture-handler/jest-utils": [ 18 | "../../packages/react-native-gesture-handler/src/jestUtils/index.ts" 19 | ] 20 | } 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx", "App.tsx"], 23 | "exclude": ["metro.config.js", "android", "ios", ".bundle", "node_modules"] 24 | } 25 | -------------------------------------------------------------------------------- /apps/macos-example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | -------------------------------------------------------------------------------- /apps/macos-example/README.md: -------------------------------------------------------------------------------- 1 | # macOS Gesture Handler example app 2 | 3 | This is an example application demonstrating the functionality of the react-native-gesture-handler library on macOS. 4 | 5 | ## Installing & running application 6 | 7 | Before running the application, you need to install all dependencies. To do that: 8 | 9 | - In the project's root directory, run `yarn`. 10 | - Navigate to the `MacOSExample/macos` directory and run `bundle install && bundle exec pod install` 11 | - Navigate to the `MacOSExample` and run `yarn start` to start the Metro bundler. 12 | - Open the `MacOSExample` project in Xcode and build the app to run it on a macOS simulator or device. 13 | -------------------------------------------------------------------------------- /apps/macos-example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MacOSExample", 3 | "displayName": "MacOSExample" 4 | } 5 | -------------------------------------------------------------------------------- /apps/macos-example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | plugins: ['react-native-reanimated/plugin'], 4 | }; 5 | -------------------------------------------------------------------------------- /apps/macos-example/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import { AppRegistry } from 'react-native'; 6 | import App from 'common-app'; 7 | import { name as appName } from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /apps/macos-example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /apps/macos-example/macos/.gitignore: -------------------------------------------------------------------------------- 1 | # CocoaPods 2 | Pods/ 3 | -------------------------------------------------------------------------------- /apps/macos-example/macos/.xcode.env: -------------------------------------------------------------------------------- 1 | export NODE_BINARY=$(command -v node) 2 | -------------------------------------------------------------------------------- /apps/macos-example/macos/MacOSExample-macOS/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /apps/macos-example/macos/MacOSExample-macOS/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "author" : "xcode", 4 | "version" : 1 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /apps/macos-example/macos/MacOSExample-macOS/MacOSExample.entitlements: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | com.apple.security.app-sandbox 6 | 7 | com.apple.security.files.user-selected.read-only 8 | 9 | com.apple.security.network.client 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/macos-example/macos/MacOSExample-macOS/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | int main(int argc, const char *argv[]) { 4 | return NSApplicationMain(argc, argv); 5 | } 6 | -------------------------------------------------------------------------------- /apps/macos-example/macos/MacOSExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /apps/macos-example/macos/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native-macos/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | require_relative '../../../scripts/clangd-add-xcode-step.rb' 4 | 5 | prepare_react_native_project! 6 | 7 | ENV['GH_EXAMPLE_APP_NAME'] = 'MacOSExample' 8 | 9 | target 'MacOSExample-macOS' do 10 | platform :macos, '11.0' 11 | use_native_modules! 12 | 13 | # Flags change depending on the env values. 14 | flags = get_default_flags() 15 | 16 | use_react_native!( 17 | :path => '../node_modules/react-native-macos', 18 | :hermes_enabled => false, 19 | :fabric_enabled => ENV['RCT_NEW_ARCH_ENABLED'] == '1', 20 | # An absolute path to your application root. 21 | :app_path => "#{Pod::Config.instance.installation_root}/.." 22 | ) 23 | 24 | post_install do |installer| 25 | react_native_post_install(installer) 26 | end 27 | 28 | add_clangd_generation_step() 29 | end 30 | -------------------------------------------------------------------------------- /apps/macos-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "common-app": ["../common-app/index.ts"], 8 | "react-native-gesture-handler": [ 9 | "../../packages/react-native-gesture-handler/src" 10 | ], 11 | "react-native-gesture-handler/ReanimatedSwipeable": [ 12 | "../../packages/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx" 13 | ], 14 | "react-native-gesture-handler/ReanimatedDrawerLayout": [ 15 | "../../packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx" 16 | ], 17 | "react-native-gesture-handler/jest-utils": [ 18 | "../../packages/react-native-gesture-handler/src/jestUtils/index.ts" 19 | ] 20 | } 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.tsx", "index.ts"], 23 | "exclude": ["metro.config.js", "macos", ".bundle", "node_modules"] 24 | } 25 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/.yarnrc: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | yarn-path ".yarn/releases/yarn-1.22.22.cjs" 6 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. 4 | 5 | ## Installation 6 | 7 | ```console 8 | yarn install 9 | ``` 10 | 11 | ## Local Development 12 | 13 | ```console 14 | yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ## Build 20 | 21 | ```console 22 | yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ## Deployment 28 | 29 | ```console 30 | GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | 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. 34 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | plugins: ['react-native-reanimated/plugin'], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/components/GifGallery.js: -------------------------------------------------------------------------------- 1 | import React, { Children, cloneElement } from 'react'; 2 | 3 | const GifGallery = ({ children }) => ( 4 |
5 | {Children.map(children, e => 6 | cloneElement(e, { ...e.props.style, style: styles.img }) 7 | )} 8 |
9 | ); 10 | 11 | const styles = { 12 | container: { 13 | display: 'flex', 14 | justifyContent: 'space-evenly', 15 | flexWrap: 'wrap', 16 | }, 17 | img: { 18 | border: '1px solid #acacac', 19 | borderRadius: '6px', 20 | boxShadow: '0 0 20px #acacac', 21 | marginTop: '1em', 22 | marginBottom: '1em', 23 | }, 24 | }; 25 | 26 | export default GifGallery; 27 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 4, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/fundamentals/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Fundamentals", 3 | "position": 1, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gesture-handlers/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Gesture handlers (legacy)", 3 | "position": 6, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gesture-handlers/create-native-wrapper.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: create-native-wrapper 3 | title: createNativeWrapper 4 | sidebar_label: createNativeWrapper() 5 | sidebar_position: 13 6 | --- 7 | 8 | :::warning 9 | The old API will be removed in the future version of Gesture Handler. Please migrate to [gestures API](/docs/gestures/gesture) instead. Check out our [upgrading guide](/docs/guides/upgrading-to-2) for more information. 10 | ::: 11 | 12 | Creates provided component with NativeViewGestureHandler, allowing it to be part of RNGH's 13 | gesture system. 14 | 15 | ## Arguments 16 | 17 | ### Component 18 | 19 | The component we want to wrap. 20 | 21 | ### config 22 | 23 | Config is an object with properties that can be used on [`NativeViewGestureHandler`](/docs/gesture-handlers/nativeview-gh) 24 | 25 | ## Returns 26 | 27 | Wrapped component. 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Gestures", 3 | "position": 3, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-callbacks.md: -------------------------------------------------------------------------------- 1 | ### Callbacks common to all continuous gestures: 2 | 3 | ### `onUpdate(callback)` 4 | 5 | Set the callback that is being called every time the gesture receives an update while it's active. 6 | 7 | ### `onChange(callback)` 8 | 9 | Set the callback that is being called every time the gesture receives an update while it's active. This callback will receive information about change in value in relation to the last received event. 10 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-config.md: -------------------------------------------------------------------------------- 1 | ### Properties common to all continuous gestures: 2 | 3 | ### `manualActivation(value: boolean)` 4 | 5 | When `true` the handler will not activate by itself even if its activation criteria are met. Instead you can manipulate its state using [state manager](/docs/gestures/state-manager/). 6 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.md: -------------------------------------------------------------------------------- 1 | ### Event attributes common to all gestures: 2 | 3 | ### `state` 4 | 5 | Current [state](/docs/fundamentals/states-events) of the handler. Expressed as one of the constants exported under `State` object by the library. 6 | 7 | ### `numberOfPointers` 8 | 9 | Represents the number of pointers (fingers) currently placed on the screen. 10 | 11 | ### `pointerType` 12 | 13 | Indicates the type of pointer device in use. This value is represented by the `PointerType` enum, which includes the following fields: 14 | 15 | - `TOUCH` - represents finger 16 | - `STYLUS` - represents stylus or digital pen 17 | - `MOUSE` - represents computer mouse 18 | - `KEY` - represents keyboard 19 | - `OTHER` - represents unknown device type that is not relevant 20 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/_shared/gesture-detector-functional1.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | export default function Example() { 3 | const tap = Gesture.Tap().onStart(() => { 4 | console.log('tap'); 5 | }); 6 | 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | function FunctionalComponent(props) { 17 | return {props.children}; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/gestures/composed-gestures.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: composed-gestures 3 | title: Composed gestures 4 | sidebar_label: Composed gestures 5 | sidebar_position: 13 6 | --- 7 | 8 | Composed gestures (`Race`, `Simultaneous`, `Exclusive`) provide a simple way of building relations between gestures. See [Gesture Composition](/docs/fundamentals/gesture-composition) for more details. 9 | 10 | ## Reference 11 | 12 | ```jsx 13 | import { GestureDetector, Gesture } from 'react-native-gesture-handler'; 14 | 15 | function App() { 16 | const pan = Gesture.Pan(); 17 | const longPress = Gesture.LongPress(); 18 | 19 | // highlight-next-line 20 | const composed = Gesture.Race(pan, longPress); 21 | 22 | return ( 23 | 24 | 25 | 26 | ); 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step1.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | interface Pointer { 3 | visible: boolean; 4 | x: number; 5 | y: number; 6 | } 7 | ``` 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step3.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { Gesture, GestureDetector } from 'react-native-gesture-handler'; 3 | 4 | export default function Example() { 5 | const trackedPointers: Animated.SharedValue[] = []; 6 | const active = useSharedValue(false); 7 | 8 | for (let i = 0; i < 12; i++) { 9 | trackedPointers[i] = 10 | useSharedValue < 11 | Pointer > 12 | { 13 | visible: false, 14 | x: 0, 15 | y: 0, 16 | }; 17 | } 18 | 19 | const gesture = Gesture.Manual(); 20 | 21 | return ( 22 | 23 | 24 | {trackedPointers.map((pointer, index) => ( 25 | 26 | ))} 27 | 28 | 29 | ); 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step4.md: -------------------------------------------------------------------------------- 1 | ```jsx {2-15} 2 | const gesture = Gesture.Manual().onTouchesDown((e, manager) => { 3 | for (const touch of e.changedTouches) { 4 | trackedPointers[touch.id].value = { 5 | visible: true, 6 | x: touch.x, 7 | y: touch.y, 8 | }; 9 | } 10 | 11 | if (e.numberOfTouches >= 2) { 12 | manager.activate(); 13 | } 14 | }); 15 | ``` 16 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step5.md: -------------------------------------------------------------------------------- 1 | ```jsx {3-12} 2 | const gesture = Gesture.Manual() 3 | ... 4 | .onTouchesMove((e, _manager) => { 5 | for (const touch of e.changedTouches) { 6 | trackedPointers[touch.id].value = { 7 | visible: true, 8 | x: touch.x, 9 | y: touch.y, 10 | }; 11 | } 12 | }) 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step6.md: -------------------------------------------------------------------------------- 1 | ```jsx {3-16} 2 | const gesture = Gesture.Manual() 3 | ... 4 | .onTouchesUp((e, manager) => { 5 | for (const touch of e.changedTouches) { 6 | trackedPointers[touch.id].value = { 7 | visible: false, 8 | x: touch.x, 9 | y: touch.y, 10 | }; 11 | } 12 | 13 | if (e.numberOfTouches === 0) { 14 | manager.end(); 15 | } 16 | }) 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/manual-gestures/_steps/step7.md: -------------------------------------------------------------------------------- 1 | ```jsx {3-10} 2 | const gesture = Gesture.Manual() 3 | ... 4 | .onStart(() => { 5 | active.value = true; 6 | }) 7 | .onEnd(() => { 8 | active.value = false; 9 | }); 10 | ``` 11 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { StyleSheet } from 'react-native'; 3 | 4 | const styles = StyleSheet.create({ 5 | ball: { 6 | width: 100, 7 | height: 100, 8 | borderRadius: 100, 9 | backgroundColor: 'blue', 10 | alignSelf: 'center', 11 | }, 12 | }); 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { GestureDetector } from 'react-native-gesture-handler'; 3 | import Animated from 'react-native-reanimated'; 4 | 5 | function Ball() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | ``` 13 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { 3 | useSharedValue, 4 | useAnimatedStyle, 5 | withSpring, 6 | } from 'react-native-reanimated'; 7 | 8 | function Ball() { 9 | const isPressed = useSharedValue(false); 10 | const offset = useSharedValue({ x: 0, y: 0 }); 11 | 12 | const animatedStyles = useAnimatedStyle(() => { 13 | return { 14 | transform: [ 15 | { translateX: offset.value.x }, 16 | { translateY: offset.value.y }, 17 | { scale: withSpring(isPressed.value ? 1.2 : 1) }, 18 | ], 19 | backgroundColor: isPressed.value ? 'yellow' : 'blue', 20 | }; 21 | }); 22 | 23 | // ... 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md: -------------------------------------------------------------------------------- 1 | ```jsx {4} 2 | // ... 3 | return ( 4 | 5 | 6 | 7 | ); 8 | // ... 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md: -------------------------------------------------------------------------------- 1 | ```jsx 2 | import { Gesture } from 'react-native-gesture-handler'; 3 | 4 | function Ball() { 5 | // ... 6 | const start = useSharedValue({ x: 0, y: 0 }); 7 | const gesture = Gesture.Pan() 8 | .onBegin(() => { 9 | isPressed.value = true; 10 | }) 11 | .onUpdate((e) => { 12 | offset.value = { 13 | x: e.translationX + start.value.x, 14 | y: e.translationY + start.value.y, 15 | }; 16 | }) 17 | .onEnd(() => { 18 | start.value = { 19 | x: offset.value.x, 20 | y: offset.value.y, 21 | }; 22 | }) 23 | .onFinalize(() => { 24 | isPressed.value = false; 25 | }); 26 | // ... 27 | } 28 | ``` 29 | 30 | ```jsx {3} 31 | // ... 32 | return ( 33 | 34 | 35 | 36 | ); 37 | // ... 38 | ``` 39 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/guides/swipe-and-scroll.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: swipe-and-scroll 3 | title: Custom swipeable components inside ScrollView (web) 4 | sidebar_position: 5 5 | --- 6 | 7 | While we recommend using our own [`ReanimatedSwipeable`](../components/reanimated_swipeable.md) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](../gestures/gesture-detector.md#touchaction-web-only) set to `"pan-y"`, like this: 8 | 9 | ```jsx 10 | 11 | ... 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/docs/under-the-hood/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Under the hood", 3 | "position": 5, 4 | "link": { 5 | "type": "generated-index" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | 'intro', 23 | 'hello', 24 | { 25 | type: 'category', 26 | label: 'Tutorial', 27 | items: ['tutorial-basics/create-a-document'], 28 | }, 29 | ], 30 | */ 31 | }; 32 | 33 | module.exports = sidebars; 34 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/AlgoliaSearchBar/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | 4 | import NavbarSearch from '@theme/Navbar/Search'; 5 | import SearchBar from '@theme/SearchBar'; 6 | 7 | const AlgoliaSearchBar = () => { 8 | return ( 9 |
10 | 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | export default AlgoliaSearchBar; 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/AnimableIcon/styles.module.css: -------------------------------------------------------------------------------- 1 | .actionIcon { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | 6 | padding: 0.25em; 7 | cursor: pointer; 8 | 9 | border: 1px solid transparent; 10 | border-radius: 3px; 11 | } 12 | 13 | .iconClicked { 14 | animation: 1s iconClick; 15 | } 16 | 17 | @keyframes iconClick { 18 | 0% { 19 | border: 1px solid var(--swm-interactive-copy-button-off); 20 | } 21 | 50% { 22 | border: 1px solid var(--swm-interactive-copy-button-on); 23 | } 24 | 100% { 25 | border: 1px solid var(--swm-interactive-copy-button-off); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/CollapseButton/styles.module.css: -------------------------------------------------------------------------------- 1 | .collapseButton { 2 | display: flex; 3 | align-items: center; 4 | cursor: pointer; 5 | } 6 | 7 | .collapseButton button { 8 | background-color: transparent; 9 | border: none; 10 | padding: 0; 11 | 12 | font-family: var(--swm-body-font); 13 | font-size: 16px; 14 | color: var(--ifm-font-color-base); 15 | cursor: pointer; 16 | } 17 | 18 | .arrow { 19 | height: 12px; 20 | width: 12px; 21 | margin-right: 1rem; 22 | margin-top: 2px; 23 | 24 | transition: var(--swm-expandable-transition); 25 | } 26 | 27 | .collapseButton[data-collapsed='false'] .arrow { 28 | transform: rotate(180deg); 29 | } 30 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/CollapsibleCode/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: var(--swm-off-background); 3 | border-radius: 0; 4 | border: 1px solid var(--swm-border); 5 | margin-bottom: 1em; 6 | } 7 | 8 | .container pre, 9 | .container code { 10 | border: none; 11 | } 12 | 13 | .collapseButton { 14 | padding: 1em 0 0 1em; 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/FooterBackground/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; 3 | import usePageType from '@site/src/hooks/usePageType'; 4 | import { useColorMode } from '@docusaurus/theme-common'; 5 | 6 | import Moon from '@site/src/components/Moon/MoonIcon'; 7 | import DarkMoon from '@site/src/components/Moon/MoonIconDark'; 8 | import styles from './styles.module.css'; 9 | 10 | const FooterBackground = () => { 11 | const { isLanding } = usePageType(); 12 | const currentSvgComponent = 13 | useColorMode().colorMode === 'dark' ? : ; 14 | 15 | return ( 16 |
17 | {isLanding && ( 18 | <>{ExecutionEnvironment.canUseViewport && currentSvgComponent} 19 | )} 20 |
21 | ); 22 | }; 23 | 24 | export default FooterBackground; 25 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/FooterBackground/styles.module.css: -------------------------------------------------------------------------------- 1 | .moonContainer { 2 | position: relative; 3 | margin-top: 106px; 4 | } 5 | 6 | [class*='footerLanding'] { 7 | margin-top: -106px; 8 | } 9 | 10 | @media (max-width: 996px) { 11 | .moonContainer { 12 | margin-top: 121px; 13 | } 14 | [class*='footerLanding'] { 15 | margin-top: -121px; 16 | } 17 | } 18 | 19 | @media (max-width: 700px) { 20 | .moonContainer { 21 | margin-top: 147px; 22 | } 23 | [class*='footerLanding'] { 24 | margin-top: -147px; 25 | } 26 | } 27 | 28 | @media (max-width: 376px) { 29 | .moonContainer { 30 | margin-top: 173px; 31 | } 32 | [class*='footerLanding'] { 33 | margin-top: -173px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/FlingExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .handFling, 2 | .arrowsFling { 3 | z-index: 5; 4 | position: absolute; 5 | cursor: default; 6 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 7 | opacity: 1; 8 | visibility: visible; 9 | } 10 | 11 | .handFling { 12 | transform: translate(35%, 145%) rotate(29deg); 13 | } 14 | 15 | .arrowsFling { 16 | transform: translate(15%, -160%); 17 | } 18 | 19 | .flingClone { 20 | height: 56px; 21 | width: 56px; 22 | border-radius: 100%; 23 | position: absolute; 24 | left: -0.5rem; 25 | top: -0.5rem; 26 | z-index: 10; 27 | } 28 | 29 | .flingClone:hover + div > .handFling, 30 | .flingClone:hover + div > .arrowsFling { 31 | opacity: 0; 32 | visibility: hidden; 33 | } 34 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/GestureExampleItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | import LandingExampleComponent from '@site/src/components/LandingExampleComponent'; 4 | 5 | interface Props { 6 | title: string; 7 | component?: React.ReactNode; 8 | idx: number; 9 | href: string; 10 | } 11 | 12 | const GestureExampleItem = ({ title, component, idx, href }: Props) => { 13 | return ( 14 | <> 15 |
16 | 17 | {title} 18 | 19 |
20 | 21 |
22 |
23 | 24 | ); 25 | }; 26 | 27 | export default GestureExampleItem; 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/LongPressExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .handLongPress { 2 | position: absolute; 3 | transform: translate(35%, 145%) rotate(29deg); 4 | cursor: default; 5 | opacity: 1; 6 | visibility: visible; 7 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 8 | z-index: 5; 9 | } 10 | 11 | .longPressClone { 12 | height: 56px; 13 | width: 56px; 14 | border-radius: 100%; 15 | position: absolute; 16 | left: -0.5rem; 17 | top: -0.5rem; 18 | z-index: 10; 19 | } 20 | 21 | .longPressClone:hover + .handLongPress { 22 | opacity: 0; 23 | visibility: hidden; 24 | } 25 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/PanExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .handPan { 2 | position: absolute; 3 | transform: translate(90%, 120%); 4 | rotate: 10deg; 5 | cursor: default; 6 | opacity: 1; 7 | visibility: visible; 8 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 9 | z-index: 5; 10 | } 11 | 12 | .panClone { 13 | height: 56px; 14 | width: 56px; 15 | border-radius: 100%; 16 | position: absolute; 17 | left: -0.5rem; 18 | top: -0.5rem; 19 | z-index: 10; 20 | } 21 | 22 | .panClone:hover + .handPan { 23 | opacity: 0; 24 | visibility: hidden; 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/PinchExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .handPinchLeft, 2 | .handPinchRight { 3 | position: absolute; 4 | opacity: 1; 5 | visibility: visible; 6 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 7 | z-index: 5; 8 | } 9 | 10 | .handPinchLeft { 11 | transform: translate(-70%, 135%) rotate(10deg) scaleX(-1); 12 | } 13 | .handPinchRight { 14 | transform: translate(100%, 200%) rotate(29deg); 15 | } 16 | 17 | .hands { 18 | transform: scale(1); 19 | } 20 | 21 | .pinchClone { 22 | height: 56px; 23 | width: 56px; 24 | border-radius: 100%; 25 | position: relative; 26 | left: -0.5rem; 27 | top: -0.5rem; 28 | z-index: 10; 29 | } 30 | 31 | .pinchClone:hover .handPinchLeft, 32 | .pinchClone:hover .handPinchRight { 33 | opacity: 0; 34 | visibility: hidden; 35 | } 36 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/RotationExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100px; 3 | height: 100px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | -moz-transform-style: preserve-3d; 8 | -webkit-transform-style: preserve-3d; 9 | transform-style: preserve-3d; 10 | } 11 | 12 | .rotationClone { 13 | transform: translate(142%, 142%); 14 | height: 56px; 15 | width: 56px; 16 | border-radius: 100%; 17 | position: absolute; 18 | left: -0.5rem; 19 | top: -0.5rem; 20 | z-index: 10; 21 | } 22 | 23 | .handRotation, 24 | .arrowRotation { 25 | position: absolute; 26 | z-index: 5; 27 | opacity: 1; 28 | visibility: visible; 29 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 30 | } 31 | 32 | .handRotation { 33 | transform: translate(20%, 85%); 34 | rotate: -18deg; 35 | } 36 | 37 | .rotationClone:hover ~ svg { 38 | opacity: 0; 39 | visibility: hidden; 40 | } 41 | 42 | .arrowRotation { 43 | transform: translate(40%, -160%); 44 | } 45 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/TapExample/styles.module.css: -------------------------------------------------------------------------------- 1 | .handTap { 2 | position: absolute; 3 | transform: translate(90%, 120%); 4 | rotate: 10deg; 5 | cursor: default; 6 | opacity: 1; 7 | visibility: visible; 8 | transition: visibility 0.3s, opacity 0.3s ease-in-out; 9 | z-index: 5; 10 | } 11 | 12 | .tapClone { 13 | height: 56px; 14 | width: 56px; 15 | border-radius: 100%; 16 | position: absolute; 17 | left: -0.5rem; 18 | top: -0.5rem; 19 | z-index: 10; 20 | } 21 | 22 | .tapClone:hover + .handTap { 23 | opacity: 0; 24 | visibility: hidden; 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureExamples/utils.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useColorMode } from '@docusaurus/theme-common'; 3 | 4 | export const RADIUS = 100; 5 | 6 | const lightStyles = StyleSheet.create({ 7 | circle: { 8 | backgroundColor: 'var(--swm-purple-light-100)', 9 | border: '8px solid var(--swm-purple-light-80)', 10 | }, 11 | }); 12 | 13 | const darkStyles = StyleSheet.create({ 14 | circle: { 15 | backgroundColor: 'var(--swm-purple-light-100)', 16 | border: '8px solid var(--swm-purple-dark-100)', 17 | }, 18 | }); 19 | 20 | export const useStylesForExample = () => { 21 | return useColorMode().colorMode === 'dark' ? darkStyles : lightStyles; 22 | }; 23 | 24 | export function isInsideCircle(offsetX, offsetY, centerX?, centerY?) { 25 | if (centerX !== undefined && centerY !== undefined) { 26 | const dx = offsetX - centerX; 27 | const dy = offsetY - centerY; 28 | return dx * dx + dy * dy <= RADIUS * RADIUS; 29 | } else { 30 | return offsetX * offsetX + offsetY * offsetY <= RADIUS * RADIUS; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureFeatures/GestureFeatureItem/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { PropsWithChildren } from 'react'; 2 | import styles from './styles.module.css'; 3 | 4 | interface Props extends PropsWithChildren { 5 | title: string; 6 | } 7 | 8 | const GestureFeatureItem = ({ title, children }: Props) => { 9 | return ( 10 |
11 |

{title}

12 |

{children}

13 |
14 | ); 15 | }; 16 | 17 | export default GestureFeatureItem; 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureFeatures/GestureFeatureItem/styles.module.css: -------------------------------------------------------------------------------- 1 | .featureItem { 2 | background-color: var(--swm-blue-light-20); 3 | box-shadow: -12px 12px 0px var(--swm-blue-light-60); 4 | flex: 1; 5 | padding: 1.5em; 6 | } 7 | 8 | [data-theme='dark'] .featureItem { 9 | background-color: var(--swm-purple-dark-40); 10 | box-shadow: -12px 12px 0px var(--swm-purple-dark-140); 11 | } 12 | 13 | [data-theme='dark'] .featureTitle, 14 | [data-theme='dark'] .featureBody { 15 | color: var(--swm-navy-light-100); 16 | } 17 | 18 | .featureTitle { 19 | margin-bottom: 40px; 20 | font-weight: 600; 21 | font-size: 24px; 22 | text-transform: uppercase; 23 | } 24 | 25 | @media (max-width: 420px) { 26 | .featureTitle { 27 | font-size: 20px; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureFeatures/GestureFeatureList/styles.module.css: -------------------------------------------------------------------------------- 1 | .featureList { 2 | display: flex; 3 | gap: 1.5rem; 4 | } 5 | 6 | @media (max-width: 996px) { 7 | .featureList { 8 | flex-direction: column; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/GestureFeatures/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | import HomepageButton from '@site/src/components/HomepageButton'; 4 | import GestureFeatureList from '@site/src/components/GestureFeatures/GestureFeatureList'; 5 | 6 | const GestureFeatures = () => { 7 | return ( 8 |
9 |

Why Gesture Handler?

10 | 11 |
12 |

13 | Learn more about the features in the newest article about Gesture 14 | Handler 15 |

16 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default GestureFeatures; 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/LandingBackground/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Planets from '@site/src/components/Hero/Planets'; 3 | import Stars from '@site/src/components/Hero/Stars'; 4 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; 5 | import styles from './styles.module.css'; 6 | 7 | const LandingBackground = () => { 8 | return ( 9 |
10 | {ExecutionEnvironment.canUseViewport && ( 11 | <> 12 | 13 | 14 | 15 | )} 16 |
17 | ); 18 | }; 19 | 20 | export default LandingBackground; 21 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/LandingBackground/styles.module.css: -------------------------------------------------------------------------------- 1 | .heroBackground { 2 | position: absolute; 3 | top: 0; 4 | 5 | background: linear-gradient( 6 | 180deg, 7 | var(--swm-blue-light-40) 0%, 8 | var(--swm-blue-light-20) 23%, 9 | #ffffff 46% 10 | ); 11 | width: 100%; 12 | height: 130vh; 13 | min-height: 70vw; 14 | overflow: hidden; 15 | z-index: -20; 16 | } 17 | 18 | [data-theme='dark'] .heroBackground { 19 | background: none; 20 | background-color: var(--swm-navy-dark-140); 21 | } 22 | 23 | @media (max-width: 996px) { 24 | [class*='logoWrapperLanding'] { 25 | width: 50px; 26 | height: 50px; 27 | display: flex; 28 | justify-content: center; 29 | } 30 | } 31 | 32 | @media (max-width: 768px) { 33 | .heroBackground { 34 | height: 70vh; 35 | } 36 | } 37 | 38 | @media (max-width: 420px) { 39 | .navbarLanding { 40 | padding: 0 1.5rem; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/Planets/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | import { useColorMode } from '@docusaurus/theme-common'; 4 | import Planets from '@site/src/components/Hero/Planets/PlanetsIcon'; 5 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; 6 | import DarkPlanets from '@site/src/components/Hero/Planets/PlanetsIconDark'; 7 | 8 | const HeroPlanets = () => { 9 | const currentComponent = 10 | useColorMode().colorMode === 'dark' ? : ; 11 | return ( 12 |
13 | {ExecutionEnvironment.canUseViewport && currentComponent} 14 |
15 | ); 16 | }; 17 | 18 | export default HeroPlanets; 19 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/Planets/styles.module.css: -------------------------------------------------------------------------------- 1 | .planets { 2 | position: absolute; 3 | right: 0; 4 | } 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/Stars/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Stars from '@site/src/components/Hero/Stars/StarsIcon'; 3 | import DarkStars from '@site/src/components/Hero/Stars/StarsIconDark'; 4 | import { useColorMode } from '@docusaurus/theme-common'; 5 | import styles from './styles.module.css'; 6 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; 7 | 8 | const HeroStars = () => { 9 | const currentComponent = 10 | useColorMode().colorMode === 'dark' ? : ; 11 | return ( 12 |
13 | {ExecutionEnvironment.canUseViewport && currentComponent} 14 |
15 | ); 16 | }; 17 | 18 | export default HeroStars; 19 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Hero/Stars/styles.module.css: -------------------------------------------------------------------------------- 1 | .stars { 2 | position: absolute; 3 | top: 5rem; 4 | left: 2vw; 5 | z-index: -10; 6 | } 7 | 8 | .stars svg path:nth-child(2n) { 9 | animation: 2.7s starBlink infinite; 10 | } 11 | 12 | .stars svg path:nth-child(2n + 1) { 13 | animation: 2.1s starBlink infinite; 14 | } 15 | 16 | .stars svg path:nth-child(3n) { 17 | animation: 3.6s starBlink infinite; 18 | } 19 | 20 | .stars svg path:nth-child(3n + 1) { 21 | animation: 4.2s starBlink infinite; 22 | } 23 | 24 | @media (max-width: 768px) { 25 | .stars { 26 | top: 3rem; 27 | } 28 | } 29 | 30 | @keyframes starBlink { 31 | 0% { 32 | opacity: 1; 33 | } 34 | 35 | 50% { 36 | opacity: 0.15; 37 | } 38 | 39 | 100% { 40 | opacity: 1; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/InteractiveExample/InteractiveExampleComponent/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import BrowserOnly from '@docusaurus/BrowserOnly'; 4 | import styles from './styles.module.css'; 5 | 6 | interface Props { 7 | component: React.ReactNode; 8 | label?: string; 9 | idx?: number; 10 | } 11 | 12 | export default function InteractiveExampleComponent({ 13 | component, 14 | label, 15 | idx, 16 | }: Props) { 17 | return ( 18 | Loading...}> 19 | {() => ( 20 |
21 | {component} 22 | {label &&
{label}
} 23 |
24 | )} 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/InteractiveExample/InteractiveExampleComponent/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | justify-content: center; 6 | contain: content; 7 | align-items: center; 8 | background-color: none; 9 | margin-bottom: var(--ifm-leading); 10 | } 11 | 12 | .label { 13 | text-align: center; 14 | font-size: 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/LandingExampleComponent/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import BrowserOnly from '@docusaurus/BrowserOnly'; 4 | import styles from './styles.module.css'; 5 | 6 | interface Props { 7 | component: React.ReactNode; 8 | idx?: number; 9 | } 10 | 11 | export default function LandingExample({ component, idx }: Props) { 12 | return ( 13 | Loading...}> 14 | {() => ( 15 |
16 | {component} 17 |
18 | )} 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/LandingExampleComponent/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | width: 200px; 6 | align-items: center; 7 | background-color: none; 8 | border: 2px solid var(--swm-navy-light-100); 9 | border-radius: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Moon/MoonIcon/styles.module.css: -------------------------------------------------------------------------------- 1 | .moon { 2 | position: absolute; 3 | z-index: -5; 4 | bottom: 0; 5 | right: 0; 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Moon/MoonIconDark/styles.module.css: -------------------------------------------------------------------------------- 1 | .moon { 2 | position: absolute; 3 | z-index: -5; 4 | bottom: 0; 5 | right: 0; 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Playground/styles.module.css: -------------------------------------------------------------------------------- 1 | .heading { 2 | font-size: var(--swm-h2-font-size); 3 | font-weight: 700; 4 | margin-bottom: 1.5rem; 5 | } 6 | 7 | .subheading { 8 | font-size: 20px; 9 | margin-bottom: 5rem; 10 | } 11 | 12 | .playground { 13 | display: flex; 14 | flex-wrap: wrap; 15 | gap: 1.5rem; 16 | } 17 | 18 | @media (max-width: 768px) { 19 | .subheading { 20 | margin-bottom: 3.5rem; 21 | } 22 | } 23 | 24 | @media (max-width: 420px) { 25 | .heading { 26 | font-size: 24px; 27 | } 28 | .subheading { 29 | font-size: 18px; 30 | margin-bottom: 1.5rem; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/ReducedMotionWarning/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | import Link from '@docusaurus/Link'; 4 | 5 | import { useColorMode } from '@docusaurus/theme-common'; 6 | import Danger from '/static/img/danger.svg'; 7 | import DangerDark from '/static/img/danger-dark.svg'; 8 | 9 | export default function ReducedMotionWarning() { 10 | const { colorMode } = useColorMode(); 11 | return ( 12 |
13 |
14 | {colorMode === 'light' ? : } 15 |
16 |

17 | It looks like reduced motion is turned on in your system preferences. 18 | Some of the animations may be skipped.{' '} 19 | 22 | Learn more 23 | 24 |

25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/ReducedMotionWarning/styles.module.css: -------------------------------------------------------------------------------- 1 | .dangerMark { 2 | display: flex; 3 | padding: 0.125rem 0.75rem; 4 | } 5 | 6 | .link { 7 | white-space: nowrap; 8 | font-size: 14px; 9 | font-weight: 500; 10 | padding: 0.125rem 0; 11 | } 12 | 13 | .warningText { 14 | margin: 0.25rem 0 0.75rem; 15 | } 16 | 17 | .container { 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | background-color: var(--swm-admonition-color-caution); 22 | } 23 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/SidebarLabel/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | 4 | interface Props { 5 | type: 'new' | 'experimental'; 6 | } 7 | 8 | export default function SidebarLabel({ type }: Props) { 9 | return ( 10 |
14 | {type} 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/SidebarLabel/styles.module.css: -------------------------------------------------------------------------------- 1 | .badge { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | border: 1px solid transparent; 6 | border-radius: 8px; 7 | font-size: 14px; 8 | font-weight: 500; 9 | padding: 0.125rem 0.375rem; 10 | white-space: nowrap; 11 | margin: 0 0.25rem; 12 | text-transform: capitalize; 13 | } 14 | 15 | .new { 16 | color: var(--swm-sidebar-label-text-new); 17 | background-color: var(--swm-sidebar-label-background-new); 18 | } 19 | 20 | .experimental { 21 | color: var(--swm-sidebar-label-text-experimental); 22 | background-color: var(--swm-sidebar-label-background-experimental); 23 | } 24 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Sponsors/styles.module.css: -------------------------------------------------------------------------------- 1 | .sponsorsTitle { 2 | font-size: var(--swm-h2-font-size); 3 | margin-bottom: 2.5rem; 4 | } 5 | 6 | .sponsorsSubtitle { 7 | font-size: 20px; 8 | width: 53%; 9 | } 10 | 11 | .sponsorsBrand { 12 | margin-top: 5rem; 13 | display: flex; 14 | justify-content: center; 15 | gap: 4rem; 16 | } 17 | 18 | @media (max-width: 1350px) { 19 | .sponsorsSubtitle { 20 | width: 70%; 21 | } 22 | } 23 | 24 | @media (max-width: 996px) { 25 | .sponsorsSubtitle { 26 | width: 100%; 27 | } 28 | .sponsorsBrand { 29 | margin: 2.5rem auto 5.5rem; 30 | gap: 3rem; 31 | } 32 | .sponsor { 33 | width: 170px; 34 | height: auto; 35 | } 36 | } 37 | 38 | @media (max-width: 420px) { 39 | .sponsorsTitle { 40 | font-size: 24px; 41 | } 42 | .sponsorsSubtitle { 43 | font-size: 18px; 44 | font-weight: 600; 45 | } 46 | .sponsorsBrand { 47 | gap: 2.5rem; 48 | } 49 | .sponsor { 50 | width: 120px; 51 | height: auto; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Testimonials/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './styles.module.css'; 3 | import TestimonialList from '@site/src/components/Testimonials/TestimonialList'; 4 | 5 | const Testimonials = () => { 6 | return ( 7 |
8 |

Testimonials

9 | 10 |
11 | ); 12 | }; 13 | 14 | export default Testimonials; 15 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Testimonials/styles.module.css: -------------------------------------------------------------------------------- 1 | .testimonialsContainer { 2 | display: flex; 3 | position: relative; 4 | flex-direction: column; 5 | gap: 5rem; 6 | } 7 | .title { 8 | font-size: var(--swm-h2-font-size); 9 | } 10 | 11 | @media (max-width: 768px) { 12 | .testimonialsContainer { 13 | gap: 1.5rem; 14 | } 15 | } 16 | 17 | @media (max-width: 420px) { 18 | .title { 19 | font-size: 24px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Wave/WaveIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import BrowserOnly from '@docusaurus/BrowserOnly'; 3 | import styles from './styles.module.css'; 4 | import useScreenSize from '@site/src/hooks/useScreenSize'; 5 | 6 | function Wave({ color }) { 7 | const { windowWidth } = useScreenSize(); 8 | return ( 9 | 10 | {() => ( 11 | 17 | 20 | 21 | )} 22 | 23 | ); 24 | } 25 | 26 | export default Wave; 27 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Wave/WaveIcon/styles.module.css: -------------------------------------------------------------------------------- 1 | .wave { 2 | position: absolute; 3 | z-index: -5; 4 | top: 3rem; 5 | right: 0; 6 | } 7 | 8 | @media (max-width: 996px) { 9 | .wave { 10 | display: none; 11 | } 12 | } 13 | 14 | @media (min-width: 1600px) { 15 | .wave { 16 | display: none; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Wave/WaveIconBig/styles.module.css: -------------------------------------------------------------------------------- 1 | .bigWave { 2 | position: absolute; 3 | z-index: -5; 4 | top: 3rem; 5 | right: 0; 6 | } 7 | @media (max-width: 1600px) { 8 | .bigWave { 9 | display: none; 10 | } 11 | } 12 | 13 | @media (min-width: 2550px) { 14 | .bigWave { 15 | display: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/components/Wave/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; 3 | import { useColorMode } from '@docusaurus/theme-common'; 4 | import WaveIcon from '@site/src/components/Wave/WaveIcon'; 5 | import WaveIconBig from '@site/src/components/Wave/WaveIconBig'; 6 | 7 | const Wave = () => { 8 | const currentComponent = 9 | useColorMode().colorMode === 'dark' ? ( 10 | <> 11 | 12 | 13 | 14 | ) : ( 15 | <> 16 | 17 | 18 | 19 | ); 20 | return <>{ExecutionEnvironment.canUseViewport && currentComponent}; 21 | }; 22 | 23 | export default Wave; 24 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/css/index.css: -------------------------------------------------------------------------------- 1 | @import 'colors.css'; 2 | @import 'typography.css'; 3 | @import 'overrides.css'; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/hooks/usePageType.tsx: -------------------------------------------------------------------------------- 1 | import { useLocation } from '@docusaurus/router'; 2 | import useBaseUrl from '@docusaurus/useBaseUrl'; 3 | 4 | const usePageType = () => { 5 | const location = useLocation(); 6 | const baseUrl = useBaseUrl('/'); 7 | 8 | return { 9 | isDocumentation: location.pathname.startsWith(`${baseUrl}docs`), 10 | isLanding: location.pathname === baseUrl, 11 | }; 12 | }; 13 | 14 | export default usePageType; 15 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/hooks/useScreenSize.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | /* 4 | * Caution - read before use! 5 | * As this hook uses innerWidth prop, which belongs to the window object, 6 | * it requires to use the viewport. Thus, building the production build of the 7 | * application may fail, as the Docusaurus is using SSR to serve it. 8 | * Remember to verify if user can use the viewport by using 9 | * `ExecutionEnvironment.canUseViewport` method, `` component or 10 | * `useIsBrowser` hook. 11 | */ 12 | const useScreenSize = () => { 13 | const [windowWidth, setWindowWidth] = useState(window.innerWidth); 14 | 15 | useEffect(() => { 16 | const handleWindowResize = () => { 17 | setWindowWidth(window.innerWidth); 18 | }; 19 | 20 | window.addEventListener('resize', handleWindowResize); 21 | 22 | return () => { 23 | window.removeEventListener('resize', handleWindowResize); 24 | }; 25 | }, []); 26 | 27 | return { 28 | windowWidth, 29 | }; 30 | }; 31 | 32 | export default useScreenSize; 33 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/pages/styles.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 60%; 3 | margin: 0 auto; 4 | display: flex; 5 | flex-direction: column; 6 | gap: 7.5rem; 7 | /* position: relative; */ 8 | } 9 | 10 | .waveContainer { 11 | position: relative; 12 | } 13 | 14 | @media (max-width: 1440px) { 15 | .container { 16 | width: 75%; 17 | } 18 | } 19 | 20 | @media (max-width: 996px) { 21 | .container { 22 | width: 85%; 23 | gap: 3.5rem; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/Admonition/index.js: -------------------------------------------------------------------------------- 1 | import { Admonition } from '@swmansion/t-rex-ui'; 2 | 3 | export default Admonition; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/AnnouncementBar/CloseButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import { translate } from '@docusaurus/Translate'; 4 | import IconClose from '@theme/Icon/Close'; 5 | import styles from './styles.module.css'; 6 | export default function AnnouncementBarCloseButton(props) { 7 | return ( 8 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/AnnouncementBar/CloseButton/styles.module.css: -------------------------------------------------------------------------------- 1 | .closeButton { 2 | padding: 0; 3 | line-height: 0; 4 | } 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/AnnouncementBar/Content/ArrowButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function ArrowButton({ className }) { 4 | return ( 5 | 11 | 12 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default ArrowButton; 23 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/AnnouncementBar/styles.module.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --docusaurus-announcement-bar-font-size: 24px; 3 | } 4 | 5 | .announcementBar { 6 | display: flex; 7 | font-size: var(--docusaurus-announcement-bar-font-size); 8 | background-position: 0; 9 | background-size: cover; 10 | color: var(--swm-off-white); 11 | position: relative; 12 | overflow: hidden; 13 | z-index: 10; 14 | } 15 | 16 | @media print { 17 | .announcementBar { 18 | display: none; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocCard/index.js: -------------------------------------------------------------------------------- 1 | import { DocCard } from '@swmansion/t-rex-ui'; 2 | 3 | export default DocCard; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocItem/Metadata/index.js: -------------------------------------------------------------------------------- 1 | import { DocItemMetadata } from '@swmansion/t-rex-ui'; 2 | 3 | export default DocItemMetadata; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocItem/TOC/Mobile/index.js: -------------------------------------------------------------------------------- 1 | import { DocItemTOCMobile } from '@swmansion/t-rex-ui'; 2 | 3 | export default DocItemTOCMobile; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocSidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useBaseUrl from '@docusaurus/useBaseUrl'; 3 | import { DocSidebar } from '@swmansion/t-rex-ui'; 4 | 5 | export default function DocSidebarWrapper(props) { 6 | const titleImages = { 7 | light: useBaseUrl('/img/title.svg'), 8 | dark: useBaseUrl('/img/title-dark.svg'), 9 | }; 10 | 11 | const heroImages = { 12 | logo: useBaseUrl('/img/logo-hero.svg'), 13 | title: useBaseUrl('/img/title.svg'), 14 | }; 15 | return ( 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocSidebarItem/index.js: -------------------------------------------------------------------------------- 1 | import { DocSidebarItem } from '@swmansion/t-rex-ui'; 2 | 3 | export default DocSidebarItem; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/DocSidebarItems/index.js: -------------------------------------------------------------------------------- 1 | import { DocSidebarItems } from '@swmansion/t-rex-ui'; 2 | 3 | export default DocSidebarItems; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/Footer/index.js: -------------------------------------------------------------------------------- 1 | import { Footer } from '@swmansion/t-rex-ui'; 2 | 3 | export default Footer; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/MDXComponents.js: -------------------------------------------------------------------------------- 1 | // Import the original mapper 2 | import MDXComponents from '@theme-original/MDXComponents'; 3 | import InteractiveExample from '@site/src/components/InteractiveExample'; 4 | import CollapsibleCode from '@site/src/components/CollapsibleCode'; 5 | 6 | export default { 7 | // Re-use the default mapping 8 | ...MDXComponents, 9 | // Map the "" tag to our Highlight component 10 | // `Highlight` will receive all props that were passed to `` in MDX 11 | InteractiveExample, 12 | CollapsibleCode, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/MDXComponents/Details.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import DetailsStyling from '@site/src/theme/MDXComponents/DetailsStyling'; 3 | const MDXDetails = (props) => { 4 | const items = React.Children.toArray(props.children); 5 | // Split summary item from the rest to pass it as a separate prop to the 6 | // Details theme component 7 | const summary = items.find( 8 | (item) => React.isValidElement(item) && item.props?.mdxType === 'summary' 9 | ); 10 | 11 | const children = <>{items.filter((item) => item !== summary)}; 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | }; 18 | 19 | export default MDXDetails; 20 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useBaseUrl from '@docusaurus/useBaseUrl'; 3 | import { Navbar } from '@swmansion/t-rex-ui'; 4 | 5 | export default function NavbarWrapper(props) { 6 | const titleImages = { 7 | light: useBaseUrl('/img/title.svg'), 8 | dark: useBaseUrl('/img/title-dark.svg'), 9 | }; 10 | 11 | const heroImages = { 12 | logo: useBaseUrl('/img/logo-hero.svg'), 13 | }; 14 | return ( 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/NotFound/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NotFound from '@theme-original/NotFound'; 3 | import { Redirect, useLocation } from '@docusaurus/router'; 4 | import { mapLegacyUrl } from './mapLegacyUrl'; 5 | 6 | export default function NotFoundWrapper(props) { 7 | const location = useLocation(); 8 | 9 | const redirect = mapLegacyUrl(location); 10 | 11 | if (redirect) { 12 | return ; 13 | } 14 | 15 | return ( 16 | <> 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/PaginatorNavLink/index.js: -------------------------------------------------------------------------------- 1 | import { PaginatorNavLink } from '@swmansion/t-rex-ui'; 2 | 3 | export default PaginatorNavLink; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/Root.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { getInitColorSchemeScript } from '@mui/material/styles'; 3 | import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'; 4 | import theme from '@site/src/theme/muiTheme'; 5 | 6 | export default function Root({ children }) { 7 | return ( 8 | <> 9 | {getInitColorSchemeScript()} 10 | {children} 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/SearchPage/index.js: -------------------------------------------------------------------------------- 1 | import { SearchPage } from '@swmansion/t-rex-ui'; 2 | 3 | export default SearchPage; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/Step/index.js: -------------------------------------------------------------------------------- 1 | // credits to https://github.com/jmysliv for creating the template for Reanimated 2 2 | 3 | import React from 'react'; 4 | 5 | import styles from './styles.module.css'; 6 | 7 | const Step = ({ children, title }) => { 8 | return ( 9 |
10 |
11 |
12 |
{title}
13 | {children[0]} 14 |
15 |
16 |
{children[1]}
17 |
18 | ); 19 | }; 20 | 21 | export default Step; 22 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/TOCCollapsible/index.js: -------------------------------------------------------------------------------- 1 | import { TOCCollapsible } from '@swmansion/t-rex-ui'; 2 | 3 | export default TOCCollapsible; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/TOCItems/Tree.js: -------------------------------------------------------------------------------- 1 | import { TOCItemTree } from '@swmansion/t-rex-ui'; 2 | 3 | export default TOCItemTree; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/theme/TOCItems/index.js: -------------------------------------------------------------------------------- 1 | import { TOCItems } from '@swmansion/t-rex-ui'; 2 | 3 | export default TOCItems; 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/utils/getGestureStyles.tsx: -------------------------------------------------------------------------------- 1 | import styles from './style.module.css'; 2 | 3 | export const [appearOnMobile, vanishOnMobile, webContainer] = [ 4 | styles.appearOnMobile, 5 | styles.vanishOnMobile, 6 | styles.container, 7 | ]; 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/src/utils/style.module.css: -------------------------------------------------------------------------------- 1 | .vanishOnMobile { 2 | display: flex !important; 3 | } 4 | 5 | .appearOnMobile { 6 | display: none !important; 7 | } 8 | 9 | @media (max-width: 1440px) { 10 | .vanishOnMobile { 11 | display: none !important; 12 | } 13 | 14 | .appearOnMobile { 15 | display: flex !important; 16 | } 17 | } 18 | 19 | .container { 20 | display: flex; 21 | gap: 1rem; 22 | justify-content: stretch; 23 | width: 100%; 24 | align-items: stretch; 25 | margin-bottom: 1rem; 26 | } 27 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/.nojekyll -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Air.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Air.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Air.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Air.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-AirItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-AirItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-AirItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-AirItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Black.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Black.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-BlackItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-BlackItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Bold.otf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Bold.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Bold.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-BoldItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-BoldItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Light.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Light.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-LightItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-LightItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Medium.otf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Medium.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Medium.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-MediumItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-MediumItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Regular.otf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Regular.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Regular.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-RegularItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-RegularItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-RegularItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-RegularItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Thin.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-Thin.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-ThinItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-ThinItalic.woff -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Aeonik-ThinItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Aeonik-ThinItalic.woff2 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/DMMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/DMMono-Regular.ttf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Lexend-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Lexend-Bold.ttf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/fonts/Lexend-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/fonts/Lexend-SemiBold.ttf -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/androidbutton.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/androidbutton.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/androidmail.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/androidmail.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/androidsettings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/androidsettings.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/drawer-back.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/drawer-back.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/drawer-front.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/drawer-front.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/drawer-parallax.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/drawer-parallax.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/drawer-slide.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/drawer-slide.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/iosmail.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/iosmail.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/iossettings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/iossettings.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/new-drawer-back.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/new-drawer-back.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/new-drawer-front.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/new-drawer-front.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/new-drawer-slide.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/new-drawer-slide.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/pressable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/pressable.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/sampleapp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/sampleapp.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/samplebutton.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/samplebutton.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/gifs/sampleswipeable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/gifs/sampleswipeable.gif -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/Arrow-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/Arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-circle-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-left-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-right-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-right-hero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/card-icon-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/card-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/copy-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/danger-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/danger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/img/favicon.ico -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/hand-one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/img/og-image.png -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/reset-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/img/reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/fling.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/fling.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/hover.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/hover.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/longpress.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/longpress.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/pan.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/pan.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/pinch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/pinch.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/rotation.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/rotation.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/static/video/tap.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/static/video/tap.mp4 -------------------------------------------------------------------------------- /packages/docs-gesture-handler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@docusaurus/tsconfig", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/unproccessed/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/docs-gesture-handler/unproccessed/og-image.png -------------------------------------------------------------------------------- /packages/docs-gesture-handler/versioned_docs/version-1.x/api/gesture-handlers/create-native-wrapper.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: create-native-wrapper 3 | title: createNativeWrapper 4 | sidebar_label: createNativeWrapper() 5 | --- 6 | 7 | Creates provided component with NativeViewGestureHandler, allowing it to be part of RNGH's 8 | gesture system. 9 | 10 | ## Arguments 11 | 12 | ### Component 13 | 14 | The component we want to wrap. 15 | 16 | ### config 17 | 18 | Config is an object with properties that can be used on [`NativeViewGestureHandler`](nativeview-gh.md) 19 | 20 | ## Returns 21 | 22 | Wrapped component. 23 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/versioned_docs/version-1.x/api/gesture-handlers/nativeview-gh.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: nativeview-gh 3 | title: NativeViewGestureHandler 4 | sidebar_label: NativeView 5 | --- 6 | 7 | A gesture handler that allows other touch handling components to participate in 8 | RNGH's gesture system. 9 | 10 | Used by [`createNativeWrapper()`](create-native-wrapper.md). 11 | 12 | ## Properties 13 | 14 | See [set of properties inherited from base handler class](common-gh.md#properties). Below is a list of properties specific to `NativeViewGestureHandler` component: 15 | 16 | ### `shouldActivateOnStart` (**Android only**) 17 | 18 | When `true`, underlying handler will activate unconditionally when in `BEGAN` or `UNDETERMINED` state. 19 | 20 | ### `disallowInterruption` 21 | 22 | When `true`, cancels all other gesture handlers when this `NativeViewGestureHandler` receives an `ACTIVE` state event. 23 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/versioned_docs/version-1.x/contributing.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: contributing 3 | title: Contributing 4 | --- 5 | 6 | If you are interested in the project and want to contribute or support it in other ways don't hesitate to contact [me on Twitter](https://twitter.com/kzzzf)! 7 | 8 | All PRs are welcome, but talk to us before you start working on something big. 9 | 10 | The easiest way to get started with contributing code is by: 11 | - Reviewing the list of [open issues](https://github.com/software-mansion/react-native-gesture-handler/issues) and trying to solve the one that seem approachable to you. 12 | - Updating the [documentation](https://github.com/software-mansion/react-native-gesture-handler/blob/main/docs) whenever you see some information is unclear, missing or out of date. 13 | 14 | Code is only one way how you can contribute. You may want to consider [replying on issues](https://github.com/software-mansion/react-native-gesture-handler/issues) if you know how to help. 15 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/versioned_docs/version-1.x/credits.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: credits 3 | title: Credits 4 | --- 5 | 6 | This project is supported by amazing people from [Expo.io](https://expo.io) and [Software Mansion](https://swmansion.com) 7 | 8 | [![expo](https://avatars2.githubusercontent.com/u/12504344?v=3&s=100 "Expo.io")](https://expo.io) 9 | [![swm](https://avatars0.githubusercontent.com/u/56880679?v=3&s=100 "Software Mansion")](https://swmansion.com) 10 | -------------------------------------------------------------------------------- /packages/docs-gesture-handler/versions.json: -------------------------------------------------------------------------------- 1 | ["1.x"] 2 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # CocoaPods 25 | **/ios/Pods 26 | 27 | # Android/IntelliJ 28 | # 29 | build/ 30 | .idea 31 | .gradle 32 | .cxx 33 | local.properties 34 | *.iml 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # Expo 49 | .expo/ 50 | web-build/ 51 | 52 | # vscode 53 | jsconfig.json 54 | .classpath 55 | .project 56 | .settings/ 57 | .vscode 58 | 59 | # Yarn 60 | .yarn/* 61 | !.yarn/cache 62 | !.yarn/patches 63 | !.yarn/plugins 64 | !.yarn/releases 65 | !.yarn/sdks 66 | !.yarn/versions 67 | 68 | 69 | # TS 70 | dist/ 71 | 72 | # generated by bob 73 | /lib/ 74 | 75 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/DrawerLayout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "../lib/commonjs/components/DrawerLayout", 3 | "module": "../lib/module/components/DrawerLayout", 4 | "react-native": "../src/components/DrawerLayout", 5 | "types": "../lib/typescript/components/DrawerLayout.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/ReanimatedDrawerLayout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "../lib/commonjs/components/ReanimatedDrawerLayout", 3 | "module": "../lib/module/components/ReanimatedDrawerLayout", 4 | "react-native": "../src/components/ReanimatedDrawerLayout", 5 | "types": "../lib/typescript/components/ReanimatedDrawerLayout.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/ReanimatedSwipeable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "../lib/commonjs/components/ReanimatedSwipeable", 3 | "module": "../lib/module/components/ReanimatedSwipeable", 4 | "react-native": "../src/components/ReanimatedSwipeable", 5 | "types": "../lib/typescript/components/ReanimatedSwipeable.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/Swipeable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "../lib/commonjs/components/Swipeable", 3 | "module": "../lib/module/components/Swipeable", 4 | "react-native": "../src/components/Swipeable", 5 | "types": "../lib/typescript/components/Swipeable.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/fabric/src/main/java/com/swmansion/gesturehandler/ReactContextExtensions.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler 2 | 3 | import android.annotation.SuppressLint 4 | import com.facebook.react.bridge.ReactContext 5 | import com.facebook.react.fabric.FabricUIManager 6 | import com.facebook.react.uimanager.UIManagerHelper 7 | import com.facebook.react.uimanager.common.UIManagerType 8 | import com.facebook.react.uimanager.events.Event 9 | 10 | fun ReactContext.dispatchEvent(event: Event<*>) { 11 | @SuppressLint("WrongConstant") 12 | val fabricUIManager = UIManagerHelper.getUIManager(this, UIManagerType.FABRIC) as FabricUIManager 13 | fabricUIManager.eventDispatcher.dispatchEvent(event) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | RNGH_kotlinVersion=2.0.21 20 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/software-mansion/react-native-gesture-handler/fc92105abfd29e51a5ad2a52359e8ca8634f54fb/packages/react-native-gesture-handler/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/noreanimated/src/main/java/com/swmansion/common/GestureHandlerStateManager.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.common 2 | 3 | interface GestureHandlerStateManager { 4 | fun setGestureHandlerState(handlerTag: Int, newState: Int) 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/noreanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler 2 | 3 | import com.facebook.react.bridge.ReactContext 4 | import com.facebook.react.uimanager.events.Event 5 | 6 | class ReanimatedEventDispatcher { 7 | // This is necessary on new architecture 8 | @Suppress("UNUSED_PARAMETER", "COMMENT_IN_SUPPRESSION") 9 | fun > sendEvent(event: T, reactApplicationContext: ReactContext) { 10 | // no-op 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/nosvg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler 2 | 3 | import android.view.View 4 | 5 | class RNSVGHitTester { 6 | companion object { 7 | @Suppress("UNUSED_PARAMETER") 8 | fun isSvgElement(view: Any) = false 9 | 10 | @Suppress("UNUSED_PARAMETER") 11 | fun hitTest(view: View, posX: Float, posY: Float) = false 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/paper/src/main/java/com/facebook/react/viewmanagers/RNGestureHandlerRootViewManagerInterface.java: -------------------------------------------------------------------------------- 1 | /** 2 | * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen). 3 | * 4 | * Do not edit this file as changes may cause incorrect behavior and will be lost 5 | * once the code is regenerated. 6 | * 7 | * @generated by codegen project: GeneratePropsJavaInterface.js 8 | */ 9 | 10 | package com.facebook.react.viewmanagers; 11 | 12 | import android.view.View; 13 | import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface; 14 | 15 | public interface RNGestureHandlerRootViewManagerInterface extends ViewManagerWithGeneratedInterface { 16 | // No props 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/paper/src/main/java/com/swmansion/gesturehandler/ReactContextExtensions.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler 2 | 3 | import com.facebook.react.bridge.ReactContext 4 | import com.facebook.react.uimanager.UIManagerModule 5 | import com.facebook.react.uimanager.events.Event 6 | 7 | fun ReactContext.dispatchEvent(event: Event<*>) { 8 | try { 9 | this.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher.dispatchEvent(event) 10 | } catch (e: NullPointerException) { 11 | throw Exception( 12 | "Couldn't get an instance of UIManagerModule. Gesture Handler is unable to send an event.", 13 | e, 14 | ) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/reanimated/src/main/java/com/swmansion/gesturehandler/ReanimatedEventDispatcher.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler 2 | 3 | import com.facebook.react.bridge.ReactContext 4 | import com.facebook.react.uimanager.events.Event 5 | import com.swmansion.reanimated.ReanimatedModule 6 | 7 | class ReanimatedEventDispatcher { 8 | private var reanimatedModule: ReanimatedModule? = null 9 | 10 | fun > sendEvent(event: T, reactApplicationContext: ReactContext) { 11 | if (reanimatedModule == null) { 12 | reanimatedModule = reactApplicationContext.getNativeModule(ReanimatedModule::class.java) 13 | } 14 | 15 | reanimatedModule?.nodesManager?.onEventDispatch(event) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include 'lib' -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/spotless.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.diffplug.spotless" 2 | 3 | spotless { 4 | kotlin { 5 | target "**/*.kt" 6 | ktlint().editorConfigOverride([indent_size: 2, max_line_length: 120]) 7 | trimTrailingWhitespace() 8 | leadingTabsToSpaces() 9 | endWithNewline() 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/DiagonalDirections.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | object DiagonalDirections { 4 | const val DIRECTION_RIGHT_UP = GestureHandler.DIRECTION_RIGHT or GestureHandler.DIRECTION_UP 5 | const val DIRECTION_RIGHT_DOWN = GestureHandler.DIRECTION_RIGHT or GestureHandler.DIRECTION_DOWN 6 | const val DIRECTION_LEFT_UP = GestureHandler.DIRECTION_LEFT or GestureHandler.DIRECTION_UP 7 | const val DIRECTION_LEFT_DOWN = GestureHandler.DIRECTION_LEFT or GestureHandler.DIRECTION_DOWN 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerInteractionController.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | interface GestureHandlerInteractionController { 4 | fun shouldWaitForHandlerFailure(handler: GestureHandler, otherHandler: GestureHandler): Boolean 5 | fun shouldRequireHandlerToWaitForFailure(handler: GestureHandler, otherHandler: GestureHandler): Boolean 6 | fun shouldRecognizeSimultaneously(handler: GestureHandler, otherHandler: GestureHandler): Boolean 7 | fun shouldHandlerBeCancelledBy(handler: GestureHandler, otherHandler: GestureHandler): Boolean 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerRegistry.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | import android.view.View 4 | import java.util.* 5 | 6 | interface GestureHandlerRegistry { 7 | fun getHandlersForView(view: View): ArrayList? 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/ManualGestureHandler.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | import android.content.Context 4 | import android.view.MotionEvent 5 | import com.swmansion.gesturehandler.react.eventbuilders.ManualGestureHandlerEventDataBuilder 6 | 7 | class ManualGestureHandler : GestureHandler() { 8 | override fun onHandle(event: MotionEvent, sourceEvent: MotionEvent) { 9 | if (state == STATE_UNDETERMINED) { 10 | begin() 11 | } 12 | } 13 | 14 | class Factory : GestureHandler.Factory() { 15 | override val type = ManualGestureHandler::class.java 16 | override val name = "ManualGestureHandler" 17 | 18 | override fun create(context: Context?): ManualGestureHandler = ManualGestureHandler() 19 | 20 | override fun createEventBuilder(handler: ManualGestureHandler) = ManualGestureHandlerEventDataBuilder(handler) 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/OnTouchEventListener.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | import android.view.MotionEvent 4 | 5 | interface OnTouchEventListener { 6 | fun onHandlerUpdate(handler: T, event: MotionEvent) 7 | fun onStateChange(handler: T, newState: Int, oldState: Int) 8 | fun onTouchEvent(handler: T) 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/PointerEventsConfig.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | enum class PointerEventsConfig { 4 | /** 5 | * Neither the container nor its children receive events. 6 | */ 7 | NONE, 8 | 9 | /** 10 | * Container doesn't get events but all of its children do. 11 | */ 12 | BOX_NONE, 13 | 14 | /** 15 | * Container gets events but none of its children do. 16 | */ 17 | BOX_ONLY, 18 | 19 | /** 20 | * Container and all of its children receive touch events (like pointerEvents is unspecified). 21 | */ 22 | AUTO, 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/ViewConfigurationHelper.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.core 2 | 3 | import android.view.View 4 | import android.view.ViewGroup 5 | 6 | interface ViewConfigurationHelper { 7 | fun getPointerEventsConfigForView(view: View): PointerEventsConfig 8 | fun getChildInDrawingOrderAtIndex(parent: ViewGroup, index: Int): View 9 | fun isViewClippingChildren(view: ViewGroup): Boolean 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/Extensions.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react 2 | 3 | import android.content.Context 4 | import android.view.accessibility.AccessibilityManager 5 | import com.facebook.react.bridge.ReactContext 6 | import com.facebook.react.modules.core.DeviceEventManagerModule 7 | import com.facebook.react.uimanager.UIManagerModule 8 | 9 | val ReactContext.deviceEventEmitter: DeviceEventManagerModule.RCTDeviceEventEmitter 10 | get() = this.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java) 11 | 12 | val ReactContext.UIManager: UIManagerModule 13 | get() = this.getNativeModule(UIManagerModule::class.java)!! 14 | 15 | fun Context.isScreenReaderOn() = 16 | (getSystemService(Context.ACCESSIBILITY_SERVICE) as AccessibilityManager).isTouchExplorationEnabled 17 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEnabledRootView.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react 2 | 3 | import android.content.Context 4 | import android.util.AttributeSet 5 | import com.facebook.react.ReactRootView 6 | 7 | @Deprecated( 8 | message = "Use component instead." + 9 | "Check gesture handler installation instructions in documentation for more information.", 10 | ) 11 | class RNGestureHandlerEnabledRootView : ReactRootView { 12 | constructor(context: Context?) : super(context) 13 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) 14 | 15 | init { 16 | throw UnsupportedOperationException( 17 | "Your application is configured to use RNGestureHandlerEnabledRootView which is no longer supported. You can see how to migrate to here: https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot", 18 | ) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootInterface.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react 2 | 3 | interface RNGestureHandlerRootInterface { 4 | val rootHelper: RNGestureHandlerRootHelper? 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/eventbuilders/GestureHandlerEventDataBuilder.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react.eventbuilders 2 | 3 | import com.facebook.react.bridge.WritableMap 4 | import com.swmansion.gesturehandler.core.GestureHandler 5 | 6 | abstract class GestureHandlerEventDataBuilder(handler: T) { 7 | private val numberOfPointers: Int 8 | private val handlerTag: Int 9 | private val state: Int 10 | private val pointerType: Int 11 | 12 | init { 13 | numberOfPointers = handler.numberOfPointers 14 | handlerTag = handler.tag 15 | state = handler.state 16 | pointerType = handler.pointerType 17 | } 18 | 19 | open fun buildEventData(eventData: WritableMap) { 20 | eventData.putInt("numberOfPointers", numberOfPointers) 21 | eventData.putInt("handlerTag", handlerTag) 22 | eventData.putInt("state", state) 23 | eventData.putInt("pointerType", pointerType) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/eventbuilders/ManualGestureHandlerEventDataBuilder.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react.eventbuilders 2 | 3 | import com.swmansion.gesturehandler.core.ManualGestureHandler 4 | 5 | class ManualGestureHandlerEventDataBuilder(handler: ManualGestureHandler) : 6 | GestureHandlerEventDataBuilder(handler) 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/eventbuilders/NativeGestureHandlerEventDataBuilder.kt: -------------------------------------------------------------------------------- 1 | package com.swmansion.gesturehandler.react.eventbuilders 2 | 3 | import com.facebook.react.bridge.WritableMap 4 | import com.swmansion.gesturehandler.core.NativeViewGestureHandler 5 | 6 | class NativeGestureHandlerEventDataBuilder(handler: NativeViewGestureHandler) : 7 | GestureHandlerEventDataBuilder(handler) { 8 | private val pointerInside: Boolean 9 | 10 | init { 11 | pointerInside = handler.isWithinBounds 12 | } 13 | 14 | override fun buildEventData(eventData: WritableMap) { 15 | super.buildEventData(eventData) 16 | 17 | eventData.putBoolean("pointerInside", pointerInside) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNFlingHandler.h: -------------------------------------------------------------------------------- 1 | #import "../RNGHVector.h" 2 | #import "RNGestureHandler.h" 3 | 4 | @interface RNFlingGestureHandler : RNGestureHandler 5 | @end 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNForceTouchHandler.h: -------------------------------------------------------------------------------- 1 | #import "RNGestureHandler.h" 2 | 3 | @interface RNForceTouchHandler : RNGestureHandler 4 | @end 5 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNHoverHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoverHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Jakub Piasecki on 31/03/2023. 6 | // 7 | 8 | #import "RNGestureHandler.h" 9 | 10 | API_AVAILABLE(ios(13.4)) 11 | @interface RNHoverGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNLongPressHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNLongPressHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNLongPressGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNManualHandler.h: -------------------------------------------------------------------------------- 1 | #import "RNGestureHandler.h" 2 | 3 | @interface RNManualGestureHandler : RNGestureHandler 4 | @end 5 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNNativeViewHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNNativeViewHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNDummyGestureRecognizer : UIGestureRecognizer 12 | @end 13 | 14 | @interface RNNativeViewGestureHandler : RNGestureHandler 15 | @end 16 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNPanHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNPanHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNPanGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNPinchHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNPinchHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNPinchGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNRotationHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNRotationHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNRotationGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/Handlers/RNTapHandler.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNTapHandler.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNTapGestureHandler : RNGestureHandler 12 | @end 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGHStylusData.m: -------------------------------------------------------------------------------- 1 | // 2 | // RNGHStylusData.m 3 | // DoubleConversion 4 | // 5 | // Created by Michał Bert on 18/09/2024. 6 | // 7 | 8 | #import "RNGHStylusData.h" 9 | #import 10 | 11 | @implementation RNGHStylusData 12 | 13 | - (instancetype)init 14 | { 15 | if (self = [super init]) { 16 | self.tiltX = 0; 17 | self.tiltY = 0; 18 | self.altitudeAngle = M_PI_2; 19 | self.azimuthAngle = 0; 20 | self.pressure = 0; 21 | } 22 | 23 | return self; 24 | } 25 | 26 | - (NSDictionary *)toDictionary 27 | { 28 | return @{ 29 | @"tiltX" : @(_tiltX), 30 | @"tiltY" : @(_tiltY), 31 | @"altitudeAngle" : @(_altitudeAngle), 32 | @"azimuthAngle" : @(_azimuthAngle), 33 | @"pressure" : @(_pressure), 34 | }; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGHTouchEventType.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | typedef NS_ENUM(NSInteger, RNGHTouchEventType) { 4 | RNGHTouchEventTypeUndetermined = 0, 5 | RNGHTouchEventTypePointerDown, 6 | RNGHTouchEventTypePointerMove, 7 | RNGHTouchEventTypePointerUp, 8 | RNGHTouchEventTypeCancelled, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGHVector.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNGHVector.h 3 | // Pods 4 | // 5 | // Created by Michał Bert on 05/08/2024. 6 | // 7 | 8 | #import "RNGestureHandlerDirection.h" 9 | 10 | #ifndef RNGHVector_h 11 | #define RNGHVector_h 12 | 13 | @interface Vector : NSObject 14 | 15 | @property (atomic, readonly, assign) double x; 16 | @property (atomic, readonly, assign) double y; 17 | @property (atomic, readonly, assign) double unitX; 18 | @property (atomic, readonly, assign) double unitY; 19 | @property (atomic, readonly, assign) double magnitude; 20 | 21 | + (Vector *_Nonnull)fromDirection:(RNGestureHandlerDirection)direction; 22 | + (Vector *_Nonnull)fromVelocityX:(double)vx withVelocityY:(double)vy; 23 | - (nonnull instancetype)initWithX:(double)x withY:(double)y; 24 | - (double)computeSimilarity:(Vector *_Nonnull)other; 25 | - (BOOL)isSimilar:(Vector *_Nonnull)other withThreshold:(double)threshold; 26 | 27 | @end 28 | 29 | static double MINIMAL_RECOGNIZABLE_MAGNITUDE = 0.1; 30 | 31 | #endif /* RNGHVector_h */ 32 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandler.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerActionType.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | typedef NS_ENUM(NSInteger, RNGestureHandlerActionType) { 4 | RNGestureHandlerActionTypeReanimatedWorklet = 1, // Reanimated worklet 5 | RNGestureHandlerActionTypeNativeAnimatedEvent, // Animated.event with useNativeDriver: true 6 | RNGestureHandlerActionTypeJSFunctionOldAPI, // JS function or Animated.event with useNativeDriver: false using old 7 | // RNGH API 8 | RNGestureHandlerActionTypeJSFunctionNewAPI, // JS function or Animated.event with useNativeDriver: false using new 9 | // RNGH API 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.h: -------------------------------------------------------------------------------- 1 | #ifdef RCT_NEW_ARCH_ENABLED 2 | 3 | #if !TARGET_OS_OSX 4 | #import 5 | #else 6 | #import 7 | #endif 8 | 9 | #import 10 | 11 | #import "RNGestureHandlerButton.h" 12 | 13 | NS_ASSUME_NONNULL_BEGIN 14 | 15 | @interface RNGestureHandlerButtonComponentView : RCTViewComponentView 16 | - (void)setAccessibilityProps:(const facebook::react::Props::Shared &)props 17 | oldProps:(const facebook::react::Props::Shared &)oldProps; 18 | @end 19 | 20 | NS_ASSUME_NONNULL_END 21 | 22 | #endif // RCT_NEW_ARCH_ENABLED 23 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerButtonManager.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface RNGestureHandlerButtonManager : RCTViewManager 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerModule.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #ifdef RCT_NEW_ARCH_ENABLED 5 | #import 6 | #import 7 | #import 8 | #else 9 | #import 10 | #endif 11 | 12 | @interface RNGestureHandlerModule : RCTEventEmitter 13 | #ifdef RCT_NEW_ARCH_ENABLED 14 | 15 | #else 16 | 17 | #endif 18 | 19 | @end 20 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerPointerTracker.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import "RNGHTouchEventType.h" 3 | #import "RNGHUIKit.h" 4 | 5 | #define MAX_POINTERS_COUNT 12 6 | 7 | @class RNGestureHandler; 8 | 9 | @interface RNGestureHandlerPointerTracker : NSObject 10 | 11 | @property (nonatomic) RNGHTouchEventType eventType; 12 | @property (nonatomic) NSArray *changedPointersData; 13 | @property (nonatomic) NSArray *allPointersData; 14 | @property (nonatomic) int trackedPointersCount; 15 | 16 | - (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler; 17 | 18 | - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; 19 | - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; 20 | - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; 21 | - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event; 22 | - (void)reset; 23 | - (void)cancelPointers; 24 | 25 | @end 26 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerPointerType.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | typedef NS_ENUM(NSInteger, RNGestureHandlerPointerType) { 4 | RNGestureHandlerTouch = 0, 5 | RNGestureHandlerStylus, 6 | RNGestureHandlerMouse, 7 | RNGestureHandlerOtherPointer, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerRegistry.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNGestureHandlerRegistry.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNGestureHandlerRegistry : NSObject 12 | 13 | - (nullable RNGestureHandler *)handlerWithTag:(nonnull NSNumber *)handlerTag; 14 | - (void)registerGestureHandler:(nonnull RNGestureHandler *)gestureHandler; 15 | - (void)attachHandlerWithTag:(nonnull NSNumber *)handlerTag 16 | toView:(nonnull RNGHUIView *)view 17 | withActionType:(RNGestureHandlerActionType)actionType; 18 | - (void)dropHandlerWithTag:(nonnull NSNumber *)handlerTag; 19 | - (void)dropAllHandlers; 20 | 21 | @end 22 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerState.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | typedef NS_ENUM(NSInteger, RNGestureHandlerState) { 4 | RNGestureHandlerStateUndetermined = 0, 5 | RNGestureHandlerStateFailed, 6 | RNGestureHandlerStateBegan, 7 | RNGestureHandlerStateCancelled, 8 | RNGestureHandlerStateActive, 9 | RNGestureHandlerStateEnd, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNGestureHandlerStateManager.h: -------------------------------------------------------------------------------- 1 | @protocol RNGestureHandlerStateManager 2 | 3 | - (void)setGestureState:(int)state forHandler:(int)handlerTag; 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNManualActivationRecognizer.h: -------------------------------------------------------------------------------- 1 | #if !TARGET_OS_OSX 2 | #import 3 | #else 4 | #import 5 | #endif 6 | 7 | @class RNGestureHandler; 8 | 9 | #if !TARGET_OS_OSX 10 | @interface RNManualActivationRecognizer : UIGestureRecognizer 11 | #else 12 | @interface RNManualActivationRecognizer : NSGestureRecognizer 13 | #endif 14 | 15 | - (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler; 16 | - (void)fail; 17 | 18 | @end 19 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/apple/RNRootViewGestureRecognizer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNRootViewGestureRecognizer.h 3 | // RNGestureHandler 4 | // 5 | // Created by Krzysztof Magiera on 12/10/2017. 6 | // Copyright © 2017 Software Mansion. All rights reserved. 7 | // 8 | 9 | #import "RNGestureHandler.h" 10 | 11 | @interface RNRootViewGestureRecognizer : UIGestureRecognizer 12 | 13 | @property (nullable, nonatomic, weak) id delegate; 14 | 15 | - (void)blockOtherRecognizers; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | '@babel/preset-typescript', 5 | 'module:@react-native/babel-preset', 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/jest-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "../lib/commonjs/jestUtils/index", 3 | "module": "../lib/module/jestUtils/index", 4 | "react-native": "../src/jestUtils/index", 5 | "types": "../lib/typescript/jestUtils/index.d.ts" 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | setupFiles: ['./jestSetup.js'], 4 | transformIgnorePatterns: [ 5 | "node_modules/?!(react-native-reanimated)", 6 | "node_modules/?!(react-native)" 7 | ], 8 | modulePathIgnorePatterns: [ 9 | "/lib/" 10 | ], 11 | roots: ["/src/"] 12 | }; 13 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/jestSetup.js: -------------------------------------------------------------------------------- 1 | jest.mock('./src/RNGestureHandlerModule', () => require('./src/mocks')); 2 | jest.mock('./lib/commonjs/RNGestureHandlerModule', () => 3 | require('./lib/commonjs/mocks') 4 | ); 5 | jest.mock('./lib/module/RNGestureHandlerModule', () => 6 | require('./lib/module/mocks') 7 | ); 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/ActionType.ts: -------------------------------------------------------------------------------- 1 | export const ActionType = { 2 | REANIMATED_WORKLET: 1, 3 | NATIVE_ANIMATED_EVENT: 2, 4 | JS_FUNCTION_OLD_API: 3, 5 | JS_FUNCTION_NEW_API: 4, 6 | } as const; 7 | 8 | // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value 9 | export type ActionType = (typeof ActionType)[keyof typeof ActionType]; 10 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/Directions.ts: -------------------------------------------------------------------------------- 1 | const RIGHT = 1; 2 | const LEFT = 2; 3 | const UP = 4; 4 | const DOWN = 8; 5 | 6 | // Public interface 7 | export const Directions = { 8 | RIGHT: RIGHT, 9 | LEFT: LEFT, 10 | UP: UP, 11 | DOWN: DOWN, 12 | } as const; 13 | 14 | // Internal interface 15 | export const DiagonalDirections = { 16 | UP_RIGHT: UP | RIGHT, 17 | DOWN_RIGHT: DOWN | RIGHT, 18 | UP_LEFT: UP | LEFT, 19 | DOWN_LEFT: DOWN | LEFT, 20 | } as const; 21 | 22 | // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value 23 | export type Directions = (typeof Directions)[keyof typeof Directions]; 24 | // eslint-disable-next-line @typescript-eslint/no-redeclare 25 | export type DiagonalDirections = 26 | (typeof DiagonalDirections)[keyof typeof DiagonalDirections]; 27 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/GestureHandlerRootViewContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.createContext(false); 4 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/PlatformConstants.ts: -------------------------------------------------------------------------------- 1 | import { NativeModules, Platform } from 'react-native'; 2 | 3 | type PlatformConstants = { 4 | forceTouchAvailable: boolean; 5 | }; 6 | 7 | export default (NativeModules?.PlatformConstants ?? 8 | Platform.constants) as PlatformConstants; 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/PlatformConstants.web.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | get forceTouchAvailable() { 3 | return false; 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/PointerType.ts: -------------------------------------------------------------------------------- 1 | export enum PointerType { 2 | TOUCH, 3 | STYLUS, 4 | MOUSE, 5 | KEY, 6 | OTHER, 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/RNGestureHandlerModule.ts: -------------------------------------------------------------------------------- 1 | // Reexport the native module spec used by codegen. The relevant files are inluded on Android 2 | // to ensure the compatibility with the old arch, while iOS doesn't require those at all. 3 | 4 | import Module from './specs/NativeRNGestureHandlerModule'; 5 | export default Module; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/RNRenderer.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment 2 | // @ts-nocheck 3 | export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative'; 4 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/RNRenderer.web.ts: -------------------------------------------------------------------------------- 1 | export const RNRenderer = { 2 | findHostInstance_DEPRECATED: (_ref: any) => null, 3 | }; 4 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/State.ts: -------------------------------------------------------------------------------- 1 | // TODO use State from RNModule 2 | 3 | export const State = { 4 | UNDETERMINED: 0, 5 | FAILED: 1, 6 | BEGAN: 2, 7 | CANCELLED: 3, 8 | ACTIVE: 4, 9 | END: 5, 10 | } as const; 11 | 12 | // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value 13 | export type State = (typeof State)[keyof typeof State]; 14 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/TouchEventType.ts: -------------------------------------------------------------------------------- 1 | export const TouchEventType = { 2 | UNDETERMINED: 0, 3 | TOUCHES_DOWN: 1, 4 | TOUCHES_MOVE: 2, 5 | TOUCHES_UP: 3, 6 | TOUCHES_CANCELLED: 4, 7 | } as const; 8 | 9 | // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value 10 | export type TouchEventType = 11 | (typeof TouchEventType)[keyof typeof TouchEventType]; 12 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/__mocks__/RNGestureHandlerModule.ts: -------------------------------------------------------------------------------- 1 | import Mocks from '../mocks'; 2 | 3 | export default { 4 | ...Mocks, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/__tests__/utils.test.tsx: -------------------------------------------------------------------------------- 1 | import { withPrevAndCurrent } from '../utils'; 2 | 3 | describe('withPrevAndCurrent', () => { 4 | test('returns transformed elements', () => { 5 | const concat = (prev: string | null, current: number) => 6 | `${prev ?? '0'}${current}`; 7 | expect(withPrevAndCurrent([1, 2, 3, 4], concat)).toEqual([ 8 | '01', 9 | '012', 10 | '0123', 11 | '01234', 12 | ]); 13 | expect(withPrevAndCurrent([1], concat)).toEqual(['01']); 14 | expect(withPrevAndCurrent([], concat)).toEqual([]); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx: -------------------------------------------------------------------------------- 1 | import { HostComponent } from 'react-native'; 2 | import type { RawButtonProps } from './GestureButtonsProps'; 3 | import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent'; 4 | 5 | export default RNGestureHandlerButtonNativeComponent as HostComponent; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View } from 'react-native'; 3 | 4 | export default React.forwardRef>( 5 | (props, ref) => 6 | ); 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/GestureHandlerRootView.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropsWithChildren } from 'react'; 3 | import { View, ViewProps, StyleSheet } from 'react-native'; 4 | import { maybeInitializeFabric } from '../init'; 5 | import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext'; 6 | 7 | export interface GestureHandlerRootViewProps 8 | extends PropsWithChildren {} 9 | 10 | export default function GestureHandlerRootView({ 11 | style, 12 | ...rest 13 | }: GestureHandlerRootViewProps) { 14 | // Try initialize fabric on the first render, at this point we can 15 | // reliably check if fabric is enabled (the function contains a flag 16 | // to make sure it's called only once) 17 | maybeInitializeFabric(); 18 | 19 | return ( 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | const styles = StyleSheet.create({ 27 | container: { flex: 1 }, 28 | }); 29 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/GestureHandlerRootView.web.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropsWithChildren } from 'react'; 3 | import { View, ViewProps, StyleSheet } from 'react-native'; 4 | import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext'; 5 | 6 | export interface GestureHandlerRootViewProps 7 | extends PropsWithChildren {} 8 | 9 | export default function GestureHandlerRootView({ 10 | style, 11 | ...rest 12 | }: GestureHandlerRootViewProps) { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | const styles = StyleSheet.create({ 21 | container: { flex: 1 }, 22 | }); 23 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/Pressable/index.ts: -------------------------------------------------------------------------------- 1 | export type { 2 | PressableProps, 3 | PressableStateCallbackType, 4 | } from './PressableProps'; 5 | export { default } from './Pressable'; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/gestureHandlerRootHOC.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { StyleSheet, StyleProp, ViewStyle } from 'react-native'; 3 | import hoistNonReactStatics from 'hoist-non-react-statics'; 4 | import GestureHandlerRootView from './GestureHandlerRootView'; 5 | 6 | export default function gestureHandlerRootHOC

( 7 | Component: React.ComponentType

, 8 | containerStyles?: StyleProp 9 | ): React.ComponentType

{ 10 | function Wrapper(props: P) { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | Wrapper.displayName = `gestureHandlerRootHOC(${ 19 | Component.displayName || Component.name 20 | })`; 21 | 22 | // @ts-ignore - hoistNonReactStatics uses old version of @types/react 23 | hoistNonReactStatics(Wrapper, Component); 24 | 25 | return Wrapper; 26 | } 27 | 28 | const styles = StyleSheet.create({ 29 | container: { flex: 1 }, 30 | }); 31 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/touchables/ExtraButtonProps.ts: -------------------------------------------------------------------------------- 1 | export type ExtraButtonProps = { 2 | borderless?: boolean; 3 | rippleColor?: number | string | null; 4 | rippleRadius?: number | null; 5 | foreground?: boolean; 6 | exclusive?: boolean; 7 | }; 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback.tsx: -------------------------------------------------------------------------------- 1 | import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native'; 2 | 3 | /** 4 | * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead. 5 | */ 6 | const TouchableNativeFeedback = RNTouchableNativeFeedback; 7 | 8 | export default TouchableNativeFeedback; 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedbackProps.tsx: -------------------------------------------------------------------------------- 1 | import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native'; 2 | import type { GenericTouchableProps } from './GenericTouchableProps'; 3 | import { ExtraButtonProps } from './ExtraButtonProps'; 4 | 5 | export type TouchableNativeFeedbackExtraProps = ExtraButtonProps; 6 | /** 7 | * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead. 8 | */ 9 | export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps & 10 | GenericTouchableProps; 11 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/touchables/index.ts: -------------------------------------------------------------------------------- 1 | export type { TouchableHighlightProps } from './TouchableHighlight'; 2 | export type { TouchableOpacityProps } from './TouchableOpacity'; 3 | export type { TouchableWithoutFeedbackProps } from './TouchableWithoutFeedback'; 4 | export { default as TouchableNativeFeedback } from './TouchableNativeFeedback'; 5 | export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback'; 6 | export { default as TouchableOpacity } from './TouchableOpacity'; 7 | export { default as TouchableHighlight } from './TouchableHighlight'; 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/components/utils.ts: -------------------------------------------------------------------------------- 1 | import { BaseGesture, GestureRef } from '../handlers/gestures/gesture'; 2 | 3 | export type RelationPropName = 4 | | 'simultaneousWithExternalGesture' 5 | | 'requireExternalGestureToFail' 6 | | 'blocksExternalGesture'; 7 | 8 | export type RelationPropType = 9 | | Exclude 10 | | Exclude[]; 11 | 12 | export function applyRelationProp( 13 | gesture: BaseGesture, 14 | relationPropName: RelationPropName, 15 | relationProp: RelationPropType 16 | ) { 17 | if (!relationProp) { 18 | return; 19 | } 20 | 21 | if (Array.isArray(relationProp)) { 22 | gesture[relationPropName](...relationProp); 23 | } else { 24 | gesture[relationPropName](relationProp); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/findNodeHandle.ts: -------------------------------------------------------------------------------- 1 | import { findNodeHandle } from 'react-native'; 2 | 3 | export default findNodeHandle; 4 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/getShadowNodeFromRef.web.ts: -------------------------------------------------------------------------------- 1 | // Used by GestureDetector (unsupported on web at the moment) to check whether the 2 | // attached view may get flattened on Fabric. Original implementation causes errors 3 | // on web due to the static resolution of `require` statements by webpack breaking 4 | // the conditional importing. 5 | export function getShadowNodeFromRef(_ref: any) { 6 | return null; 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/ghQueueMicrotask.ts: -------------------------------------------------------------------------------- 1 | // We check for typeof requestAnimationFrame because of SSR 2 | // Functions are bound to null to avoid issues with scope when using Metro inline requires. 3 | export const ghQueueMicrotask = 4 | typeof setImmediate === 'function' 5 | ? setImmediate.bind(null) 6 | : typeof requestAnimationFrame === 'function' 7 | ? requestAnimationFrame.bind(null) 8 | : queueMicrotask.bind(null); 9 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/PressabilityDebugView.tsx: -------------------------------------------------------------------------------- 1 | // @ts-ignore it's not exported so we need to import it from path 2 | export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; 3 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/PressabilityDebugView.web.tsx: -------------------------------------------------------------------------------- 1 | // PressabilityDebugView is not implemented in react-native-web 2 | export function PressabilityDebugView() { 3 | return null; 4 | } 5 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/customDirectEventTypes.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore - its taken straight from RN 2 | export { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry'; 3 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/customDirectEventTypes.web.ts: -------------------------------------------------------------------------------- 1 | // customDirectEventTypes doesn't exist in react-native-web, therefore importing it 2 | // directly in createHandler.tsx would end in crash. 3 | const customDirectEventTypes = {}; 4 | 5 | export { customDirectEventTypes }; 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/dropHandlers.ts: -------------------------------------------------------------------------------- 1 | import { unregisterHandler } from '../../handlersRegistry'; 2 | import RNGestureHandlerModule from '../../../RNGestureHandlerModule'; 3 | import { scheduleFlushOperations } from '../../utils'; 4 | import { AttachedGestureState } from './types'; 5 | import { MountRegistry } from '../../../mountRegistry'; 6 | 7 | export function dropHandlers(preparedGesture: AttachedGestureState) { 8 | for (const handler of preparedGesture.attachedGestures) { 9 | RNGestureHandlerModule.dropGestureHandler(handler.handlerTag); 10 | 11 | unregisterHandler(handler.handlerTag, handler.config.testId); 12 | 13 | MountRegistry.gestureWillUnmount(handler); 14 | } 15 | 16 | scheduleFlushOperations(); 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/gestures/gestureStateManager.web.ts: -------------------------------------------------------------------------------- 1 | import NodeManager from '../../web/tools/NodeManager'; 2 | import { GestureStateManagerType } from './gestureStateManager'; 3 | 4 | export const GestureStateManager = { 5 | create(handlerTag: number): GestureStateManagerType { 6 | return { 7 | begin: () => { 8 | NodeManager.getHandler(handlerTag).begin(); 9 | }, 10 | 11 | activate: () => { 12 | NodeManager.getHandler(handlerTag).activate(true); 13 | }, 14 | 15 | fail: () => { 16 | NodeManager.getHandler(handlerTag).fail(); 17 | }, 18 | 19 | end: () => { 20 | NodeManager.getHandler(handlerTag).end(); 21 | }, 22 | }; 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/gestures/manualGesture.ts: -------------------------------------------------------------------------------- 1 | import { GestureUpdateEvent } from '../gestureHandlerCommon'; 2 | import { ContinousBaseGesture } from './gesture'; 3 | 4 | function changeEventCalculator( 5 | current: GestureUpdateEvent>, 6 | _previous?: GestureUpdateEvent> 7 | ) { 8 | 'worklet'; 9 | return current; 10 | } 11 | 12 | export class ManualGesture extends ContinousBaseGesture< 13 | Record, 14 | Record 15 | > { 16 | constructor() { 17 | super(); 18 | 19 | this.handlerName = 'ManualGestureHandler'; 20 | } 21 | 22 | onChange( 23 | callback: (event: GestureUpdateEvent>) => void 24 | ) { 25 | // @ts-ignore TS being overprotective, Record is Record 26 | this.handlers.changeEventCalculator = changeEventCalculator; 27 | return super.onChange(callback); 28 | } 29 | } 30 | 31 | export type ManualGestureType = InstanceType; 32 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/handlers/getNextHandlerTag.ts: -------------------------------------------------------------------------------- 1 | let handlerTag = 1; 2 | 3 | export function getNextHandlerTag(): number { 4 | return handlerTag++; 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/init.ts: -------------------------------------------------------------------------------- 1 | import { startListening } from './handlers/gestures/eventReceiver'; 2 | import RNGestureHandlerModule from './RNGestureHandlerModule'; 3 | import { isFabric } from './utils'; 4 | 5 | let fabricInitialized = false; 6 | 7 | export function initialize() { 8 | startListening(); 9 | } 10 | 11 | // Since isFabric() may give wrong results before the first render, we call this 12 | // method during render of GestureHandlerRootView 13 | export function maybeInitializeFabric() { 14 | if (isFabric() && !fabricInitialized) { 15 | RNGestureHandlerModule.install(); 16 | fabricInitialized = true; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/jestUtils/index.ts: -------------------------------------------------------------------------------- 1 | export { getByGestureTestId, fireGestureHandler } from './jestUtils'; 2 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { 3 | Int32, 4 | WithDefault, 5 | Float, 6 | } from 'react-native/Libraries/Types/CodegenTypes'; 7 | import type { ViewProps, ColorValue } from 'react-native'; 8 | 9 | interface NativeProps extends ViewProps { 10 | exclusive?: WithDefault; 11 | foreground?: boolean; 12 | borderless?: boolean; 13 | enabled?: WithDefault; 14 | rippleColor?: ColorValue; 15 | rippleRadius?: Int32; 16 | touchSoundDisabled?: WithDefault; 17 | borderWidth?: Float; 18 | borderColor?: ColorValue; 19 | borderStyle?: WithDefault; 20 | } 21 | 22 | export default codegenNativeComponent('RNGestureHandlerButton'); 23 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/specs/RNGestureHandlerRootViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { ViewProps } from 'react-native'; 3 | 4 | interface NativeProps extends ViewProps {} 5 | 6 | export default codegenNativeComponent('RNGestureHandlerRootView'); 7 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/typeUtils.ts: -------------------------------------------------------------------------------- 1 | export type ValueOf = T[keyof T]; 2 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web/constants.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_TOUCH_SLOP = 15; 2 | export const MINIMAL_RECOGNIZABLE_MAGNITUDE = 0.1; 3 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web/tools/GestureHandlerDelegate.ts: -------------------------------------------------------------------------------- 1 | import { Config } from '../interfaces'; 2 | 3 | export interface MeasureResult { 4 | pageX: number; 5 | pageY: number; 6 | width: number; 7 | height: number; 8 | } 9 | 10 | export interface GestureHandlerDelegate { 11 | view: TComponent; 12 | 13 | init(viewRef: number, handler: THandler): void; 14 | isPointerInBounds({ x, y }: { x: number; y: number }): boolean; 15 | measureView(): MeasureResult; 16 | reset(): void; 17 | 18 | onBegin(): void; 19 | onActivate(): void; 20 | onEnd(): void; 21 | onCancel(): void; 22 | onFail(): void; 23 | onEnabledChange(enabled: boolean): void; 24 | 25 | destroy(config: Config): void; 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web_hammer/Errors.ts: -------------------------------------------------------------------------------- 1 | export class GesturePropError extends Error { 2 | constructor(name: string, value: unknown, expectedType: string) { 3 | super( 4 | `Invalid property \`${name}: ${value}\` expected \`${expectedType}\`` 5 | ); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web_hammer/IndiscreteGestureHandler.ts: -------------------------------------------------------------------------------- 1 | import GestureHandler from './GestureHandler'; 2 | 3 | /** 4 | * The base class for **Rotation** and **Pinch** gesture handlers. 5 | */ 6 | abstract class IndiscreteGestureHandler extends GestureHandler { 7 | get shouldEnableGestureOnSetup() { 8 | return false; 9 | } 10 | 11 | updateGestureConfig({ minPointers = 2, maxPointers = 2, ...props }) { 12 | return super.updateGestureConfig({ 13 | minPointers, 14 | maxPointers, 15 | ...props, 16 | }); 17 | } 18 | 19 | isGestureEnabledForEvent( 20 | { minPointers, maxPointers }: any, 21 | _recognizer: any, 22 | { maxPointers: pointerLength }: any 23 | ) { 24 | if (pointerLength > maxPointers) { 25 | return { failed: true }; 26 | } 27 | const validPointerCount = pointerLength >= minPointers; 28 | return { 29 | success: validPointerCount, 30 | }; 31 | } 32 | } 33 | export default IndiscreteGestureHandler; 34 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web_hammer/PinchGestureHandler.ts: -------------------------------------------------------------------------------- 1 | import Hammer from '@egjs/hammerjs'; 2 | import { HammerInputExt } from './GestureHandler'; 3 | 4 | import IndiscreteGestureHandler from './IndiscreteGestureHandler'; 5 | 6 | class PinchGestureHandler extends IndiscreteGestureHandler { 7 | get name() { 8 | return 'pinch'; 9 | } 10 | 11 | get NativeGestureClass() { 12 | return Hammer.Pinch; 13 | } 14 | 15 | transformNativeEvent({ scale, velocity, center }: HammerInputExt) { 16 | return { 17 | focalX: center.x, 18 | focalY: center.y, 19 | velocity, 20 | scale, 21 | }; 22 | } 23 | } 24 | 25 | export default PinchGestureHandler; 26 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web_hammer/RotationGestureHandler.ts: -------------------------------------------------------------------------------- 1 | import Hammer from '@egjs/hammerjs'; 2 | 3 | import { DEG_RAD } from './constants'; 4 | import { HammerInputExt } from './GestureHandler'; 5 | import IndiscreteGestureHandler from './IndiscreteGestureHandler'; 6 | 7 | class RotationGestureHandler extends IndiscreteGestureHandler { 8 | get name() { 9 | return 'rotate'; 10 | } 11 | 12 | get NativeGestureClass() { 13 | return Hammer.Rotate; 14 | } 15 | 16 | transformNativeEvent({ rotation, velocity, center }: HammerInputExt) { 17 | return { 18 | rotation: (rotation - (this.initialRotation ?? 0)) * DEG_RAD, 19 | anchorX: center.x, 20 | anchorY: center.y, 21 | velocity, 22 | }; 23 | } 24 | } 25 | export default RotationGestureHandler; 26 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/src/web_hammer/utils.ts: -------------------------------------------------------------------------------- 1 | // TODO(TS) remove if not necessary after rewrite 2 | export const isnan = (v: unknown) => Number.isNaN(v); 3 | 4 | // TODO(TS) remove if not necessary after rewrite 5 | export const isValidNumber = (v: unknown) => 6 | typeof v === 'number' && !Number.isNaN(v); 7 | 8 | export const TEST_MIN_IF_NOT_NAN = (value: number, limit: number): boolean => 9 | !isnan(limit) && 10 | ((limit < 0 && value <= limit) || (limit >= 0 && value >= limit)); 11 | export const VEC_LEN_SQ = ({ x = 0, y = 0 } = {}) => x * x + y * y; 12 | export const TEST_MAX_IF_NOT_NAN = (value: number, max: number) => 13 | !isnan(max) && ((max < 0 && value < max) || (max >= 0 && value > max)); 14 | 15 | export function fireAfterInterval( 16 | method: () => void, 17 | interval?: number | boolean 18 | ) { 19 | if (!interval) { 20 | method(); 21 | return null; 22 | } 23 | return setTimeout(() => method(), interval as number); 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["**/*.test.ts", "**/*.test.tsx"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/react-native-gesture-handler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "lib/typescript", 5 | "paths": { 6 | "react-native-gesture-handler": ["./src"] 7 | } 8 | }, 9 | "include": ["src/**/*.ts", "src/**/*.tsx", "jestSetup.js"] 10 | } 11 | -------------------------------------------------------------------------------- /scripts/check-android-dirs.js: -------------------------------------------------------------------------------- 1 | const { exit } = require('process'); 2 | const path = require('path'); 3 | 4 | const packageJsonPath = path.join( 5 | __dirname, 6 | '../packages/react-native-gesture-handler/package.json' 7 | ); 8 | 9 | const packageJson = require(packageJsonPath); 10 | const packageFiles = packageJson.files.filter((dir) => 11 | dir.startsWith('android') 12 | ); 13 | 14 | const subdirRegex = /android\/[a-zA-Z0-9]*/; 15 | const argc = process.argv.length; 16 | 17 | for (let i = 2; i < argc; ++i) { 18 | const filePath = process.argv[i]; 19 | 20 | const subdir = filePath.match(subdirRegex)[0]; 21 | 22 | if (!packageFiles.some((file) => file.startsWith(subdir))) { 23 | console.error( 24 | `Subdirectory ${subdir} is not included in package.json files` 25 | ); 26 | 27 | exit(1); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scripts/check-rn-versions.js: -------------------------------------------------------------------------------- 1 | const { exit } = require('process'); 2 | const path = require('path'); 3 | 4 | const basicExamplePackageJsonPath = path.join( 5 | __dirname, 6 | '../apps/basic-example/package.json' 7 | ); 8 | const basicExamplePackageJson = require(basicExamplePackageJsonPath); 9 | 10 | const rnghPackageJsonPath = path.join( 11 | __dirname, 12 | '../packages/react-native-gesture-handler/package.json' 13 | ); 14 | const rnghPackageJson = require(rnghPackageJsonPath); 15 | 16 | if ( 17 | rnghPackageJson.devDependencies['react-native'] !== 18 | basicExamplePackageJson.dependencies['react-native'] 19 | ) { 20 | console.error( 21 | 'There is a mismatch between the react-native version in the BasicExample and react-native-gesture-handler packages.\nIf you are bumping react-native version, make sure to also update react-native-gesture-handler package.json.' 22 | ); 23 | exit(1); 24 | } 25 | -------------------------------------------------------------------------------- /scripts/clangd-add-xcode-step.rb: -------------------------------------------------------------------------------- 1 | def add_clangd_generation_step() 2 | generator_script_path = '../../../scripts/clangd-generate-xcode-metadata.sh' 3 | 4 | script_phase :name => 'Generate metadata for clangd', :script => generator_script_path, :shell_path => '/bin/bash', :always_out_of_date => 'true', :execution_position => :after_compile 5 | end 6 | -------------------------------------------------------------------------------- /scripts/clangd-generate-xcode-metadata.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | COMPILE_COMMANDS_PATH="../../../compile_commands.json" 4 | 5 | echo "[" >$COMPILE_COMMANDS_PATH 6 | for f in **/CompilationDatabase/*.json; do cat "$f" >>$COMPILE_COMMANDS_PATH; done 7 | echo "]" >>$COMPILE_COMMANDS_PATH 8 | 9 | echo "Generated clangd metadata." 10 | -------------------------------------------------------------------------------- /scripts/codegen-check-consistency.js: -------------------------------------------------------------------------------- 1 | const { checkCodegenIntegrity } = require('./codegen-utils'); 2 | 3 | checkCodegenIntegrity(); 4 | -------------------------------------------------------------------------------- /scripts/codegen-sync-archs.js: -------------------------------------------------------------------------------- 1 | const { generateCodegenJavaOldArch } = require('./codegen-utils'); 2 | 3 | generateCodegenJavaOldArch(); 4 | -------------------------------------------------------------------------------- /scripts/format-android.js: -------------------------------------------------------------------------------- 1 | /* 2 | * This script is a wrapper for gradle & spotlessApply to make 3 | * it work properly with lint-staged. 4 | */ 5 | 6 | const { exit } = require('process'); 7 | const { exec } = require('child_process'); 8 | const path = require('path'); 9 | 10 | const androidPath = path.join( 11 | __dirname, 12 | '../packages/react-native-gesture-handler/android' 13 | ); 14 | 15 | const spotlessApply = `${androidPath}/gradlew -p ${androidPath} spotlessApply`; 16 | 17 | exec(spotlessApply, (error, stdout) => { 18 | if (error) { 19 | console.log(error); 20 | console.log(stdout); 21 | return exit(1); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /scripts/format-apple.js: -------------------------------------------------------------------------------- 1 | const { exit } = require('process'); 2 | const { exec } = require('child_process'); 3 | const path = require('path'); 4 | const glob = require('glob'); 5 | 6 | function runFormatter(files) { 7 | const command = `yarn clang-format -i ${files}`; 8 | 9 | exec(command, (error, stdout) => { 10 | if (error) { 11 | console.log(error); 12 | console.log(stdout); 13 | return exit(1); 14 | } 15 | }); 16 | } 17 | 18 | const argc = process.argv.length; 19 | 20 | if (argc > 2) { 21 | const files = process.argv.slice(2).join(' '); 22 | runFormatter(files); 23 | } else { 24 | const pattern = path.join( 25 | __dirname, 26 | '../packages/react-native-gesture-handler/apple/**/*.{h,m,mm,cpp}' 27 | ); 28 | 29 | glob(pattern, (err, filesArray) => { 30 | if (err) { 31 | console.error('Error finding files:', err); 32 | return exit(1); 33 | } 34 | 35 | const files = filesArray.join(' '); 36 | runFormatter(files); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "esModuleInterop": true, 5 | "jsx": "react-native", 6 | "lib": ["esnext", "dom"], 7 | "types": ["jest"], 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "resolveJsonModule": true, 11 | "skipLibCheck": true, 12 | "strict": true, 13 | "target": "esnext", 14 | "declaration": true, 15 | "declarationMap": false, 16 | "noStrictGenericChecks": false, 17 | "forceConsistentCasingInFileNames": true, 18 | "noImplicitUseStrict": false, 19 | "noUnusedParameters": true, 20 | "noUnusedLocals": true 21 | } 22 | } 23 | --------------------------------------------------------------------------------