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 89d8c8cff0..378d47b1a6 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -8,6 +8,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; +import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx'; + :::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). ::: @@ -29,16 +31,101 @@ drawerType?: DrawerType; Specifies the way the drawer will be displayed. Accepts values of the `DrawerType` enum. Defaults to `FRONT`. -| `drawerType` | Description | -| -- | -- | -|`FRONT` | The drawer will be displayed above the content view. | -|`BACK` | The drawer will be displayed below the content view, revealed by sliding away the content view. | -|`SLIDE` | The drawer will appear attached to the content view, opening it slides both the drawer and the content view. | +- `FRONT` The drawer will be displayed above the content view. +- `BACK` The drawer will be displayed below the content view, revealed by sliding away the content view. +- `SLIDE` The drawer will appear attached to the content view, opening it slides both the drawer and the content view. | `FRONT` | `BACK` | `SLIDE` | | ----------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- | | | | | +### drawerBackgroundColor + +```ts +drawerBackgroundColor?: string; +``` + +Color of the drawer's background. + +### drawerWidth + +```ts +drawerWidth?: number; +``` + +Width of the drawer. Defaults to `200`. + +### drawerLockMode + + + +Specifies the lock mode of the drawer. + + - `UNLOCKED` The drawer is unlocked and can be opened or closed by gestures. + - `LOCKED_CLOSED` The drawer will move freely until it settles in a closed position, then the gestures will be disabled. + - `LOCKED_OPEN` The drawer will move freely until it settles in an opened position, then the gestures will be disabled. + +### keyboardDismissMode + + + +Determines if system keyboard should be closed upon dragging the drawer. + +### animationSpeed + +```ts +animationSpeed?: number; +``` + +Speed of animation that will play when letting go, or dismissing the drawer. + +### minSwipeDistance + +```ts +minSwipeDistance?: number; +``` + +Minimal distance to swipe before the drawer starts moving. + +### contentContainerStyle + +```ts +contentContainerStyle?: StyleProp; +``` + +Style of the content view container. + +### drawerContainerStyle + +```ts +drawerContainerStyle?: StyleProp; +``` + +Style wrapping the drawer. + ### edgeWidth ```ts @@ -153,28 +240,7 @@ 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 - - -; - -enum MouseButton { - LEFT, - RIGHT, - MIDDLE, - BUTTON_4, - BUTTON_5, - ALL, -} -`}/> - -Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`. + ### enableContextMenu @@ -186,8 +252,27 @@ 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'; +``` + +This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. + + +### activeCursor + + +```ts +activeCursor: ActiveCursor; +``` + +This parameter allows to specify which cursor should be used when gesture activates. Supports all [CSS cursor values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor#keyword) (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`. -## Methods +## Drawer ref methods Using a reference to `ReanimatedDrawerLayout` allows you to manually trigger the opening and closing of the component. diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx index c864df16b2..6fdc72ef21 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx @@ -252,41 +252,53 @@ 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 - +### enabled -; - -enum MouseButton { - LEFT, - RIGHT, - MIDDLE, - BUTTON_4, - BUTTON_5, - ALL, -} -`}/> +```ts +enabled: boolean; +``` -Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`. +Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not. Defaults to `true`. - -### enableContextMenu - +### testID ```ts -enableContextMenu: boolean; +testID: string; ``` -Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`. +Sets a `testID` property, allowing for querying `ReanimatedSwipeable` for it in tests. + +### hitSlop + +; + +type HitSlop = + | number + | null + | undefined + | Partial< + Record< + 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal', + number + > + > + | Record<'width' | 'left', number> + | Record<'width' | 'right', number> + | Record<'height' | 'top', number> + | Record<'height' | 'bottom', number>; +`}/> +This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. +When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly. +See [hitSlop section](/docs/gestures/use-pan-gesture#hitslop) in `Pan` gesture for more details. -## Methods +## Swipeable ref methods Using a reference to `Swipeable` allows you to manually trigger the opening and closing of the component, as well as reset its swiping state. 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 5b8fcd62f0..ae94d348e0 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 @@ -139,7 +139,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/mouse-button.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx new file mode 100644 index 0000000000..54d3455c86 --- /dev/null +++ b/packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx @@ -0,0 +1,26 @@ +import CollapsibleCode from '@site/src/components/CollapsibleCode'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; + + +### mouseButton + + +; + +enum MouseButton { + LEFT, + RIGHT, + MIDDLE, + BUTTON_4, + BUTTON_5, + ALL, +} +`}/> + +Allows users to choose which mouse buttons to respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`. 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 056fe93efd..a95b5edb1d 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -14,6 +14,8 @@ import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestur import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; +import MouseButtonProp from './\_shared/mouse-button.mdx'; +