step 5

lucacaputo · Dec 5, 2024 · 8b8d134 · 8b8d134
1 parent 5f70ca2
commit 8b8d134
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/components/ListItem.tsx b/components/ListItem.tsx
@@ -4,6 +4,7 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
+  withSpring,
 } from "react-native-reanimated";
 import { Image } from "expo-image";
 import { IMG_HEIGHT, STACK_OFFSET } from "@/constants";
@@ -35,6 +36,22 @@ const ListItem = ({
     }
   );
 
+  useAnimatedReaction(
+    () => selectedIndex.value,
+    (current) => {
+      switch (true) {
+        case current === index:
+          yOffset.value = withSpring(0, { damping: 28 });
+          break;
+        case current === null:
+          yOffset.value = withSpring(previousOffset.value, { damping: 28 });
+          break;
+        default:
+          yOffset.value = withSpring(500 + index * 30, { damping: 28 });
+      }
+    }
+  );
+
   const rItemStyle = useAnimatedStyle<ViewStyle>(() => ({
     transform: [{ translateY: yOffset.value }],
   }));