[docs] Update quick start

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 (
+    <GestureHandlerRootView>
+      <Animated.View style={styles.ball} />
+    </GestureHandlerRootView>
+  );
+}
 
 const styles = StyleSheet.create({
   ball: {

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 (
-    <GestureDetector>
-      <Animated.View style={[styles.ball]} />
-    </GestureDetector>
-  );
+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',
+    };
+  });
+
+  // ...
 }
 ```

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 (
+  <GestureHandlerRootView>
+    <Animated.View style={[styles.ball, animatedStyles]} />
+  </GestureHandlerRootView>
+);
+// ...
 ```

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

@@ -1,9 +1,22 @@
-```jsx {4}
-// ...
-return (
-  <GestureDetector>
-    <Animated.View style={[styles.ball, animatedStyles]} />
-  </GestureDetector>
-);
-// ...
+```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;
+    },
+  });
+  // ...
+}
 ```

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 (
-  <GestureDetector gesture={gesture}>
-    <Animated.View style={[styles.ball, animatedStyles]} />
-  </GestureDetector>
+  <GestureHandlerRootView>
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.ball, animatedStyles]} />
+    </GestureDetector>
+  </GestureHandlerRootView>
 );
 // ...
 ```

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).
 
 <Step title="Step 1">
-  <div>First let's define styles we will need to make the app:</div>
+  <div>Start by defining the basic structure of the application:</div>
   <Step1 />
 </Step>
 
 <Step title="Step 2">
-  <div>Then we can start writing our <code>Ball</code> component:</div>
+  <div>
+    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:
+  </div>
   <Step2 />
 </Step>
 
 <Step title="Step 3">
-  <div>
-    We also need to define{' '}
-    <a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value">
-      shared values
-    </a>{' '}
-    to keep track of the ball position and create animated styles in order to be
-    able to position the ball on the screen:
-  </div>
+  <div>Apply the animated styles to the ball component:</div>
   <Step3 />
 </Step>
 
 <Step title="Step 4">
-  <div>And add it to the ball's styles:</div>
+  <div>
+    Now, define the <code>Pan</code> gesture logic.
+  </div>
   <Step4 />
 </Step>
 
 <Step title="Step 5">
   <div>
-    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 <code>GestureDetector</code>, and attach the <code>Pan</code> gesture to it:
   </div>
   <Step5 />
 </Step>
 
-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 (
+    <GestureHandlerRootView>
+      <GestureDetector gesture={gesture}>
+        <Animated.View style={[styles.ball, animatedStyles]} />
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
 
-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',
+  },
+});
+```