Skip to content

use-native-gesture.mdx

Latest commit

 

History

History
136 lines (101 loc) · 3.87 KB

use-native-gesture.mdx

File metadata and controls

136 lines (101 loc) · 3.87 KB
id use-native-gesture
title Native gesture
sidebar_label Native gesture
sidebar_position 8

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 BaseContinuousGestureCallbacks from './_shared/base-continuous-gesture-callbacks.mdx'; import SharedValueInfo from './_shared/shared-value-info.md';

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

A gesture that allows other touch handling components to work within RNGH's gesture system. This streamlines interactions between gestures and the native component, allowing it to form relations with other gestures.

When used, the native component should be the direct child of a GestureDetector.

:::danger Do not use Native gesture with components exported by React Native Gesture Handler, as they already have it pre-applied. Attaching Native gesture twice will result in undefined behavior. :::

Example

This example renders a ScrollView with multiple colored rectangles, where each rectangle has a black section. Starting a touch on a black section will disable the ScrollView for the duration of the Pan gesture.

<CollapsibleCode label="Show full example" expandedLabel="Hide full example" lineBounds={[15, 54]} src={` import { View, ScrollView } from 'react-native'; import { GestureDetector, GestureHandlerRootView, useNativeGesture, usePanGesture, NativeGesture, } from 'react-native-gesture-handler';

const COLORS = ['red', 'green', 'blue', 'purple', 'orange', 'cyan'];

type RectangleProps = { color: string; scrollGesture: NativeGesture; };

function Rectangle({ color, scrollGesture }: RectangleProps) { const pan = usePanGesture({ block: scrollGesture, });

return ( <> <View key={color} style={{ width: '100%', height: 250, backgroundColor: color }} /> <View style={{ width: '100%', height: 50, backgroundColor: 'black' }} /> </> ); }

export default function App() { const nativeGesture = useNativeGesture({});

return ( <ScrollView style={{ flex: 1 }}> {COLORS.map((color) => ( ))} ); } `}/>

Remarks

  • Native gesture can be used as part of gesture composition and cross-component interactions just like any other gesture. You can use this to block a native component for the duration of the gesture or to make it work alongside a gesture.

  • Due to platform API limitations, the Native gesture has restricted functionality on web. For instance, it cannot be used to block scrolling on a ScrollView.

Config

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

shouldActivateOnStart

shouldActivateOnStart: boolean | SharedValue<boolean>;

When true, underlying handler will activate unconditionally when it receives any touches.

disallowInterruption

disallowInterruption: boolean | SharedValue<boolean>;

When true, cancels all other gesture handlers when activates.

Callbacks

<BaseGestureCallbacks gesture={"NativeView"}/>

Event data

pointerInside

pointerInside: boolean;

true if gesture was performed inside of containing view, false otherwise.