diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 2a70d68208..28b81e5ee1 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -7,6 +7,8 @@ sidebar_label: Buttons import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; + @@ -37,7 +39,9 @@ exclusive?: boolean; Defines if more than one button could be pressed simultaneously. By default set to `true`. -### rippleColor (**Android only**) + +### rippleColor + ```ts rippleColor?: number | ColorValue | null; @@ -45,7 +49,10 @@ 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 (**Android only**) + +### rippleRadius + + ```ts rippleRadius?: number | null; @@ -53,7 +60,9 @@ rippleRadius?: number | null; Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. -### borderless (**Android only**) + +### borderless + ```ts borderless?: boolean; @@ -61,7 +70,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 (**Android only**) + +### foreground + ```ts foreground?: boolean; @@ -69,7 +80,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 (**Android only**) + +### touchSoundDisabled + ```ts touchSoundDisabled?: boolean; @@ -127,7 +140,9 @@ underlayColor?: string; Background color that will be dimmed when button is in active state. -### activeOpacity (**iOS only**) + +### activeOpacity + ```ts activeOpacity?: number; @@ -139,7 +154,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 (**iOS only**) + +### 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 b280113b24..50aa71af38 100644 --- a/packages/docs-gesture-handler/docs/components/pressable.mdx +++ b/packages/docs-gesture-handler/docs/components/pressable.mdx @@ -7,6 +7,8 @@ sidebar_label: Pressable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; + :::info This component is a drop-in replacement for the `Pressable` component. ::: @@ -87,7 +89,9 @@ cancelable?: null | boolean; Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`. -### onHoverIn (Web only) + +### onHoverIn + ```ts onHoverIn?: null | ((event: PressableEvent) => void); @@ -95,7 +99,9 @@ onHoverIn?: null | ((event: PressableEvent) => void); Called when pointer is hovering over the element. -### onHoverOut (Web only) + +### onHoverOut + ```ts onHoverOut?: null | ((event: PressableEvent) => void); @@ -103,7 +109,9 @@ onHoverOut?: null | ((event: PressableEvent) => void); Called when pointer stops hovering over the element. -### delayHoverIn (Web only) + +### delayHoverIn + ```ts delayHoverIn?: number | null; @@ -111,7 +119,9 @@ delayHoverIn?: number | null; Duration to wait after hover in before calling `onHoverIn`. -### delayHoverOut (Web only) + +### delayHoverOut + ```ts delayHoverOut?: number | null; @@ -135,7 +145,9 @@ disabled?: null | boolean; Whether the `Pressable` behavior is disabled. -### hitSlop (Android & iOS only) + +### hitSlop + ```ts hitSlop?: null | Insets | number; @@ -145,7 +157,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 (Android & iOS only) + +### pressRetentionOffset + ```ts pressRetentionOffset?: null | Insets | number; @@ -156,7 +170,9 @@ press before [`onPressOut`](#onpressout) is triggered. The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect). -### android_disableSound (Android only) + +### android_disableSound + ```ts android_disableSound?: null | boolean; @@ -164,7 +180,9 @@ android_disableSound?: null | boolean; If `true`, doesn't play system sound on touch. -### android_ripple (Android only) + +### 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 d9e8fefc45..0bba411540 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -6,6 +6,8 @@ sidebar_label: Reanimated Drawer Layout import useBaseUrl from '@docusaurus/useBaseUrl'; +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; + :::info This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html). ::: @@ -132,7 +134,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 (iOS only) + +### enableTrackpadTwoFingerGesture + ```ts enableTrackpadTwoFingerGesture?: boolean; @@ -149,7 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue) => ReactNode); Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter - [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node). -### mouseButton (Web & Android only) + +### mouseButton + +### enableContextMenu + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx index 71e44e83f5..1c06ee50ef 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx @@ -7,6 +7,8 @@ sidebar_label: Reanimated Swipeable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery' +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; + :::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). ::: @@ -240,7 +242,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[]; Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)). -### enableTrackpadTwoFingerGesture (iOS only) + +### enableTrackpadTwoFingerGesture + ```ts enableTrackpadTwoFingerGesture?: boolean; @@ -248,7 +252,9 @@ enableTrackpadTwoFingerGesture?: boolean; Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture. -### mouseButton (Web & Android only) + +### mouseButton + +### enableContextMenu + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx index cf88c68a7b..69b96ded94 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx @@ -6,7 +6,7 @@ sidebar_position: 4 --- import CollapsibleCode from '@site/src/components/CollapsibleCode'; - +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; ## Gesture Detector @@ -190,7 +190,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 (Web only) + +### userSelect + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -198,7 +200,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 (Web only) + +### touchAction + ```ts touchAction: TouchAction; @@ -206,7 +210,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 (Web only) + +### enableContextMenu + ```ts enableContextMenu: boolean; 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 65b43f0bfc..7e13710ee5 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,5 +1,7 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode'; +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; + ### enabled ```ts @@ -67,7 +69,9 @@ testID: string; Sets a `testID` property for gesture object, allowing for querying for it in tests. -### cancelsTouchesInView (**iOS only**) + +### cancelsTouchesInView + ```ts cancelsTouchesInView: boolean | SharedValue; diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx index bbf1ca4d85..30f57bb3fe 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -12,6 +12,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc'; +import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +