Skip to content

Commit 099e4aa

Browse files
authored
Merge pull request #166 from GTBitsOfGood/jay/birthday-animations
Add balloons to the birthday banner
2 parents e39aa4d + bb7d1e1 commit 099e4aa

File tree

3 files changed

+369
-72
lines changed

3 files changed

+369
-72
lines changed

mobile/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@react-navigation/native": "^6.0.11",
1919
"@react-navigation/native-stack": "^6.8.0",
2020
"@react-navigation/stack": "^6.2.2",
21+
"@shopify/react-native-skia": "~1.2.3",
2122
"babel-preset-expo": "~11.0.0",
2223
"crypto-browserify": "^3.12.0",
2324
"dayjs": "^1.11.13",
@@ -39,7 +40,9 @@
3940
"react-dom": "18.2.0",
4041
"react-native": "0.74.5",
4142
"react-native-dropdown-picker": "^5.4.2",
43+
"react-native-fiesta": "^0.7.0",
4244
"react-native-get-random-values": "~1.11.0",
45+
"react-native-reanimated": "~3.10.1",
4346
"react-native-safe-area-context": "4.10.5",
4447
"react-native-screens": "3.31.1",
4548
"react-native-svg": "15.2.0",

mobile/screens/Banners/BirthdayBanner.tsx

+67-38
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,85 @@
1-
import React, { useEffect, useState } from 'react';
2-
import { View, Text, StyleSheet } from 'react-native';
1+
import React, { useEffect, useState } from "react";
2+
import { View, Text, StyleSheet } from "react-native";
33
import { User } from "../../utils/types";
4-
import { userGetUserInfo, userUpdateUser } from "../../actions/User";
5-
import dayjs from 'dayjs';
6-
import dayOfYear from 'dayjs/plugin/dayOfYear';
4+
import { userGetUserInfo } from "../../actions/User";
5+
import dayjs from "dayjs";
6+
import dayOfYear from "dayjs/plugin/dayOfYear";
77
import { endOfExecutionHandler, ErrorWrapper } from "../../utils/error";
8-
import FontAwesome from '@expo/vector-icons/FontAwesome';
8+
import FontAwesome from "@expo/vector-icons/FontAwesome";
9+
import { Balloons } from "react-native-fiesta";
910

1011
dayjs.extend(dayOfYear);
1112

1213
const BirthdayBanner = () => {
13-
const [birthdayBanner, setBirthdayBanner] = useState<{ header: string, message: string } | null>(null);
14-
const [error, setError] = useState("Could not get user");
14+
const [birthdayBanner, setBirthdayBanner] = useState<{
15+
header: string;
16+
message: string;
17+
} | null>(null);
18+
const [error, setError] = useState("Could not get user");
1519

16-
const checkForBirthday = async () => {
17-
try {
18-
const user: User = (await ErrorWrapper({
19-
functionToExecute: userGetUserInfo,
20-
errorHandler: setError,
21-
})) as User;
22-
23-
const today = new Date();
24-
const birthday = user.birthday;
25-
26-
if (birthday && dayjs(today).dayOfYear() === dayjs(birthday).dayOfYear()) {
27-
setBirthdayBanner({ header: `Happy Birthday, ${user.firstName}`, message: `Wishing you an amazing day and a fantastic year ahead!`});
28-
} else {
29-
setBirthdayBanner(null);
30-
}
31-
} catch (error) {
32-
endOfExecutionHandler(error as Error);
33-
}
34-
};
20+
const checkForBirthday = async () => {
21+
try {
22+
const user: User = (await ErrorWrapper({
23+
functionToExecute: userGetUserInfo,
24+
errorHandler: setError,
25+
})) as User;
3526

36-
useEffect(() => {
37-
checkForBirthday();
38-
}, []);
39-
27+
const today = new Date();
28+
const birthday = user.birthday;
29+
30+
if (
31+
birthday &&
32+
dayjs(today).dayOfYear() === dayjs(birthday).dayOfYear()
33+
) {
34+
setBirthdayBanner({
35+
header: `Happy Birthday, ${user.firstName}`,
36+
message: `Wishing you an amazing day and a fantastic year ahead!`,
37+
});
38+
} else {
39+
setBirthdayBanner(null);
40+
}
41+
} catch (error) {
42+
endOfExecutionHandler(error as Error);
43+
}
44+
};
45+
46+
useEffect(() => {
47+
checkForBirthday();
48+
}, []);
4049

4150
if (!birthdayBanner) return null;
4251

4352
return (
44-
<View style={styles.birthdayBanner}>
45-
<FontAwesome name="birthday-cake" size={20} color="#807efb" justify-content="center"/>
53+
<>
54+
<View style={styles.balloonsOverlay}>
55+
{birthdayBanner && <Balloons />}
56+
</View>
57+
<View style={styles.birthdayBanner}>
58+
<FontAwesome
59+
name="birthday-cake"
60+
size={20}
61+
color="#807efb"
62+
justify-content="center"
63+
/>
4664
<Text style={styles.birthdayTitle}>{birthdayBanner.header}!</Text>
4765
{birthdayBanner.message ? (
48-
<Text style={styles.birthdayMessage}>{birthdayBanner.message}</Text>
66+
<Text style={styles.birthdayMessage}>{birthdayBanner.message}</Text>
4967
) : null}
50-
</View>
68+
</View>
69+
</>
5170
);
5271
};
5372

5473
const styles = StyleSheet.create({
74+
balloonsOverlay: {
75+
position: "absolute",
76+
top: 0,
77+
left: 0,
78+
right: 0,
79+
bottom: 0,
80+
zIndex: 1,
81+
pointerEvents: "none",
82+
},
5583
birthdayBanner: {
5684
borderRadius: 10,
5785
backgroundColor: "#3F3BED",
@@ -61,19 +89,20 @@ const styles = StyleSheet.create({
6189
flexDirection: "column",
6290
gap: 5,
6391
opacity: 0.9,
64-
alignItems: "center"
92+
alignItems: "center",
93+
zIndex: 1,
6594
},
6695
birthdayTitle: {
6796
color: "white",
6897
fontSize: 14,
6998
fontWeight: "700",
70-
textAlign: "center"
99+
textAlign: "center",
71100
},
72101
birthdayMessage: {
73102
color: "white",
74103
fontSize: 12,
75104
fontWeight: "400",
76-
textAlign: "center"
105+
textAlign: "center",
77106
},
78107
});
79108

0 commit comments

Comments
 (0)