diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md index 6e5c8de76b..18996cbca9 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step1.md @@ -1,5 +1,15 @@ ```jsx import { StyleSheet } from 'react-native'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import Animated from 'react-native-reanimated'; + +export default function Ball() { + return ( + + + + ); +} const styles = StyleSheet.create({ ball: { diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md index 7292504d92..08f4e2f9db 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step2.md @@ -1,12 +1,25 @@ ```jsx -import { GestureDetector } from 'react-native-gesture-handler'; -import Animated from 'react-native-reanimated'; +import { + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; -function Ball() { - return ( - - - - ); +export default function Ball() { + const isPressed = useSharedValue(false); + const offset = useSharedValue({ x: 0, y: 0 }); + + const animatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { translateX: offset.value.x }, + { translateY: offset.value.y }, + { scale: withSpring(isPressed.value ? 1.2 : 1) }, + ], + backgroundColor: isPressed.value ? 'yellow' : 'blue', + }; + }); + + // ... } ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md index ac49f59bd9..f75641e27f 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step3.md @@ -1,25 +1,9 @@ -```jsx -import { - useSharedValue, - useAnimatedStyle, - withSpring, -} from 'react-native-reanimated'; - -function Ball() { - const isPressed = useSharedValue(false); - const offset = useSharedValue({ x: 0, y: 0 }); - - const animatedStyles = useAnimatedStyle(() => { - return { - transform: [ - { translateX: offset.value.x }, - { translateY: offset.value.y }, - { scale: withSpring(isPressed.value ? 1.2 : 1) }, - ], - backgroundColor: isPressed.value ? 'yellow' : 'blue', - }; - }); - - // ... -} +```jsx {4} +// ... +return ( + + + +); +// ... ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md index 7750e97e3b..a7260cb8bb 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step4.md @@ -1,9 +1,22 @@ -```jsx {4} -// ... -return ( - - - -); -// ... +```jsx +import { usePanGesture } from 'react-native-gesture-handler'; + +function Ball() { + // ... + const gesture = usePanGesture({ + onBegin: () => { + isPressed.value = true; + }, + onUpdate: (e) => { + offset.value = { + x: offset.value.x + e.changeX, + y: offset.value.y + e.changeY, + }; + }, + onFinalize: () => { + isPressed.value = false; + }, + }); + // ... +} ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md index a2ab8eb776..75107330d2 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/_steps/step5.md @@ -1,38 +1,11 @@ -```jsx -import { Gesture } from 'react-native-gesture-handler'; - -function Ball() { - // ... - const start = useSharedValue({ x: 0, y: 0 }); - const gesture = Gesture.Pan() - .onBegin(() => { - isPressed.value = true; - }) - .onUpdate((e) => { - offset.value = { - x: e.translationX + start.value.x, - y: e.translationY + start.value.y, - }; - }) - .onEnd(() => { - start.value = { - x: offset.value.x, - y: offset.value.y, - }; - }) - .onFinalize(() => { - isPressed.value = false; - }); - // ... -} -``` - -```jsx {3} +```jsx {4} // ... return ( - - - + + + + + ); // ... ``` diff --git a/packages/docs-gesture-handler/docs/guides/quickstart/index.md b/packages/docs-gesture-handler/docs/guides/quickstart/index.md index 1724181bda..cbfa9bbbd2 100644 --- a/packages/docs-gesture-handler/docs/guides/quickstart/index.md +++ b/packages/docs-gesture-handler/docs/guides/quickstart/index.md @@ -12,45 +12,102 @@ import Step3 from './\_steps/step3.md'; import Step4 from './\_steps/step4.md'; import Step5 from './\_steps/step5.md'; -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! +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! -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. +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). -
First let's define styles we will need to make the app:
+
Start by defining the basic structure of the application:
 -
Then we can start writing our Ball component:
+
+ Next, define the `SharedValues` to track the ball's position and create the animated styles required to position the ball on the screen: +
-
- We also need to define{' '} - - shared values - {' '} - to keep track of the ball position and create animated styles in order to be - able to position the ball on the screen: -
+
Apply the animated styles to the ball component:
 -
And add it to the ball's styles:
+
+ Now, define the Pan gesture logic. +
- The only thing left is to define the pan gesture and assign it to the - detector: + Finally, wrap the component responsible for rendering the ball with a GestureDetector, and attach the Pan gesture to it:
-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. +The complete implementation is shown below: + +```jsx +import { StyleSheet } from 'react-native'; +import { + GestureDetector, + GestureHandlerRootView, + usePanGesture, +} from 'react-native-gesture-handler'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; + +export default function Ball() { + const isPressed = useSharedValue(false); + const offset = useSharedValue({ x: 0, y: 0 }); + + const gesture = usePanGesture({ + onBegin: () => { + isPressed.value = true; + }, + onUpdate: (e) => { + offset.value = { + x: offset.value.x + e.changeX, + y: offset.value.y + e.changeY, + }; + }, + onFinalize: () => { + isPressed.value = false; + }, + }); + + const animatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { translateX: offset.value.x }, + { translateY: offset.value.y }, + { scale: withSpring(isPressed.value ? 1.2 : 1) }, + ], + backgroundColor: isPressed.value ? 'yellow' : 'blue', + }; + }); + + return ( + + + + + + ); +} -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.) +const styles = StyleSheet.create({ + ball: { + width: 100, + height: 100, + borderRadius: 100, + backgroundColor: 'blue', + alignSelf: 'center', + }, +}); +```