diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 041d387fbe..c515d5a70f 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -7,8 +7,6 @@ sidebar_label: Buttons import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - @@ -39,9 +37,9 @@ exclusive?: boolean; Defines if more than one button could be pressed simultaneously. By default set to `true`. - + ### rippleColor - + ```ts rippleColor?: number | ColorValue | null; @@ -49,9 +47,9 @@ rippleColor?: number | ColorValue | null; Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. - + ### rippleRadius - + ```ts @@ -60,9 +58,9 @@ rippleRadius?: number | null; Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. - + ### borderless - + ```ts borderless?: boolean; @@ -70,9 +68,9 @@ borderless?: boolean; If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds. - + ### foreground - + ```ts foreground?: boolean; @@ -80,9 +78,9 @@ foreground?: boolean; Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view. - + ### touchSoundDisabled - + ```ts touchSoundDisabled?: boolean; @@ -140,9 +138,9 @@ underlayColor?: string; Background color that will be dimmed when button is in active state. - + ### activeOpacity - + ```ts activeOpacity?: number; @@ -154,9 +152,9 @@ Opacity applied to the underlay when button is in active state. This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following: - + ### activeOpacity - + ```ts activeOpacity?: number; diff --git a/packages/docs-gesture-handler/docs/components/pressable.mdx b/packages/docs-gesture-handler/docs/components/pressable.mdx index 5c89da1876..d42a229732 100644 --- a/packages/docs-gesture-handler/docs/components/pressable.mdx +++ b/packages/docs-gesture-handler/docs/components/pressable.mdx @@ -7,8 +7,6 @@ sidebar_label: Pressable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - :::info This component is a drop-in replacement for the `Pressable` component. ::: @@ -89,9 +87,9 @@ cancelable?: null | boolean; Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`. - + ### onHoverIn - + ```ts onHoverIn?: null | ((event: PressableEvent) => void); @@ -99,9 +97,9 @@ onHoverIn?: null | ((event: PressableEvent) => void); Called when pointer is hovering over the element. - + ### onHoverOut - + ```ts onHoverOut?: null | ((event: PressableEvent) => void); @@ -109,9 +107,9 @@ onHoverOut?: null | ((event: PressableEvent) => void); Called when pointer stops hovering over the element. - + ### delayHoverIn - + ```ts delayHoverIn?: number | null; @@ -119,9 +117,9 @@ delayHoverIn?: number | null; Duration to wait after hover in before calling `onHoverIn`. - + ### delayHoverOut - + ```ts delayHoverOut?: number | null; @@ -145,9 +143,9 @@ disabled?: null | boolean; Whether the `Pressable` behavior is disabled. - + ### hitSlop - + ```ts hitSlop?: null | Insets | number; @@ -157,9 +155,9 @@ Additional distance outside of the view in which a press is detected and [`onPre The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect). - + ### pressRetentionOffset - + ```ts pressRetentionOffset?: null | Insets | number; @@ -170,9 +168,9 @@ press before [`onPressOut`](#onpressout) is triggered. The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect). - + ### android_disableSound - + ```ts android_disableSound?: null | boolean; @@ -180,9 +178,9 @@ android_disableSound?: null | boolean; If `true`, doesn't play system sound on touch. - + ### android_ripple - + ```ts android_ripple?: null | PressableAndroidRippleConfig; diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx index 378d47b1a6..ba1d318b5e 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -6,8 +6,6 @@ sidebar_label: Reanimated Drawer Layout import useBaseUrl from '@docusaurus/useBaseUrl'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx'; :::info @@ -221,9 +219,9 @@ export enum DrawerState { A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise. - + ### enableTrackpadTwoFingerGesture - + ```ts enableTrackpadTwoFingerGesture?: boolean; @@ -242,9 +240,9 @@ Either a component rendered in the content view or a function. If `children` is - + ### enableContextMenu - + ```ts enableContextMenu: boolean; @@ -252,9 +250,9 @@ enableContextMenu: boolean; Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified. - + ### userSelect - + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -262,9 +260,9 @@ userSelect: 'none' | 'auto' | 'text'; This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. - + ### activeCursor - + ```ts activeCursor: ActiveCursor; diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx index 6fdc72ef21..84e17f6096 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx @@ -7,8 +7,6 @@ sidebar_label: Reanimated Swipeable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery' -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - :::info This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). ::: @@ -242,9 +240,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[]; Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)). - + ### enableTrackpadTwoFingerGesture - + ```ts enableTrackpadTwoFingerGesture?: boolean; diff --git a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx index 0f6cc5d060..c59724bd04 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx @@ -5,8 +5,6 @@ sidebar_label: Integration with Animated sidebar_position: 9 --- -import CollapsibleCode from '@site/src/components/CollapsibleCode'; - Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) callback. The event mapping of `Animated.event` depends on the [`useNativeDriver`](https://reactnative.dev/docs/animated#using-the-native-driver) property. When using Animated API, remember to set `useAnimated` property to `true`. diff --git a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx index 4ac1d88dd1..61bcfc2840 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx @@ -6,7 +6,6 @@ sidebar_position: 6 --- import { GestureEventFlowChart, TouchEventFlowChart } from '@site/src/examples/CallbacksFlowCharts' -import CollapsibleCode from '@site/src/components/CollapsibleCode'; At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks). diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx index 156407c8af..8ab1a97ba0 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx @@ -5,8 +5,6 @@ sidebar_label: Gesture composition & interactions sidebar_position: 5 --- -import CollapsibleCode from '@site/src/components/CollapsibleCode'; - import Competing from '!!raw-loader!.//\_examples/hooks/Competing'; import Simultaneous from '!!raw-loader!.//\_examples/hooks/Simultaneous'; import Exclusive from '!!raw-loader!.//\_examples/hooks/Exclusive'; diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx index 448855177d..9bc17c9099 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx @@ -5,9 +5,6 @@ sidebar_label: Gesture detectors sidebar_position: 4 --- -import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - ## Gesture Detector The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook-based API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section. @@ -190,9 +187,9 @@ gesture: SingleGesture | ComposedGesture; A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition). - + ### userSelect - + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -200,9 +197,9 @@ userSelect: 'none' | 'auto' | 'text'; This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. - + ### touchAction - + ```ts touchAction: TouchAction; @@ -210,9 +207,9 @@ touchAction: TouchAction; This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`. - + ### enableContextMenu - + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/fundamentals/introduction.md b/packages/docs-gesture-handler/docs/fundamentals/introduction.md index 34f8707495..d1f91598ec 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/introduction.md +++ b/packages/docs-gesture-handler/docs/fundamentals/introduction.md @@ -3,7 +3,7 @@ id: introduction title: Introduction sidebar_label: Introduction sidebar_position: 1 -slug: / +slug: /fundamentals/introduction --- Gesture Handler provides a declarative API exposing the native platform's touch and gesture system to React Native. It's designed to be a replacement of React Native's built in touch system called [Gesture Responder System](http://reactnative.dev/docs/gesture-responder-system). Using native touch handling allows to address the performance limitations of React Native's Gesture Responder System. It also provides more control over the platform's native components that can handle gestures on their own. If you want to learn more, we recommend [this talk](https://www.youtube.com/watch?v=V8maYc4R2G0) by [Krzysztof Magiera](https://twitter.com/kzzzf) in which he explains issues with the responder system. diff --git a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx index ff74d76c94..16c4352bc1 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx @@ -5,8 +5,6 @@ sidebar_label: Integration with Reanimated sidebar_position: 8 --- -import CollapsibleCode from '@site/src/components/CollapsibleCode'; - [`GestureDetector`](/docs/fundamentals/gesture-detectors) will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread. ## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks diff --git a/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx b/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx index ab685ff241..005b88bb18 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx @@ -5,8 +5,6 @@ sidebar_label: State manager sidebar_position: 7 --- -import CollapsibleCode from '@site/src/components/CollapsibleCode'; - RNGH3 allows to manually control [gestures lifecycle](/docs/under-the-hood/state) by using [`GestureStateManager`](#gesturestatemanager). ## State management diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx index ae94d348e0..95ebdbca85 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx @@ -1,6 +1,4 @@ -import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; ### enabled @@ -69,9 +67,9 @@ testID: string; Sets a `testID` property for gesture object, allowing for querying for it in tests. - + ### cancelsTouchesInView - + ```ts cancelsTouchesInView: boolean | SharedValue; @@ -139,9 +137,9 @@ useAnimated: boolean; Setting this property is set to `true` ensures that the [Animated API](/docs/fundamentals/animated-interactions) functions correctly when `useNativeDriver` is set to `false`. The default value is set to `false`. - + ### activeCursor - + ```ts activeCursor: ActiveCursor | SharedValue; diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx index 8ed3c77583..91d19c97ee 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-event-data.mdx @@ -1,5 +1,3 @@ -import CollapsibleCode from '@site/src/components/CollapsibleCode'; - ### numberOfPointers ```ts diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx index 54d3455c86..26bac57f4a 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx +++ b/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx @@ -1,9 +1,8 @@ -import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - + + ### mouseButton - +