fix(confetti): wip reworking the confetti animations post skia update

mateoguzmana · Jun 1, 2024 · 39af7f6 · 39af7f6
1 parent 721e3d8
commit 39af7f6
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 71 deletions.
diff --git a/expo-example/src/components/Header.tsx b/expo-example/src/components/Header.tsx
@@ -10,10 +10,8 @@ interface HeaderProps {
 function Header({ onPressThemeChange, theme }: HeaderProps) {
   return (
     <View style={styles.contentContainer}>
-      <Text style={styles.title}>Hey, congrats for being here today! 🥳</Text>
-
       <Text style={[styles.title, styles.tryTitle]}>
-        Try out some fiesta components
+        Try out some fiesta components 🥳
       </Text>
 
       <TouchableOpacity onPress={onPressThemeChange}>

diff --git a/src/components/Confetti.tsx b/src/components/Confetti.tsx
@@ -1,17 +1,14 @@
-import React, {
-  memo,
-  //  useMemo
-} from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
+import { processTransform2d, Rect, vec } from '@shopify/react-native-skia';
+import { screenHeight } from '../constants/dimensions';
+import { degreesToRadians, randomIntFromInterval } from '../utils/confettis';
+import { DEFAULT_ANIMATION_DURATION } from './Confettis';
 import {
-  // processTransform2d,
-  Rect,
-  // useComputedValue,
-  // useTiming,
-  // vec,
-} from '@shopify/react-native-skia';
-// import { screenHeight } from '../constants/dimensions';
-// import { degreesToRadians, randomIntFromInterval } from '../utils/confettis';
-// import { DEFAULT_ANIMATION_DURATION } from './Confettis';
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 
 export interface ConfettiProps {
   initialPosition?: { x: number; y: number };
@@ -31,74 +28,69 @@ export const Confetti = memo(
     color = '#fff',
     index = 0,
     size = 30,
-  }: // duration = DEFAULT_ANIMATION_DURATION,
-  ConfettiProps) => {
-    // const randomDuration = useMemo(
-    //   () => randomIntFromInterval(duration, duration * 1.5),
-    //   [duration]
-    // );
+    duration = DEFAULT_ANIMATION_DURATION,
+  }: ConfettiProps) => {
+    const randomDuration = useMemo(
+      () => randomIntFromInterval(duration, duration * 1.5),
+      [duration]
+    );
+
+    const yPosition = useSharedValue(-screenHeight / 2 + initialPosition.y);
+    const xOrigin = useSharedValue(initialPosition.x);
+    const rotateValue = useSharedValue(0);
+    const scaleYValue = useSharedValue(Math.random() < 0.5 ? -0.5 : 0.5);
 
-    // const yPosition = useTiming(
-    //   {
-    //     from: -screenHeight / 2 + initialPosition.y,
-    //     to: screenHeight + 300,
-    //   },
-    //   { duration: randomDuration }
-    // );
+    useEffect(() => {
+      yPosition.value = withTiming(screenHeight + 300, {
+        duration: randomDuration,
+      });
 
-    // const xOrigin = useTiming(
-    //   {
-    //     from: initialPosition.x,
-    //     to: initialPosition.x + randomIntFromInterval(100, 50),
-    //     loop: true,
-    //     yoyo: true,
-    //   },
-    //   { duration: randomDuration }
-    // );
+      xOrigin.value = withRepeat(
+        withTiming(initialPosition.x + randomIntFromInterval(100, 50), {
+          duration: randomDuration,
+        }),
+        -1,
+        true
+      );
 
-    // const origin = useComputedValue(() => {
-    //   return vec(xOrigin.current, yPosition.current);
-    // }, [yPosition, xOrigin]);
+      rotateValue.value = withRepeat(
+        withTiming(degreesToRadians(Math.random() < 0.5 ? -360 : 360), {
+          duration: randomDuration / 2,
+        }),
+        -1,
+        true
+      );
 
-    // const rotateValue = useTiming(
-    //   {
-    //     from: 0,
-    //     to: degreesToRadians(Math.random() < 0.5 ? -360 : 360),
-    //     loop: true,
-    //   },
-    //   { duration: randomDuration / 2 }
-    // );
+      scaleYValue.value = withRepeat(
+        withTiming(0, { duration: randomDuration / 2 }),
+        -1,
+        true
+      );
 
-    // const scaleYValue = useTiming(
-    //   {
-    //     from: Math.random() < 0.5 ? -0.5 : 0.5,
-    //     to: 0,
-    //     loop: true,
-    //     yoyo: true,
-    //   },
-    //   { duration: randomDuration / 2 }
-    // );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const origin = useDerivedValue(
+      () => vec(xOrigin.value, yPosition.value),
+      [yPosition, xOrigin]
+    );
 
-    // const matrix = useComputedValue(
-    //   () =>
-    //     processTransform2d([
-    //       { rotate: rotateValue.current },
-    //       { scaleY: scaleYValue.current },
-    //       { skewX: scaleYValue.current / 2 },
-    //       { skewY: -scaleYValue.current / 2 },
-    //     ]),
-    //   [rotateValue, scaleYValue]
-    // );
+    const matrix = processTransform2d([
+      { scaleY: scaleYValue.value },
+      { rotate: rotateValue.value },
+      { skewX: scaleYValue.value / 2 },
+      { skewY: -scaleYValue.value / 2 },
+    ]);
 
     return (
       <Rect
         x={initialPosition.x}
-        // y={yPosition}
+        y={yPosition}
         width={size / 3}
         height={size}
         color={color}
-        // origin={origin}
-        // matrix={matrix}
+        origin={origin}
+        matrix={matrix}
         key={index}
       />
     );