feat: 🎸 add reanimated option

✅ Closes: #265

Author: MatthysDev

challenges/data/02.md

@@ -142,7 +142,11 @@ If you want to display some images on your `Card`, you can use this placeholder
 
 ### Advanced
 
-- [ ] Display a nice animated placeholder during loading with [rn-placeholder](https://github.com/mfrachet/rn-placeholder)
+- [ ] Display a nice animated placeholder during loading by choosing one of these approaches:
+  - Option 1: Use [rn-placeholder](https://github.com/mfrachet/rn-placeholder) for quick implementation
+    - ⚠️ If using npm, install with: `npm install rn-placeholder --legacy-peer-deps` (required due to outdated peer dependencies)
+  - Option 2: Use [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) to create your own animated placeholder, similar to our [`SkeletonListReanimated`](https://raw.githubusercontent.com/flexbox/react-native-bootcamp/main/hackathon/spacecraft/src/components/SkeletonListReanimated.tsx) component
+
 - [ ] Add a "Pull to Refresh" functionality to your FlatList with `onRefresh`
 
 ### Debugging

hackathon/spacecraft/src/components/SkeletonList.stories.tsx

@@ -5,7 +5,7 @@ export default {
 };
 
 export const _SkeletonList = () => {
-  return <SkeletonList />;
+  return <SkeletonList numberItems={10} />;
 };
 
 export const _SkeletonListSingle = () => {

hackathon/spacecraft/src/components/SkeletonList.tsx

@@ -1,10 +1,10 @@
-import { StyleSheet, View } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from "react-native-reanimated";
+import { View } from "react-native";
+import {
+  Fade,
+  Placeholder,
+  PlaceholderLine,
+  PlaceholderMedia,
+} from "rn-placeholder";
 
 interface SkeletonListProps {
   numberItems?: number;
@@ -13,67 +13,19 @@ interface SkeletonListProps {
 export const SkeletonList = ({ numberItems = 10 }: SkeletonListProps) => {
   const items = [];
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: withRepeat(
-        withSequence(
-          withTiming(0.3, { duration: 800 }),
-          withTiming(0.7, { duration: 800 }),
-        ),
-        -1,
-        true,
-      ),
-    };
-  });
-
   for (let i = 0; i < numberItems; i++) {
     items.push(
-      <View
+      <Placeholder
+        Animation={Fade}
         key={`skeleton-${i}`}
-        style={styles.itemContainer}
+        Left={PlaceholderMedia}
+        style={{ marginBottom: 12 }}
       >
-        <Animated.View style={[styles.media, animatedStyle]} />
-        <View style={styles.content}>
-          <Animated.View
-            style={[styles.line, styles.longLine, animatedStyle]}
-          />
-          <Animated.View
-            style={[styles.line, styles.shortLine, animatedStyle]}
-          />
-        </View>
-      </View>,
+        <PlaceholderLine width={90} />
+        <PlaceholderLine width={80} />
+      </Placeholder>,
     );
   }
 
   return <View>{items}</View>;
-};
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-  },
-  itemContainer: {
-    alignItems: "center",
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  line: {
-    backgroundColor: "#e1e1e1",
-    borderRadius: 4,
-    height: 12,
-    marginVertical: 4,
-  },
-  longLine: {
-    width: "90%",
-  },
-  media: {
-    backgroundColor: "#e1e1e1",
-    borderRadius: 20,
-    height: 40,
-    marginRight: 12,
-    width: 40,
-  },
-  shortLine: {
-    width: "80%",
-  },
-});
+};

hackathon/spacecraft/src/components/SkeletonListReanimated.stories.tsx

@@ -0,0 +1,13 @@
+import { SkeletonListReanimated } from "@/components/SkeletonListReanimated";
+
+export default {
+  title: "SkeletonListReanimated",
+};
+
+export const _SkeletonListReanimated = () => {
+  return <SkeletonListReanimated numberItems={10} />;
+};
+
+export const _SkeletonListReanimatedSingle = () => {
+  return <SkeletonListReanimated numberItems={1} />;
+};

hackathon/spacecraft/src/components/SkeletonListReanimated.tsx

@@ -0,0 +1,79 @@
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+interface SkeletonListProps {
+  numberItems?: number;
+}
+
+export const SkeletonListReanimated = ({ numberItems = 10 }: SkeletonListProps) => {
+  const items = [];
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withRepeat(
+        withSequence(
+          withTiming(0.3, { duration: 800 }),
+          withTiming(0.7, { duration: 800 }),
+        ),
+        -1,
+        true,
+      ),
+    };
+  });
+
+  for (let i = 0; i < numberItems; i++) {
+    items.push(
+      <View
+        key={`skeleton-${i}`}
+        style={styles.itemContainer}
+      >
+        <Animated.View style={[styles.media, animatedStyle]} />
+        <View style={styles.content}>
+          <Animated.View
+            style={[styles.line, styles.longLine, animatedStyle]}
+          />
+          <Animated.View
+            style={[styles.line, styles.shortLine, animatedStyle]}
+          />
+        </View>
+      </View>,
+    );
+  }
+
+  return <View>{items}</View>;
+};
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+  },
+  itemContainer: {
+    alignItems: "center",
+    flexDirection: "row",
+    marginBottom: 12,
+  },
+  line: {
+    backgroundColor: "#e1e1e1",
+    borderRadius: 4,
+    height: 12,
+    marginVertical: 4,
+  },
+  longLine: {
+    width: "90%",
+  },
+  media: {
+    backgroundColor: "#e1e1e1",
+    borderRadius: 20,
+    height: 40,
+    marginRight: 12,
+    width: 40,
+  },
+  shortLine: {
+    width: "80%",
+  },
+});

hackathon/spacecraft/src/screens/PilotScreen.tsx

@@ -2,7 +2,7 @@ import type { PeopleProps } from "api/types";
 
 import { PeopleItem } from "@/components/PeopleItem";
 import { ScreenContainer } from "@/components/ScreenContainer";
-import { SkeletonList } from "@/components/SkeletonList";
+import { SkeletonList } from "@/components/SkeletonListReanimated";
 import { usePilot } from "@/hooks/usePilot";
 import { FlatList } from "react-native";
 import { Button } from "react-native-paper";