Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update documentation page about the Native gesture #3272

Merged
merged 4 commits into from
Dec 12, 2024
Merged

Update documentation page about the Native gesture #3272

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c910a9c
Update page about the native gesture
j-piasecki Dec 9, 2024
b15bf83
Update more
j-piasecki Dec 10, 2024
676a584
Move danger lower
j-piasecki Dec 10, 2024
c981ec8
Fix "typo"
j-piasecki Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 55 additions & 1 deletion docs/docs/gestures/native-gesture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ A gesture that allows other touch handling components to participate in RNGH's g
## Reference

```jsx
import { ScrollView } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

function App() {
Expand All @@ -23,12 +24,18 @@ function App() {

return (
<GestureDetector gesture={native}>
<View />
<ScrollView>
{/* Scrollable content */}
</ScrollView>
</GestureDetector>
);
}
```

:::danger
Do not use `Native` gesture with components exported by React Native Gesture Handler. Those come with a native gesture handler preapplied. Attaching a native gesture twice will likely result in the components not working as intended.
:::

## Config

### Properties specific to `NativeGesture`:
Expand Down Expand Up @@ -56,3 +63,50 @@ When `true`, cancels all other gesture handlers when this `NativeViewGestureHand
True if gesture was performed inside of containing view, false otherwise.

<BaseEventData />

## 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.

```jsx
import { View, ScrollView } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

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

export default function App() {
const native = Gesture.Native();

return (
<GestureDetector gesture={native}>
<ScrollView style={{ flex: 1 }}>
<ScrollableContent scrollGesture={native} />
</ScrollView>
</GestureDetector>
);
}

function ScrollableContent({ scrollGesture }) {
return (
<View>
{COLORS.map((color) => (
<Rectangle key={color} color={color} scrollGesture={scrollGesture} />
))}
</View>
);
}

function Rectangle({ color, scrollGesture }) {
const pan = Gesture.Pan().blocksExternalGesture(scrollGesture);

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