Merge pull request #269 from flexbox/fix/bootcamp25

fix: 🐛 SkeletonList now with animated

Author: flexbox

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

challenges/foundation/02.md

@@ -124,7 +124,7 @@ It is always a good idea to **create small components to your project**. In our
 
 - [ ] Create a new component that takes a title props `<Header title="SpaceCraft"/>`
 
-**🔭 Hint:** Have a look a the section Patterns if you don't know how to create a React component.
+**🔭 Hint:** Have a look a the section [Snippets]("https://davidl.fr/workshop/snippets") if you don't know how to create a React component.
 
 ## 👽 Bonus
 

challenges/foundation/05.md

@@ -51,7 +51,7 @@ export { ScreenContainer, Offline, Card };
 
 #### `import`
 
-From the another component, to import the files
+To import a component from another file, you can use the following syntax:
 
 ```javascript
 // with `export default Card`

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

@@ -28,4 +28,4 @@ export const SkeletonList = ({ numberItems = 10 }: SkeletonListProps) => {
   }
 
   return <View>{items}</View>;
-};
+};

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";