Create Square component

Author: chunkyguy

reactnative/App.js

@@ -1,54 +1,6 @@
 import { StyleSheet } from "react-native";
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from "react-native-gesture-handler";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from "react-native-reanimated";
-
-function Square() {
-  const isPressed = useSharedValue(false);
-  const startPos = useSharedValue({ x: 0, y: 0 });
-  const pos = useSharedValue({ x: 0, y: 0 });
-  const animStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor: isPressed.value ? "red" : "blue",
-      transform: [
-        { translateX: pos.value.x },
-        { translateY: pos.value.y },
-        { scale: withSpring(isPressed.value ? 1.2 : 1) },
-      ],
-    };
-  });
-
-  const gesture = Gesture.Pan()
-    .onBegin(() => {
-      isPressed.value = true;
-    })
-    .onChange((e) => {
-      pos.value = {
-        x: startPos.value.x + e.translationX,
-        y: startPos.value.y + e.translationY,
-      };
-    })
-    .onFinalize(() => {
-      isPressed.value = false;
-      startPos.value = {
-        x: pos.value.x,
-        y: pos.value.y,
-      };
-    });
-
-  return (
-    <GestureDetector gesture={gesture}>
-      <Animated.View style={[styles.square, animStyle]} />
-    </GestureDetector>
-  );
-}
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Square from "./components/Square";
 
 export default function App() {
   return (
@@ -67,9 +19,4 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-evenly",
   },
-  square: {
-    width: 100,
-    height: 100,
-    backgroundColor: "blue",
-  },
 });

reactnative/components/Square.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+
+export default function Square() {
+  const isPressed = useSharedValue(false);
+  const startPos = useSharedValue({ x: 0, y: 0 });
+  const pos = useSharedValue({ x: 0, y: 0 });
+  const animStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: isPressed.value ? "red" : "blue",
+      transform: [
+        { translateX: pos.value.x },
+        { translateY: pos.value.y },
+        { scale: withSpring(isPressed.value ? 1.2 : 1) },
+      ],
+    };
+  });
+
+  const gesture = Gesture.Pan()
+    .onBegin(() => {
+      isPressed.value = true;
+    })
+    .onChange((e) => {
+      pos.value = {
+        x: startPos.value.x + e.translationX,
+        y: startPos.value.y + e.translationY,
+      };
+    })
+    .onFinalize(() => {
+      isPressed.value = false;
+      startPos.value = {
+        x: pos.value.x,
+        y: pos.value.y,
+      };
+    });
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.container, animStyle]} />
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 100,
+    height: 100,
+    backgroundColor: "blue",
+  },
+});