Skip to content

Commit c48d653

Browse files
m-bertm-bert
authored
[docs] Update quick start (#3895)
## Description This PR updates quick start guide in our docs. ## Test plan Read docs (and follow the implementation 🤭) 🤓
1 parent e1185cd commit c48d653

7 files changed

Lines changed: 142 additions & 91 deletions

File tree

‎packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
```jsx
22
import { StyleSheet } from 'react-native';
3+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
4+
import Animated from 'react-native-reanimated';
5+
6+
export default function Ball() {
7+
return (
8+
<GestureHandlerRootView>
9+
<Animated.View style={styles.ball} />
10+
</GestureHandlerRootView>
11+
);
12+
}
313

414
const styles = StyleSheet.create({
515
ball: {

‎packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
```jsx
2-
import { GestureDetector } from 'react-native-gesture-handler';
3-
import Animated from 'react-native-reanimated';
2+
import {
3+
useAnimatedStyle,
4+
useSharedValue,
5+
withSpring,
6+
} from 'react-native-reanimated';
47

5-
function Ball() {
6-
return (
7-
<GestureDetector>
8-
<Animated.View style={[styles.ball]} />
9-
</GestureDetector>
10-
);
8+
export default function Ball() {
9+
const isPressed = useSharedValue(false);
10+
const offset = useSharedValue({ x: 0, y: 0 });
11+
12+
const animatedStyles = useAnimatedStyle(() => {
13+
return {
14+
transform: [
15+
{ translateX: offset.value.x },
16+
{ translateY: offset.value.y },
17+
{ scale: withSpring(isPressed.value ? 1.2 : 1) },
18+
],
19+
backgroundColor: isPressed.value ? 'yellow' : 'blue',
20+
};
21+
});
22+
23+
// ...
1124
}
1225
```

‎packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,9 @@
1-
```jsx
2-
import {
3-
useSharedValue,
4-
useAnimatedStyle,
5-
withSpring,
6-
} from 'react-native-reanimated';
7-
8-
function Ball() {
9-
const isPressed = useSharedValue(false);
10-
const offset = useSharedValue({ x: 0, y: 0 });
11-
12-
const animatedStyles = useAnimatedStyle(() => {
13-
return {
14-
transform: [
15-
{ translateX: offset.value.x },
16-
{ translateY: offset.value.y },
17-
{ scale: withSpring(isPressed.value ? 1.2 : 1) },
18-
],
19-
backgroundColor: isPressed.value ? 'yellow' : 'blue',
20-
};
21-
});
22-
23-
// ...
24-
}
1+
```jsx {4}
2+
// ...
3+
return (
4+
<GestureHandlerRootView>
5+
<Animated.View style={[styles.ball, animatedStyles]} />
6+
</GestureHandlerRootView>
7+
);
8+
// ...
259
```

‎packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
```jsx {4}
2-
// ...
3-
return (
4-
<GestureDetector>
5-
<Animated.View style={[styles.ball, animatedStyles]} />
6-
</GestureDetector>
7-
);
8-
// ...
1+
```jsx
2+
import { usePanGesture } from 'react-native-gesture-handler';
3+
4+
function Ball() {
5+
// ...
6+
const gesture = usePanGesture({
7+
onBegin: () => {
8+
isPressed.value = true;
9+
},
10+
onUpdate: (e) => {
11+
offset.value = {
12+
x: offset.value.x + e.changeX,
13+
y: offset.value.y + e.changeY,
14+
};
15+
},
16+
onFinalize: () => {
17+
isPressed.value = false;
18+
},
19+
});
20+
// ...
21+
}
922
```

‎packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,11 @@
1-
```jsx
2-
import { Gesture } from 'react-native-gesture-handler';
3-
4-
function Ball() {
5-
// ...
6-
const start = useSharedValue({ x: 0, y: 0 });
7-
const gesture = Gesture.Pan()
8-
.onBegin(() => {
9-
isPressed.value = true;
10-
})
11-
.onUpdate((e) => {
12-
offset.value = {
13-
x: e.translationX + start.value.x,
14-
y: e.translationY + start.value.y,
15-
};
16-
})
17-
.onEnd(() => {
18-
start.value = {
19-
x: offset.value.x,
20-
y: offset.value.y,
21-
};
22-
})
23-
.onFinalize(() => {
24-
isPressed.value = false;
25-
});
26-
// ...
27-
}
28-
```
29-
30-
```jsx {3}
1+
```jsx {4}
312
// ...
323
return (
33-
<GestureDetector gesture={gesture}>
34-
<Animated.View style={[styles.ball, animatedStyles]} />
35-
</GestureDetector>
4+
<GestureHandlerRootView>
5+
<GestureDetector gesture={gesture}>
6+
<Animated.View style={[styles.ball, animatedStyles]} />
7+
</GestureDetector>
8+
</GestureHandlerRootView>
369
);
3710
// ...
3811
```

‎packages/docs-gesture-handler/docs/guides/quickstart/index.md‎

Lines changed: 74 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,102 @@ import Step3 from './\_steps/step3.md';
1212
import Step4 from './\_steps/step4.md';
1313
import Step5 from './\_steps/step5.md';
1414

15-
RNGH2 provides much simpler way to add gestures to your app. All you need to do is wrap the view that you want your gesture to work on with [`GestureDetector`](/docs/fundamentals/gesture-detectors#gesture-detector), define the gesture and pass it to detector. That's all!
15+
RNGH3 offers a straightforward way to add gestures to your app. Simply wrap your target view with the [GestureDetector](/docs/fundamentals/gesture-detectors#gesture-detector) component, define your gesture, and pass it in. That’s it!
1616

17-
To demonstrate how you would use the new API, let's make a simple app where you can drag a ball around. You will need to add `react-native-gesture-handler` (for gestures) and `react-native-reanimated` (for animations) modules.
17+
To see the new API in action, let's build a simple app where you can drag a ball around the screen. To follow along, you'll need both `react-native-gesture-handler` (to handle gestures) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) (to handle the animations).
1818

1919
<Step title="Step 1">
20-
<div>First let's define styles we will need to make the app:</div>
20+
<div>Start by defining the basic structure of the application:</div>
2121
<Step1 />
2222
</Step>
2323

2424
<Step title="Step 2">
25-
<div>Then we can start writing our <code>Ball</code> component:</div>
25+
<div>
26+
Next, define the <a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value">`SharedValues`</a> to track the ball's position and create the animated styles required to position the ball on the screen:
27+
</div>
2628
<Step2 />
2729
</Step>
2830

2931
<Step title="Step 3">
30-
<div>
31-
We also need to define{' '}
32-
<a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value">
33-
shared values
34-
</a>{' '}
35-
to keep track of the ball position and create animated styles in order to be
36-
able to position the ball on the screen:
37-
</div>
32+
<div>Apply the animated styles to the ball component:</div>
3833
<Step3 />
3934
</Step>
4035

4136
<Step title="Step 4">
42-
<div>And add it to the ball's styles:</div>
37+
<div>
38+
Now, define the <code>Pan</code> gesture logic.
39+
</div>
4340
<Step4 />
4441
</Step>
4542

4643
<Step title="Step 5">
4744
<div>
48-
The only thing left is to define the pan gesture and assign it to the
49-
detector:
45+
Finally, wrap the component responsible for rendering the ball with a <code>GestureDetector</code>, and attach the <code>Pan</code> gesture to it:
5046
</div>
5147
<Step5 />
5248
</Step>
5349

54-
Note the `start` shared value. We need it to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture.
50+
The complete implementation is shown below:
51+
52+
```jsx
53+
import { StyleSheet } from 'react-native';
54+
import {
55+
GestureDetector,
56+
GestureHandlerRootView,
57+
usePanGesture,
58+
} from 'react-native-gesture-handler';
59+
import Animated, {
60+
useAnimatedStyle,
61+
useSharedValue,
62+
withSpring,
63+
} from 'react-native-reanimated';
64+
65+
export default function Ball() {
66+
const isPressed = useSharedValue(false);
67+
const offset = useSharedValue({ x: 0, y: 0 });
68+
69+
const gesture = usePanGesture({
70+
onBegin: () => {
71+
isPressed.value = true;
72+
},
73+
onUpdate: (e) => {
74+
offset.value = {
75+
x: offset.value.x + e.changeX,
76+
y: offset.value.y + e.changeY,
77+
};
78+
},
79+
onFinalize: () => {
80+
isPressed.value = false;
81+
},
82+
});
83+
84+
const animatedStyles = useAnimatedStyle(() => {
85+
return {
86+
transform: [
87+
{ translateX: offset.value.x },
88+
{ translateY: offset.value.y },
89+
{ scale: withSpring(isPressed.value ? 1.2 : 1) },
90+
],
91+
backgroundColor: isPressed.value ? 'yellow' : 'blue',
92+
};
93+
});
94+
95+
return (
96+
<GestureHandlerRootView>
97+
<GestureDetector gesture={gesture}>
98+
<Animated.View style={[styles.ball, animatedStyles]} />
99+
</GestureDetector>
100+
</GestureHandlerRootView>
101+
);
102+
}
55103

56-
Now you can just add `Ball` component to some view in the app and see the results! (Or you can just check the code [here](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/velocityTest/index.tsx) and see it in action in the Example app.)
104+
const styles = StyleSheet.create({
105+
ball: {
106+
width: 100,
107+
height: 100,
108+
borderRadius: 100,
109+
backgroundColor: 'blue',
110+
alignSelf: 'center',
111+
},
112+
});
113+
```

‎packages/docs-gesture-handler/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,18 @@
2525
"@docusaurus/core": "3.7.0",
2626
"@docusaurus/plugin-debug": "3.7.0",
2727
"@docusaurus/preset-classic": "3.7.0",
28+
"@docusaurus/theme-common": "3.7.0",
2829
"@emotion/react": "^11.14.0",
2930
"@emotion/styled": "^11.14.0",
3031
"@mdx-js/react": "^3.0.0",
3132
"@mui/material": "^7.1.0",
3233
"@swmansion/t-rex-ui": "1.0.0",
3334
"@vercel/og": "^0.6.2",
34-
"prism-react-renderer": "^2.1.0",
3535
"babel-polyfill": "^6.26.0",
3636
"babel-preset-expo": "^9.2.2",
3737
"babel-preset-react-native": "^4.0.1",
3838
"clsx": "^2.1.0",
39+
"prism-react-renderer": "^2.1.0",
3940
"raf": "^3.4.1",
4041
"raw-loader": "^4.0.2",
4142
"react": "^18.2.0",

0 commit comments

Comments
 (0)