diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 55e5cb9485..0d2f1d9cd4 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'; - :::danger Button components described in this section are deprecated and will be removed in the future. Please use [`Touchable`](/docs/components/touchable) instead. ::: @@ -43,9 +41,9 @@ exclusive?: boolean; Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to `true`. - + ### rippleColor - + ```ts rippleColor?: number | ColorValue | null; @@ -53,9 +51,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 @@ -64,9 +62,9 @@ rippleRadius?: number | null; Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. - + ### borderless - + ```ts borderless?: boolean; @@ -74,9 +72,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; @@ -84,9 +82,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; @@ -144,9 +142,9 @@ underlayColor?: string; Background color that will be dimmed when the button is in an active state. - + ### activeOpacity - + ```ts activeOpacity?: number; @@ -158,9 +156,9 @@ Opacity applied to the underlay when the button is in an 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 93ba3b45a0..8641c6970e 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 the context menu should be enabled after clicking on the underlying view with the right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified. - + ### userSelect - + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -262,9 +260,9 @@ userSelect: 'none' | 'auto' | 'text'; This parameter allows specifying which `userSelect` property should be applied to the underlying view. Default value is set to `"none"`. - + ### activeCursor - + ```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 9d8b323f93..d3c90cbbf5 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/components/touchable.mdx b/packages/docs-gesture-handler/docs/components/touchable.mdx index cd6b7502b8..e6795d6e83 100644 --- a/packages/docs-gesture-handler/docs/components/touchable.mdx +++ b/packages/docs-gesture-handler/docs/components/touchable.mdx @@ -4,8 +4,6 @@ title: Touchable sidebar_label: Touchable --- -import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; - :::note This section refers to new `Touchable` component, meant to replace both buttons and touchables. If you are looking for documentation for the deprecated touchable components, check out the [Legacy Touchables](/docs/components/legacy-touchables) section. ::: @@ -206,9 +204,9 @@ exclusive?: boolean; Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to `true`. - + ### touchSoundDisabled - + ```ts touchSoundDisabled?: boolean; @@ -304,9 +302,9 @@ delayLongPress?: number; Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress) callback gets called. By default set to `600`. - + ### androidRipple - + + ### userSelect - + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -200,9 +197,9 @@ userSelect: 'none' | 'auto' | 'text'; This parameter allows specifying which `userSelect` property should be applied to the underlying view. Default value is set to `"none"`. - + ### touchAction - + ```ts touchAction: TouchAction; @@ -210,9 +207,9 @@ touchAction: TouchAction; This parameter allows specifying which `touchAction` property should be applied to the 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 251b4fd7e2..6966f70695 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 addressing 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 e1c8745adf..27d81d7700 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 1f25954961..84ba2059e3 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 manually controlling the [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 bcb03e4259..915ea31dde 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 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 - +