Skip to content

use-tap-gesture.mdx

Latest commit

 

History

History
222 lines (162 loc) · 6.86 KB

use-tap-gesture.mdx

File metadata and controls

222 lines (162 loc) · 6.86 KB
id use-tap-gesture
title Tap gesture
sidebar_label Tap gesture
sidebar_position 2

import { vanishOnMobile, appearOnMobile, webContainer } from '@site/src/utils/getGestureStyles';

import useBaseUrl from '@docusaurus/useBaseUrl';

import TapGestureBasic from '@site/static/examples/TapGestureBasic'; import TapGestureBasicSrc from '!!raw-loader!@site/static/examples/TapGestureBasic';

import HeaderWithBadge from '@site/src/components/HeaderWithBadge';

} src={TapGestureBasicSrc} disableMarginBottom={true} />

import BaseEventData from './_shared/base-gesture-event-data.mdx'; import BaseGestureConfig from './_shared/base-gesture-config.mdx'; import BaseGestureCallbacks from './_shared/base-gesture-callbacks.mdx'; import SharedValueInfo from './_shared/shared-value-info.md';

import CollapsibleCode from '@site/src/components/CollapsibleCode';

A discrete gesture that recognizes taps.

Tap gestures detect one or more fingers briefly touching the screen. The pointers involved in these gestures must not move significantly from their initial touch positions. This can be changed via configuration. The required number of taps and allowed distance from initial position may be configured. For example, you might configure tap gesture recognizers to detect single taps, double taps, or triple taps.

In order for a gesture to activate, specified gesture requirements such as minPointers, numberOfTaps, maxDistance, maxDuration, and maxDelay must be met.

Example

<CollapsibleCode label="Show full example" expandedLabel="Hide full example" lineBounds={[7, 21]} src={` import { View, StyleSheet } from 'react-native'; import { GestureDetector, GestureHandlerRootView, useTapGesture, } from 'react-native-gesture-handler';

export default function App() { const singleTap = useTapGesture({ onActivate: () => { console.log('Single tap!'); }, });

return ( ); }

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'space-around', }, box: { height: 120, width: 120, backgroundColor: '#b58df1', borderRadius: 20, marginBottom: 30, }, }); `}/>

Config

minPointers

minPointers: number | SharedValue<number>;

Minimum number of pointers (fingers) required to be placed before the gesture activates. Should be a positive integer. The default value is 1.

maxDuration

maxDuration: number | SharedValue<number>;

Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch. The default value is 500.

maxDelay

maxDelay: number | SharedValue<number>;

Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required. The default value is 500.

numberOfTaps

numberOfTaps: number | SharedValue<number>;

Number of tap gestures required to activate the gesture. The default value is 1.

maxDeltaX

maxDeltaX: number | SharedValue<number>;

Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. If the finger travels further than the defined distance along the X axis and the gesture hasn't yet activated, it will fail to recognize the gesture.

maxDeltaY

maxDeltaY: number | SharedValue<number>;

Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. If the finger travels further than the defined distance along the Y axis and the gesture hasn't yet activated, it will fail to recognize the gesture.

maxDistance

maxDistance: number | SharedValue<number>;

Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture.

<HeaderWithBadge platforms={['android', 'web']}>

mouseButton

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} collapsed={false} src={` mouseButton: MouseButton | SharedValue;

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.

Callbacks

<BaseGestureCallbacks gesture={"Tap"}/>

Event data

x

x: number;

X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the GestureDetector.

y

y: number;

Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the GestureDetector.

absoluteX

absoluteX: number;

X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteX instead of x in cases when the view attached to the GestureDetector can be transformed as an effect of the gesture.

absoluteY

absoluteY: number;

Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteY instead of y in cases when the view attached to the GestureDetector can be transformed as an effect of the gesture.