diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 041d387fbe..720556a0ad 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -138,7 +138,7 @@ This type of button component is ideal for use with rectangular elements or cont underlayColor?: string; ``` -Background color that will be dimmed when button is in active state. +Background color that will be dimmed when the button is in an active state. ### activeOpacity @@ -148,7 +148,7 @@ Background color that will be dimmed when button is in active state. activeOpacity?: number; ``` -Opacity applied to the underlay when button is in active state. +Opacity applied to the underlay when the button is in an active state. ## BorderlessButton @@ -188,27 +188,27 @@ const AccessibleButton = () => ( ## Design patterns -Components listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration their design concepts. +Components listed here were not designed to behave and look in the same way on both platforms, but rather to be used for handling similar behaviour on iOS and Android taking into consideration their design concepts. If you wish to get specific information about platforms design patterns, visit [official Apple docs](https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons) and [Material.io guideline](https://material.io/components/buttons#text-button), which widely describe how to implement coherent design. -This library allows to use native components with native feedback in adequate situations. +This library allows the use of native components with native feedback in adequate situations. -If you do not wish to implement custom design approach, [`RectButton`](#rectbutton) and [`BorderlessButton`](#borderlessbutton) seem to be absolutely enough and there's no need to use anything else. In all the remaining cases you can always rely on [`BaseButton`](#basebutton) which is a superclass for the other button classes and can be used as a generic `Touchable` replacement that can be customized to your needs. +If you do not wish to implement a custom design approach, [`RectButton`](#rectbutton) and [`BorderlessButton`](#borderlessbutton) seem to be absolutely enough and there's no need to use anything else. In all the remaining cases, you can always rely on [`BaseButton`](#basebutton) which is a superclass for the other button classes and can be used as a generic `Touchable` replacement that can be customized to your needs. Below we list some of the common usecases for button components to be used along with the type of button that should be used according to the platform specific design guidelines. ### Lists and action buttons -If you have a list with clickable items or have an action button that need to display as a separate UI block (vs being inlined in a text) you should use [`RectButton`](#rectbutton). It changes opacity on click and additionally supports a [ripple effect](#ripplecolor-android-only) on Android. +If you have a list with clickable items or have an action button that needs to display as a separate UI block (vs being inlined in a text) you should use [`RectButton`](#rectbutton). It changes opacity on click and additionally supports a [ripple effect](#ripplecolor-android-only) on Android. -To determine emphasis of button it's vital to use fill color or leave it transparent especially on Android. -For medium emphasis you may consider outlined buttons which are used for lower impact than fill buttons. +To determine the emphasis of a button, it's vital to use a fill color or leave it transparent, especially on Android. +For medium emphasis, you may consider outlined buttons which are used for lower impact than fill buttons. 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..93ba3b45a0 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -92,7 +92,7 @@ export enum DrawerKeyboardDismissMode { } `}/> -Determines if system keyboard should be closed upon dragging the drawer. +Determines if the system keyboard should be closed upon dragging the drawer. ### animationSpeed @@ -250,7 +250,7 @@ Either a component rendered in the content view or a function. If `children` is 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. +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 @@ -260,7 +260,7 @@ Specifies whether context menu should be enabled after clicking on underlying vi userSelect: 'none' | 'auto' | 'text'; ``` -This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. +This parameter allows specifying which `userSelect` property should be applied to the underlying view. Default value is set to `"none"`. ### activeCursor @@ -270,7 +270,7 @@ This parameter allows to specify which `userSelect` property should be applied t 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"`. +This parameter allows specifying which cursor should be used when the 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"`. ## Drawer ref methods @@ -295,7 +295,7 @@ export type DrawerMovementOption = { openDrawer: (options?: DrawerMovementOption) => void; ``` -Allows to manually open the drawer. +Allows manually opening the drawer. ### closeDrawer @@ -303,7 +303,7 @@ Allows to manually open the drawer. closeDrawer: (options?: DrawerMovementOption) => void; ``` -Allows to manually close the drawer. +Allows manually closing the drawer. ## Example diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx index 6fdc72ef21..9d8b323f93 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx @@ -258,7 +258,7 @@ Enables two-finger gestures on supported devices, for example iPads with trackpa enabled: boolean; ``` -Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not. Defaults to `true`. +Indicates whether `ReanimatedSwipeable` should be analyzing the stream of touch events or not. Defaults to `true`. ### testID @@ -295,7 +295,7 @@ type HitSlop = `}/> 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. +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. ## Swipeable ref methods diff --git a/packages/docs-gesture-handler/docs/components/touchables.md b/packages/docs-gesture-handler/docs/components/touchables.md index 23129eecf9..9271b6738f 100644 --- a/packages/docs-gesture-handler/docs/components/touchables.md +++ b/packages/docs-gesture-handler/docs/components/touchables.md @@ -8,7 +8,7 @@ sidebar_label: Touchables Touchables will be removed in the future version of Gesture Handler. Use [`Pressable`](/docs/components/pressable) instead. ::: -Gesture Handler library provides an implementation of RN's touchable components that are based on [native buttons](buttons.mdx) and does not rely on JS responder system utilized by RN. Our touchable implementation follows the same API and aims to be a drop-in replacement for touchables available in React Native. +Gesture Handler library provides an implementation of RN's touchable components that are based on [native buttons](buttons.mdx) and do not rely on the JS responder system utilized by RN. Our touchable implementation follows the same API and aims to be a drop-in replacement for touchables available in React Native. React Native's touchables API can be found here: @@ -17,15 +17,14 @@ React Native's touchables API can be found here: - [Touchable Opacity](https://reactnative.dev/docs/touchableopacity) - [Touchable Without Feedback](https://reactnative.dev/docs/touchablewithoutfeedback) -All major touchable properties (except from `pressRetentionOffset`) have been adopted and should behave in a similar way as with RN's touchables. +All major touchable properties (except for `pressRetentionOffset`) have been adopted and should behave in a similar way as with RN's touchables. -The motivation for using RNGH touchables as a replacement for these imported from React Native is to follow built-in native behavior more closely by utilizing platform native touch system instead of relying on the JS responder system. +The motivation for using RNGH touchables as a replacement for these imported from React Native is to follow built-in native behavior more closely by utilizing the platform native touch system instead of relying on the JS responder system. These touchables and their feedback behavior are deeply integrated with native gesture ecosystem and could be connected with other native components (e.g. `ScrollView`) and Gesture Handlers easily and in a more predictable way, which follows native apps' behavior. -Our intention was to make switch for these touchables as simple as possible. In order to use RNGH's touchables the only thing you need to do is to change library from which you import touchable components. -need only to change imports of touchables. +Our intention was to make the switch for these touchables as simple as possible. In order to use RNGH's touchables, the only thing you need to do is to change the library from which you import touchable components. :::info Gesture Handler's `TouchableOpacity` uses native driver for animations by default. If this causes problems for you, you can set `useNativeAnimations` prop to false. diff --git a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx index 4ac1d88dd1..4cad941787 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx @@ -43,7 +43,7 @@ Called when a handler begins to recognize gestures. If `onBegin` was called, it onActivate: (event: GestureEvent) => void ``` -Called when activation criteria for handler are met. If `onActivate` was called, it is guaranteed that `onDeactivate` will be called later. +Called when activation criteria for the handler are met. If `onActivate` was called, it is guaranteed that `onDeactivate` will be called later. ### onUpdate @@ -59,7 +59,7 @@ Called each time a pointer tracked by the gesture changes state, typically due t onDeactivate: (event: GestureEvent, didSucceed: boolean) => void ``` -Called after when handler stops recognizing gestures, but only if handler activated. It is called before `onFinalize`. If the handler was interrupted, the `didSucceed` argument is set to `false`. Otherwise it is set to `true`. +Called when handler stops recognizing gestures, but only if the handler activated. It is called before `onFinalize`. If the handler was interrupted, the `didSucceed` argument is set to `false`. Otherwise it is set to `true`. ### onFinalize @@ -67,7 +67,7 @@ Called after when handler stops recognizing gestures, but only if handler activa onFinalize: (event: GestureEvent, didSucceed: boolean) => void ``` -Called when handler stops recognizing gestures. If handler managed to activate, the `didSucceed` argument is set to `true` and `onFinalize` will be called right after `onDeactivate`. Otherwise it is set to `false`. +Called when handler stops recognizing gestures. If the handler managed to activate, the `didSucceed` argument is set to `true` and `onFinalize` will be called right after `onDeactivate`. Otherwise it is set to `false`. ### onTouchesDown @@ -190,7 +190,7 @@ export type TouchData = { `TouchData` contains information about a single touch. -- `id` - A number representing id of the touch. It may be used to track the touch between events as the id will not change while it is being tracked. +- `id` - A number representing the id of the touch. It may be used to track the touch between events as the id will not change while it is being tracked. - `x` - X coordinate of the current position of the touch relative to the view attached to the [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector). Expressed in point units. diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx index 156407c8af..d1ec00b077 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx @@ -27,7 +27,7 @@ RNGH3 simplifies gesture interaction through dedicated composition hooks and con Only one of the provided gestures can become active at the same time. The first gesture to become active will cancel the rest of the gestures. It accepts variable number of arguments. -For example, lets say that you have a component that you want to make draggable but you also want to show additional options on long press. Presumably you would not want the component to move after the long press activates. You can accomplish this using `useCompetingGestures`: +For example, let's say that you have a component that you want to make draggable but you also want to show additional options on long press. Presumably you would not want the component to move after the long press activates. You can accomplish this using `useCompetingGestures`: All of the provided gestures can activate at the same time. Activation of one will not cancel the other. -For example, if you want to make a gallery app, you might want user to be able to zoom, rotate and pan around photos. You can do it with `useSimultaneousGestures`: +For example, if you want to make a gallery app, you might want the user to be able to zoom, rotate and pan around photos. You can do it with `useSimultaneousGestures`: > Note: the `useSharedValue` and `useAnimatedStyle` are part of [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/). @@ -51,7 +51,7 @@ src={Simultaneous}/> ### useExclusiveGestures -Only one of the provided gestures can become active. Priority is determined by the order of the aguments, where the first gesture has the highest priority, and the last has the lowest. A gesture can activate only after all higher-priority gestures before it have failed. +Only one of the provided gestures can become active. Priority is determined by the order of the arguments, where the first gesture has the highest priority, and the last has the lowest. A gesture can activate only after all higher-priority gestures before it have failed. For example, if you want to make a component that responds to single tap as well as to a double tap, you can accomplish that using `useExclusiveGestures`: @@ -66,7 +66,7 @@ src={Exclusive}/> ### requireToFail -`requireToFail` allows to delay activation of the handler until all handlers passed as arguments to this method fail (or don't begin at all). +`requireToFail` allows delaying activation of the handler until all handlers passed as arguments to this method fail (or don't begin at all). For example, you may want to have two nested components, both of them can be tapped by the user to trigger different actions: outer view requires one tap, but the inner one requires 2 taps. If you don't want the first tap on the inner view to activate the outer handler, you must make the outer gesture wait until the inner one fails: @@ -78,7 +78,7 @@ src={RequireToFail}/> ### block -`block` works similarly to `requireToFail` but the direction of the relation is reversed - instead of being one-to-many relation, it's many-to-one. It's especially useful for making lists where the `ScrollView` component needs to wait for every gesture underneath it. All that's required to do is to pass a ref, for example: +`block` works similarly to `requireToFail` but the direction of the relation is reversed - instead of being a one-to-many relation, it's many-to-one. It's especially useful for making lists where the `ScrollView` component needs to wait for every gesture underneath it. All that's required to do is to pass a ref, for example: ### touchAction @@ -208,7 +208,7 @@ This parameter allows to specify which `userSelect` property should be applied t 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"`. +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 @@ -218,4 +218,4 @@ This parameter allows to specify which `touchAction` property should be applied enableContextMenu: boolean; ``` -Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`. +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`. diff --git a/packages/docs-gesture-handler/docs/fundamentals/installation.mdx b/packages/docs-gesture-handler/docs/fundamentals/installation.mdx index e57893ef5d..0c9881ac75 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/installation.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/installation.mdx @@ -91,7 +91,7 @@ export function CustomModal({ children, ...rest }) { } ``` -Gesture Handler on Android is implemented in Kotlin. If you need to set a specific Kotlin version to be used by the library, set the `kotlinVersion` ext property in `android/build.gradle` file and RNGH will use that version: +Gesture Handler on Android is implemented in Kotlin. If you need to set a specific Kotlin version to be used by the library, set the `kotlinVersion` ext property in the `android/build.gradle` file and RNGH will use that version: ```groovy buildscript { diff --git a/packages/docs-gesture-handler/docs/fundamentals/introduction.md b/packages/docs-gesture-handler/docs/fundamentals/introduction.md index 34f8707495..251b4fd7e2 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/introduction.md +++ b/packages/docs-gesture-handler/docs/fundamentals/introduction.md @@ -6,7 +6,7 @@ sidebar_position: 1 slug: / --- -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. +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. The main benefits of using React Native Gesture Handler are: @@ -18,7 +18,7 @@ The main benefits of using React Native Gesture Handler are: - Ability to include any native component into the Gesture Handler's touch system, making it work alongside your gestures. :::info -We recommended to use Reanimated to implement gesture-driven animations with Gesture Handler. Its more advanced features rely heavily on worklets and the UI runtime provided by Reanimated. +We recommend using Reanimated to implement gesture-driven animations with Gesture Handler. Its more advanced features rely heavily on worklets and the UI runtime provided by Reanimated. ::: ## Learning resources @@ -29,17 +29,17 @@ We recommended to use Reanimated to implement gesture-driven animations with Ges ### Talks and workshops -[Declarative future of gestures and animations in React Native](https://www.youtube.com/watch?v=kdq4z2708VM) by [Krzysztof Magiera](https://twitter.com/kzzzf) - talk that explains motivation behind creating gesture handler library. It also presents [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and how and when it can be used with gesture handler. +[Declarative future of gestures and animations in React Native](https://www.youtube.com/watch?v=kdq4z2708VM) by [Krzysztof Magiera](https://twitter.com/kzzzf) - talk that explains the motivation behind creating the gesture handler library. It also presents [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and how and when it can be used with gesture handler. -[React Native workshop with Expo team @ReactEurope 2018](https://youtu.be/JSIoE_ReeDk?t=41m49s) by [Brent Vatne](https://twitter.com/notbrent) – great workshop explaining gesture handler in details and presenting a few exercises that will help get you started. +[React Native workshop with Expo team @ReactEurope 2018](https://youtu.be/JSIoE_ReeDk?t=41m49s) by [Brent Vatne](https://twitter.com/notbrent) – great workshop explaining gesture handler in detail and presenting a few exercises that will help get you started. -[Living in an async world of React Native](https://www.youtube.com/watch?v=-Izgons3mec) by [Krzysztof Magiera](https://twitter.com/kzzzf) – talk which highlights some issue with the React Native's touch system Gesture Handler aims to address. Also the motivation for building this library is explained. +[Living in an async world of React Native](https://www.youtube.com/watch?v=-Izgons3mec) by [Krzysztof Magiera](https://twitter.com/kzzzf) – talk which highlights some issues with the React Native's touch system Gesture Handler aims to address. Also the motivation for building this library is explained. -[React Native Touch & Gesture](https://www.youtube.com/watch?v=V8maYc4R2G0) by [Krzysztof Magiera](https://twitter.com/kzzzf) - talk explaining JS responder system limitations and points out some of the core features of Gesture Handler. +[React Native Touch & Gesture](https://www.youtube.com/watch?v=V8maYc4R2G0) by [Krzysztof Magiera](https://twitter.com/kzzzf) - talk explaining JS responder system limitations and pointing out some of the core features of Gesture Handler. ## Contributing -If you are interested in the project and want to contribute or support it in other ways don't hesitate to contact anyone from the team on Twitter or Bluesky (links below)! +If you are interested in the project and want to contribute or support it in other ways, don't hesitate to contact anyone from the team on Twitter or Bluesky (links below)! All PRs are welcome, but talk to us before you start working on something big. @@ -48,12 +48,12 @@ The easiest way to get started with contributing code is by: - 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. - Updating the [documentation](https://github.com/software-mansion/react-native-gesture-handler/tree/main/packages/docs-gesture-handler) whenever you see some information is unclear, missing or out of date. -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. +Code is only one way 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. ## Community -We are very proud of the community that has been build around this package. We really appreciate all your help regardless of it is a pull request, issue report, helping others by commenting on existing issues or posting some demo or video tutorial on social media. -If you've build something with this library you'd like to share, please contact us as we'd love to help share it with others. +We are very proud of the community that has been built around this package. We really appreciate all your help regardless of whether it is a pull request, issue report, helping others by commenting on existing issues or posting some demo or video tutorial on social media. +If you've built something with this library you'd like to share, please contact us as we'd love to help share it with others. ### Gesture Handler Team πŸš€ diff --git a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx index ff74d76c94..e1c8745adf 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx @@ -11,7 +11,7 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode'; ## Automatic [workletization](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#to-workletize) of gesture callbacks -[Worklets' Babel plugin](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about) is setup in a way that automatically marks callbacks passed to gestures in the configuration chain as worklets. This means that you don't need to add a `'worklet';` directive at the beginning of the functions. Here is an example that will be automatically workletized: +[Worklets' Babel plugin](https://docs.swmansion.com/react-native-worklets/docs/worklets-babel-plugin/about) is set up in a way that automatically marks callbacks passed to gestures in the configuration chain as worklets. This means that you don't need to add a `'worklet';` directive at the beginning of the functions. Here is an example that will be automatically workletized: ```jsx const gesture = useTapGesture({ @@ -33,7 +33,7 @@ const gesture = useTapGesture({ }); ``` -It also won't work when wrapped with hooks like `useCallback` or `useMemo`, e.g: +It also won't work when wrapped with hooks like `useCallback` or `useMemo`, e.g.: ```jsx const callback = useCallback(() => { @@ -73,7 +73,7 @@ const gesture = useTapGesture({ ## Using SharedValue in gesture config -RNGH3 allows to pass [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) to gestures' configurations. This allows to react to configuration changes without unnecessary rerenders. +RNGH3 allows passing [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) to gestures' configurations. This allows reacting to configuration changes without unnecessary rerenders. void; ``` -Triggers [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) callback on gesture with specified `handlerTag`. +Triggers [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) callback on the gesture with the specified `handlerTag`. ### deactivate @@ -197,7 +197,7 @@ Triggers [`onActivate`](/docs/fundamentals/callbacks-events#onactivate) callback deactivate: (handlerTag: number) => void; ``` -If the gesture had activated, it triggers the [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) callback. It also triggers the [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) callback on gesture with the specified `handlerTag`. +If the gesture had activated, it triggers the [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) callback. It also triggers the [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) callback on the gesture with the specified `handlerTag`. ### fail @@ -205,4 +205,4 @@ If the gesture had activated, it triggers the [`onDeactivate`](/docs/fundamental fail: (handlerTag: number) => void; ``` -Triggers [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) callback on gesture with specified `handlerTag`. If gesture had activated, it will also trigger [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) callback. +Triggers [`onFinalize`](/docs/fundamentals/callbacks-events#onfinalize) callback on the gesture with the specified `handlerTag`. If the gesture had activated, it will also trigger [`onDeactivate`](/docs/fundamentals/callbacks-events#ondeactivate) callback. diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-config.md b/packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-config.md index c3143093a3..6f93a00b11 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-config.md +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-continuous-gesture-config.md @@ -4,4 +4,4 @@ manualActivation: boolean | SharedValue; ``` -When `true` the handler will not activate by itself even if its activation criteria are met. Instead you can manipulate its state using [`GestureStateManager`](/docs/fundamentals/state-manager). Example usage can be found [here](/docs/fundamentals/state-manager#manualactivation). +When `true`, the handler will not activate by itself even if its activation criteria are met. Instead, you can manipulate its state using [`GestureStateManager`](/docs/fundamentals/state-manager). Example usage can be found [here](/docs/fundamentals/state-manager#manualactivation). 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..bcb03e4259 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 @@ -8,9 +8,9 @@ import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; enabled: boolean | SharedValue; ``` -Indicates whether the given handler should be analyzing stream of touch events or not. -When set to `false` we can be sure that the handler will **never** activate. -If the value gets updated while the handler already started recognizing a gesture, then the handler will stop processing gestures immediately. +Indicates whether the given handler should be analyzing the stream of touch events or not. +When set to `false`, we can be sure that the handler will **never** activate. +If the value gets updated while the handler has already started recognizing a gesture, then the handler will stop processing gestures immediately. Default value is `true`. ### shouldCancelWhenOutside @@ -19,7 +19,7 @@ Default value is `true`. shouldCancelWhenOutside: boolean | SharedValue; ``` -When `true` the handler will stop recognition whenever the finger leaves the area of the connected view. +When `true`, the handler will stop recognition whenever the finger leaves the area of the connected view. Default value of this property is different depending on the handler type. Most handlers' `shouldCancelWhenOutside` property defaults to `false` except for the [`LongPressGesture`](/docs/gestures/use-long-press-gesture) and [`TapGesture`](/docs/gestures/use-tap-gesture) which default to `true`. @@ -50,14 +50,14 @@ type HitSlop = `}/> 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. +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. Instead you can pass an object to specify how each boundary side should be reduced by providing different number of points for `left`, `right`, `top` or `bottom` sides. You can alternatively provide `horizontal` or `vertical` instead of specifying directly `left`, `right` or `top` and `bottom`. Finally, the object can also take `width` and `height` attributes. -When `width` is set it is only allow to specify one of the sides `right` or `left`. +When `width` is set it is only allowed to specify one of the sides `right` or `left`. Similarly when `height` is provided only `top` or `bottom` can be set. -Specifying `width` or `height` is useful if we only want the gesture to activate on the edge of the view. In which case for example we can set `left: 0` and `width: 20` which would make it possible for the gesture to be recognize when started no more than 20 points from the left edge. +Specifying `width` or `height` is useful if we only want the gesture to activate on the edge of the view. In that case for example we can set `left: 0` and `width: 20` which would make it possible for the gesture to be recognized when started no more than 20 points from the left edge. **IMPORTANT:** Note that this parameter is primarily designed to reduce the area where gesture can activate. Hence it is only supported for all the values (except `width` and `height`) to be non positive (0 or lower). Although on Android it is supported for the values to also be positive and therefore allow to expand beyond view bounds but not further than the parent view bounds. To achieve this effect on both platforms you can use React Native's View [hitSlop](https://reactnative.dev/docs/view.html#hitslop) property. @@ -129,7 +129,7 @@ block: Gesture | Gesture[] Adds a relation that makes other gestures wait with activation until this gesture fails (or doesn't start at all). -**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition).[`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) will not recognize other gestures and it needs to be added to another detector in order to be recognized. +**IMPORTANT:** Note that this method only marks the relation between gestures, without [composing them](/docs/fundamentals/gesture-composition). [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector) will not recognize other gestures and it needs to be added to another detector in order to be recognized. ### useAnimated @@ -137,7 +137,7 @@ Adds a relation that makes other gestures wait with activation until this gestur 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`. +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 @@ -147,4 +147,4 @@ Setting this property is set to `true` ensures that the [Animated API](/docs/fun activeCursor: ActiveCursor | SharedValue; ``` -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"`. +This parameter allows specifying which cursor should be used when the 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"`. 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 a95b5edb1d..6e441dbebb 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -35,8 +35,8 @@ import BaseGestureCallbacks from './\_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './\_shared/shared-value-info.md'; The gesture that tracks quick, sufficiently long movement in specified [direction](#direction). -When gesture gets activated it will end when finger is released. -The gesture will fail if the finger is lifted before gesture could activate. +When the gesture gets activated it will end when the finger is released. +The gesture will fail if the finger is lifted before the gesture could activate.