V2 confetti

frontend/App.js

@@ -8,6 +8,7 @@ import "react-native-gesture-handler";
 import Theme from "./components/Shared/Theme";
 import AuthModal from "./components/Pages/Auth/AuthModal";
 import MainNavigator from "./components/Navigation";
+import Confetti from "./components/Shared/Confetti/Confetti";
 import { CommunityProvider } from "./components/Contexts/CommunityContext";
 
 export default function App() {
@@ -17,6 +18,7 @@ export default function App() {
       <CommunityProvider>
         <NavigationContainer>
           <AuthModal />
+          <Confetti />
           <MainNavigator />
         </NavigationContainer>
       </CommunityProvider>

frontend/components/Pages/ActionsPage/ActionDetails.js

@@ -22,6 +22,7 @@ import { CommunityContext, useDetails } from "../../Contexts/CommunityContext";
 import { TestimonialCard } from "../TestimonialsPage/TestimonialsCard";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { getActionMetric } from "../../Shared/Utils";
+import ConfettiController from "../../Shared/Confetti/ConfettiController";
 
 export default function ActionDetails({ route, navigation }) {
   const { action_id } = route.params;
@@ -142,6 +143,11 @@ export default function ActionDetails({ route, navigation }) {
     }
   };
 
+  const completeThisAction = () => {
+    setIsDoneOpen(true);
+    ConfettiController.startConfetti();
+  }
+
   return (
     <Page>
       {isActionLoading ? (
@@ -197,7 +203,7 @@ export default function ActionDetails({ route, navigation }) {
                         color: "white",
                         fontWeight: "bold",
                       }}
-                      onPress={() => setIsDoneOpen(true)}
+                      onPress={completeThisAction}
                     >
                       Done
                     </Button>

frontend/components/Shared/Confetti/Confetti.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useLayoutEffect, useState } from "react";
+
+import { View } from "native-base";
+import ConfettiCannon from "react-native-confetti-cannon";
+
+import ConfettiController from "./ConfettiController";
+
+const Confetti = () => {
+  let ref;
+  const [isConfettiVisible, setIsConfettiVisible] = useState(false);
+
+  useLayoutEffect(() => {
+    ConfettiController.setConfettiRef(ref);
+  }, []);
+
+  return (
+    <View
+      position="absolute"
+      height="100%"
+      width="100%"
+      zIndex={999}
+      display={isConfettiVisible ? "block" : "none"}
+    >
+      <ConfettiCannon
+        count={50}
+        origin={{ x: -10, y: 0 }}
+        fallSpeed={1500}
+        fadeOut={true}
+        autoStart={false}
+        onAnimationStart={() => setIsConfettiVisible(true)}
+        onAnimationEnd={() => setIsConfettiVisible(false)}
+        ref={(_ref) => (ref = _ref)}
+      />
+    </View>
+  );
+};
+
+export default forwardRef(Confetti);

frontend/components/Shared/Confetti/ConfettiController.js

@@ -0,0 +1,15 @@
+export default class ConfettiController {
+    static confettiRef;
+
+    static setConfettiRef = (ref) => {
+        this.confettiRef = ref;
+    };
+
+    static startConfetti() {
+        this.confettiRef?.start();
+    }
+
+    static stopConfetti() {
+        this.confettiRef?.stop();
+    }
+}

frontend/package.json

@@ -24,6 +24,7 @@
     "pinar": "^0.12.2",
     "react": "18.2.0",
     "react-native": "0.72.3",
+    "react-native-confetti-cannon": "^1.5.2",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-render-html": "^6.3.4",