Skip to content

Commit 04a56ca

Browse files
j-piaseckij-piasecki
authored
Replace references with examples in docs (#3276)
## Description - Replaces references with examples (those were kinda useless tbh) - Add link to composition from composed gesture - Moves hover remarks higher so they aren't below a ton of common properties
1 parent 36a99f3 commit 04a56ca

8 files changed

+205
-301
lines changed

‎docs/docs/gestures/composed-gestures.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar_label: Composed gestures
55
sidebar_position: 13
66
---
77

8-
Composed gestures (`Race`, `Simultaneous`, `Exclusive`) provide a simple way of building relations between gestures.
8+
Composed gestures (`Race`, `Simultaneous`, `Exclusive`) provide a simple way of building relations between gestures. See [Gesture Composition](/docs/fundamentals/gesture-composition) for more details.
99

1010
## Reference
1111

‎docs/docs/gestures/fling-gesture.md

+35-52
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,50 @@ The gesture will fail to recognize if the finger is lifted before being activate
4242

4343
<samp id="FlingGestureBasicSrc">Fling Gesture</samp>
4444

45-
## Reference
45+
## Example
4646

4747
```jsx
48-
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
48+
import { StyleSheet } from 'react-native';
49+
import {
50+
Gesture,
51+
GestureDetector,
52+
Directions,
53+
} from 'react-native-gesture-handler';
54+
import Animated, {
55+
useSharedValue,
56+
useAnimatedStyle,
57+
withTiming,
58+
} from 'react-native-reanimated';
4959

50-
function App() {
60+
export default function App() {
61+
const position = useSharedValue(0);
5162
// highlight-next-line
52-
const fling = Gesture.Fling();
63+
const flingGesture = Gesture.Fling()
64+
.direction(Directions.RIGHT)
65+
.onStart((e) => {
66+
position.value = withTiming(position.value + 10, { duration: 100 });
67+
});
68+
69+
const animatedStyle = useAnimatedStyle(() => ({
70+
transform: [{ translateX: position.value }],
71+
}));
5372

5473
return (
55-
<GestureDetector gesture={fling}>
56-
<Animated.View />
74+
<GestureDetector gesture={flingGesture}>
75+
<Animated.View style={[styles.box, animatedStyle]} />
5776
</GestureDetector>
5877
);
5978
}
79+
80+
const styles = StyleSheet.create({
81+
box: {
82+
height: 120,
83+
width: 120,
84+
backgroundColor: '#b58df1',
85+
borderRadius: 20,
86+
marginBottom: 30,
87+
},
88+
});
6089
```
6190

6291
## Config
@@ -122,49 +151,3 @@ X coordinate of the current position of the pointer (finger or a leading pointer
122151
Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. The value is expressed in point units. It is recommended to use it instead of [`y`](#y) in cases when the original view can be transformed as an effect of the gesture.
123152

124153
<BaseEventData />
125-
126-
## Example
127-
128-
```jsx
129-
import { StyleSheet } from 'react-native';
130-
import {
131-
Gesture,
132-
GestureDetector,
133-
Directions,
134-
} from 'react-native-gesture-handler';
135-
import Animated, {
136-
useSharedValue,
137-
useAnimatedStyle,
138-
withTiming,
139-
} from 'react-native-reanimated';
140-
141-
export default function App() {
142-
const position = useSharedValue(0);
143-
144-
const flingGesture = Gesture.Fling()
145-
.direction(Directions.RIGHT)
146-
.onStart((e) => {
147-
position.value = withTiming(position.value + 10, { duration: 100 });
148-
});
149-
150-
const animatedStyle = useAnimatedStyle(() => ({
151-
transform: [{ translateX: position.value }],
152-
}));
153-
154-
return (
155-
<GestureDetector gesture={flingGesture}>
156-
<Animated.View style={[styles.box, animatedStyle]} />
157-
</GestureDetector>
158-
);
159-
}
160-
161-
const styles = StyleSheet.create({
162-
box: {
163-
height: 120,
164-
width: 120,
165-
backgroundColor: '#b58df1',
166-
borderRadius: 20,
167-
marginBottom: 30,
168-
},
169-
});
170-
```

‎docs/docs/gestures/hover-gesture.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ function App() {
5959
}
6060
```
6161

62+
63+
## Remarks
64+
65+
- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture).
66+
6267
## Config
6368

6469
### Properties specific to `HoverGesture`:
@@ -115,7 +120,3 @@ Object that contains additional information about `stylus`. It consists of the f
115120
- [`pressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure) - indicates the normalized pressure of the stylus.
116121

117122
<BaseEventData />
118-
119-
## Remarks
120-
121-
- Don't rely on `Hover` gesture to continue after the mouse button is clicked or the stylus touches the screen. If you want to handle both cases, [compose](/docs/fundamentals/gesture-composition) it with [`Pan` gesture](/docs/gestures/pan-gesture).

‎docs/docs/gestures/long-press-gesture.md

+21-37
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,36 @@ The gesture will fail to recognize a touch event if the finger is lifted before
4141

4242
<samp id="LongPressGestureBasic">Long Press Gesture</samp>
4343

44-
## Reference
44+
## Example
4545

4646
```jsx
47-
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
47+
import { View, StyleSheet } from 'react-native';
48+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
4849

49-
function App() {
50+
export default function App() {
5051
// highlight-next-line
51-
const longPress = Gesture.LongPress();
52+
const longPressGesture = Gesture.LongPress().onEnd((e, success) => {
53+
if (success) {
54+
console.log(`Long pressed for ${e.duration} ms!`);
55+
}
56+
});
5257

5358
return (
54-
<GestureDetector gesture={longPress}>
55-
<View />
59+
<GestureDetector gesture={longPressGesture}>
60+
<View style={styles.box} />
5661
</GestureDetector>
5762
);
5863
}
64+
65+
const styles = StyleSheet.create({
66+
box: {
67+
height: 120,
68+
width: 120,
69+
backgroundColor: '#b58df1',
70+
borderRadius: 20,
71+
marginBottom: 30,
72+
},
73+
});
5974
```
6075

6176
## Config
@@ -114,34 +129,3 @@ Y coordinate, expressed in points, of the current position of the pointer (finge
114129
Duration of the long press (time since the start of the gesture), expressed in milliseconds.
115130

116131
<BaseEventData />
117-
118-
## Example
119-
120-
```jsx
121-
import { View, StyleSheet } from 'react-native';
122-
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
123-
124-
export default function App() {
125-
const longPressGesture = Gesture.LongPress().onEnd((e, success) => {
126-
if (success) {
127-
console.log(`Long pressed for ${e.duration} ms!`);
128-
}
129-
});
130-
131-
return (
132-
<GestureDetector gesture={longPressGesture}>
133-
<View style={styles.box} />
134-
</GestureDetector>
135-
);
136-
}
137-
138-
const styles = StyleSheet.create({
139-
box: {
140-
height: 120,
141-
width: 120,
142-
backgroundColor: '#b58df1',
143-
borderRadius: 20,
144-
marginBottom: 30,
145-
},
146-
});
147-
```

‎docs/docs/gestures/pan-gesture.md

+48-65
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,63 @@ Gesture callback can be used for continuous tracking of the pan gesture. It prov
4747

4848
<samp id="PanGestureBasicSrc">Pan Gesture</samp>
4949

50-
## Reference
50+
## Example
5151

5252
```jsx
53-
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
53+
import { StyleSheet } from 'react-native';
54+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
55+
import Animated, {
56+
useSharedValue,
57+
withTiming,
58+
useAnimatedStyle,
59+
} from 'react-native-reanimated';
60+
61+
const END_POSITION = 200;
62+
63+
export default function App() {
64+
const onLeft = useSharedValue(true);
65+
const position = useSharedValue(0);
5466

55-
function App() {
5667
// highlight-next-line
57-
const pan = Gesture.Pan();
68+
const panGesture = Gesture.Pan()
69+
.onUpdate((e) => {
70+
if (onLeft.value) {
71+
position.value = e.translationX;
72+
} else {
73+
position.value = END_POSITION + e.translationX;
74+
}
75+
})
76+
.onEnd((e) => {
77+
if (position.value > END_POSITION / 2) {
78+
position.value = withTiming(END_POSITION, { duration: 100 });
79+
onLeft.value = false;
80+
} else {
81+
position.value = withTiming(0, { duration: 100 });
82+
onLeft.value = true;
83+
}
84+
});
85+
86+
const animatedStyle = useAnimatedStyle(() => ({
87+
transform: [{ translateX: position.value }],
88+
}));
5889

5990
return (
60-
<GestureDetector gesture={pan}>
61-
<Animated.View />
91+
// highlight-next-line
92+
<GestureDetector gesture={panGesture}>
93+
<Animated.View style={[styles.box, animatedStyle]} />
6294
</GestureDetector>
6395
);
6496
}
97+
98+
const styles = StyleSheet.create({
99+
box: {
100+
height: 120,
101+
width: 120,
102+
backgroundColor: '#b58df1',
103+
borderRadius: 20,
104+
marginBottom: 30,
105+
},
106+
});
65107
```
66108

67109
## Multi touch pan handling
@@ -200,62 +242,3 @@ Object that contains additional information about `stylus`. It consists of the f
200242
- [`pressure`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure) - indicates the normalized pressure of the stylus.
201243

202244
<BaseEventData />
203-
204-
## Example
205-
206-
```jsx
207-
import { StyleSheet } from 'react-native';
208-
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
209-
import Animated, {
210-
useSharedValue,
211-
withTiming,
212-
useAnimatedStyle,
213-
} from 'react-native-reanimated';
214-
215-
const END_POSITION = 200;
216-
217-
export default function App() {
218-
const onLeft = useSharedValue(true);
219-
const position = useSharedValue(0);
220-
221-
// highlight-next-line
222-
const panGesture = Gesture.Pan()
223-
.onUpdate((e) => {
224-
if (onLeft.value) {
225-
position.value = e.translationX;
226-
} else {
227-
position.value = END_POSITION + e.translationX;
228-
}
229-
})
230-
.onEnd((e) => {
231-
if (position.value > END_POSITION / 2) {
232-
position.value = withTiming(END_POSITION, { duration: 100 });
233-
onLeft.value = false;
234-
} else {
235-
position.value = withTiming(0, { duration: 100 });
236-
onLeft.value = true;
237-
}
238-
});
239-
240-
const animatedStyle = useAnimatedStyle(() => ({
241-
transform: [{ translateX: position.value }],
242-
}));
243-
244-
return (
245-
// highlight-next-line
246-
<GestureDetector gesture={panGesture}>
247-
<Animated.View style={[styles.box, animatedStyle]} />
248-
</GestureDetector>
249-
);
250-
}
251-
252-
const styles = StyleSheet.create({
253-
box: {
254-
height: 120,
255-
width: 120,
256-
backgroundColor: '#b58df1',
257-
borderRadius: 20,
258-
marginBottom: 30,
259-
},
260-
});
261-
```

0 commit comments

Comments
 (0)