Merge 2 steps

Author: m-bert

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

@@ -1,12 +1,23 @@
 ```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 />
+      <Animated.View style={styles.ball} />
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  ball: {
+    width: 100,
+    height: 100,
+    borderRadius: 100,
+    backgroundColor: 'blue',
+    alignSelf: 'center',
+  },
+});
 ```

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

@@ -1,23 +1,25 @@
 ```jsx
-import { StyleSheet } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
 
 export default function Ball() {
-  return (
-    <GestureHandlerRootView>
-      <Animated.View style={styles.ball} />
-    </GestureHandlerRootView>
-  );
-}
+  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',
+    };
+  });
 
-const styles = StyleSheet.create({
-  ball: {
-    width: 100,
-    height: 100,
-    borderRadius: 100,
-    backgroundColor: 'blue',
-    alignSelf: 'center',
-  },
-});
+  // ...
+}
 ```

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

@@ -1,25 +1,9 @@
-```jsx
-import {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-
-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',
-    };
-  });
-
-  // ...
-}
+```jsx {4}
+// ...
+return (
+  <GestureHandlerRootView>
+    <Animated.View style={[styles.ball, animatedStyles]} />
+  </GestureHandlerRootView>
+);
+// ...
 ```

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

@@ -1,9 +1,30 @@
-```jsx {4}
-// ...
-return (
-  <GestureHandlerRootView>
-    <Animated.View style={[styles.ball, animatedStyles]} />
-  </GestureHandlerRootView>
-);
-// ...
+```jsx
+import { usePanGesture } from 'react-native-gesture-handler';
+
+function Ball() {
+  // ...
+  const start = useSharedValue({ x: 0, y: 0 });
+
+  const gesture = usePanGesture({
+    onBegin: () => {
+      isPressed.value = true;
+    },
+    onUpdate: (e) => {
+      offset.value = {
+        x: e.translationX + start.value.x,
+        y: e.translationY + start.value.y,
+      };
+    },
+    onDeactivate: () => {
+      start.value = {
+        x: offset.value.x,
+        y: offset.value.y,
+      };
+    },
+    onFinalize: () => {
+      isPressed.value = false;
+    },
+  });
+  // ...
+}
 ```

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

@@ -1,30 +1,11 @@
-```jsx
-import { usePanGesture } from 'react-native-gesture-handler';
-
-function Ball() {
-  // ...
-  const start = useSharedValue({ x: 0, y: 0 });
-
-  const gesture = usePanGesture({
-    onBegin: () => {
-      isPressed.value = true;
-    },
-    onUpdate: (e) => {
-      offset.value = {
-        x: e.translationX + start.value.x,
-        y: e.translationY + start.value.y,
-      };
-    },
-    onDeactivate: () => {
-      start.value = {
-        x: offset.value.x,
-        y: offset.value.y,
-      };
-    },
-    onFinalize: () => {
-      isPressed.value = false;
-    },
-  });
-  // ...
-}
+```jsx {4}
+// ...
+return (
+  <GestureHandlerRootView>
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.ball, animatedStyles]} />
+    </GestureDetector>
+  </GestureHandlerRootView>
+);
+// ...
 ```

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

@@ -11,7 +11,6 @@ import Step2 from './\_steps/step2.md';
 import Step3 from './\_steps/step3.md';
 import Step4 from './\_steps/step4.md';
 import Step5 from './\_steps/step5.md';
-import Step6 from './\_steps/step6.md';
 
 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!
 
@@ -23,34 +22,29 @@ To see the new API in action, let's build a simple app where you can drag a ball
 </Step>
 
 <Step title="Step 2">
-  <div>Next, let's add the necessary styles:</div>
-  <Step2 />
-</Step>
-
-<Step title="Step 3">
   <div>
 Next, define the <a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value">shared values</a> to track the ball's position and create the animated styles required to position the ball on the screen:
   </div>
-  <Step3 />
+  <Step2 />
 </Step>
 
-<Step title="Step 4">
+<Step title="Step 3">
   <div>Apply the animated styles to the ball component:</div>
-  <Step4 />
+  <Step3 />
 </Step>
 
-<Step title="Step 5">
+<Step title="Step 4">
   <div>
     Now, define the <code>Pan</code> gesture logic:
   </div>
-  <Step5 />
+  <Step4 />
 </Step>
 
-<Step title="Step 6">
+<Step title="Step 5">
   <div>
 Finally, assign the <code>Pan</code> gesture to the <code>GestureDetector</code>:
   </div>
-  <Step6 />
+  <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.