Merge pull request #166 from GTBitsOfGood/jay/birthday-animations

Add balloons to the birthday banner

Author: SamratSahoo

mobile/package.json

@@ -18,6 +18,7 @@
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.8.0",
     "@react-navigation/stack": "^6.2.2",
+    "@shopify/react-native-skia": "~1.2.3",
     "babel-preset-expo": "~11.0.0",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.11.13",
@@ -39,7 +40,9 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-dropdown-picker": "^5.4.2",
+    "react-native-fiesta": "^0.7.0",
     "react-native-get-random-values": "~1.11.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

mobile/screens/Banners/BirthdayBanner.tsx

@@ -1,57 +1,85 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useEffect, useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
 import { User } from "../../utils/types";
-import { userGetUserInfo, userUpdateUser } from "../../actions/User";
-import dayjs from 'dayjs';
-import dayOfYear from 'dayjs/plugin/dayOfYear';
+import { userGetUserInfo } from "../../actions/User";
+import dayjs from "dayjs";
+import dayOfYear from "dayjs/plugin/dayOfYear";
 import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
-import FontAwesome from '@expo/vector-icons/FontAwesome';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Balloons } from "react-native-fiesta";
 
 dayjs.extend(dayOfYear);
 
 const BirthdayBanner = () => {
-    const [birthdayBanner, setBirthdayBanner] = useState<{ header: string, message: string } | null>(null);
-    const [error, setError] = useState("Could not get user");
+  const [birthdayBanner, setBirthdayBanner] = useState<{
+    header: string;
+    message: string;
+  } | null>(null);
+  const [error, setError] = useState("Could not get user");
 
-    const checkForBirthday = async () => {
-        try {
-          const user: User = (await ErrorWrapper({
-            functionToExecute: userGetUserInfo,
-            errorHandler: setError,
-          })) as User;
-      
-          const today = new Date();
-          const birthday = user.birthday;
-      
-          if (birthday && dayjs(today).dayOfYear() === dayjs(birthday).dayOfYear()) {
-            setBirthdayBanner({ header: `Happy Birthday, ${user.firstName}`, message: `Wishing you an amazing day and a fantastic year ahead!`});
-          } else {
-            setBirthdayBanner(null);
-          }
-        } catch (error) {
-            endOfExecutionHandler(error as Error);
-        }
-      };
+  const checkForBirthday = async () => {
+    try {
+      const user: User = (await ErrorWrapper({
+        functionToExecute: userGetUserInfo,
+        errorHandler: setError,
+      })) as User;
 
-    useEffect(() => {
-        checkForBirthday();
-    }, []);
-      
+      const today = new Date();
+      const birthday = user.birthday;
+
+      if (
+        birthday &&
+        dayjs(today).dayOfYear() === dayjs(birthday).dayOfYear()
+      ) {
+        setBirthdayBanner({
+          header: `Happy Birthday, ${user.firstName}`,
+          message: `Wishing you an amazing day and a fantastic year ahead!`,
+        });
+      } else {
+        setBirthdayBanner(null);
+      }
+    } catch (error) {
+      endOfExecutionHandler(error as Error);
+    }
+  };
+
+  useEffect(() => {
+    checkForBirthday();
+  }, []);
 
   if (!birthdayBanner) return null;
 
   return (
-    <View style={styles.birthdayBanner}>
-        <FontAwesome name="birthday-cake" size={20} color="#807efb" justify-content="center"/>
+    <>
+      <View style={styles.balloonsOverlay}>
+        {birthdayBanner && <Balloons />}
+      </View>
+      <View style={styles.birthdayBanner}>
+        <FontAwesome
+          name="birthday-cake"
+          size={20}
+          color="#807efb"
+          justify-content="center"
+        />
         <Text style={styles.birthdayTitle}>{birthdayBanner.header}!</Text>
         {birthdayBanner.message ? (
-            <Text style={styles.birthdayMessage}>{birthdayBanner.message}</Text>
+          <Text style={styles.birthdayMessage}>{birthdayBanner.message}</Text>
         ) : null}
-    </View>
+      </View>
+    </>
   );
 };
 
 const styles = StyleSheet.create({
+  balloonsOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    pointerEvents: "none",
+  },
   birthdayBanner: {
     borderRadius: 10,
     backgroundColor: "#3F3BED",
@@ -61,19 +89,20 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     gap: 5,
     opacity: 0.9,
-    alignItems: "center"
+    alignItems: "center",
+    zIndex: 1,
   },
   birthdayTitle: {
     color: "white",
     fontSize: 14,
     fontWeight: "700",
-    textAlign: "center"
+    textAlign: "center",
   },
   birthdayMessage: {
     color: "white",
     fontSize: 12,
     fontWeight: "400",
-    textAlign: "center"
+    textAlign: "center",
   },
 });