Works

apk/app/_layout.tsx

@@ -7,6 +7,7 @@ import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 
+import { BirthdaysProvider } from "@/context/birthdays-context";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 
 export const unstable_settings = {
@@ -17,12 +18,14 @@ export default function RootLayout() {
   const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="index" options={{ headerShown: false }} />
-        <Stack.Screen name="add" options={{ headerShown: false }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <BirthdaysProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="add" options={{ headerShown: false }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    </BirthdaysProvider>
   );
 }

apk/app/add.tsx

@@ -1,25 +1,33 @@
-import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import { useBirthdays } from "@/context/birthdays-context";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
 import {
-    Button,
+    Alert,
     KeyboardAvoidingView,
     Platform,
     ScrollView,
     StyleSheet,
     Text,
     TextInput,
+    TouchableOpacity,
     View,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function SimpleForm() {
   const router = useRouter();
+  const { addBirthday } = useBirthdays();
   const [name, setName] = useState("");
   const [date, setDate] = useState(new Date());
   const [showPicker, setShowPicker] = useState(false);
 
-  const onChangeDate = (event, selectedDate) => {
+  const onChangeDate = (
+    event: DateTimePickerEvent,
+    selectedDate?: Date
+  ) => {
     setShowPicker(Platform.OS === "ios");
     if (selectedDate) {
       setDate(selectedDate);
@@ -27,8 +35,18 @@ export default function SimpleForm() {
   };
 
   const handleSubmit = () => {
-    alert(`Name: ${name}\nDate: ${date.toDateString()}`);
-    router.push("/");
+    if (!name.trim()) {
+      Alert.alert("Missing name", "Enter a name before saving.");
+      return;
+    }
+
+    addBirthday({
+      name,
+      date: formatBirthdayDate(date),
+    });
+    setName("");
+    setDate(new Date());
+    router.back();
   };
 
   return (
@@ -37,36 +55,53 @@ export default function SimpleForm() {
         style={styles.keyboardContainer}
         behavior={Platform.OS === "ios" ? "padding" : undefined}
       >
-        <ScrollView
-          contentContainerStyle={styles.scrollContent}
-          keyboardShouldPersistTaps="handled"
-        >
-          <View style={styles.formCard}>
-            <Text style={styles.label}>Name:</Text>
-            <TextInput
-              style={styles.input}
-              placeholder="Enter your name"
-              value={name}
-              onChangeText={setName}
-            />
-
-            <Text style={styles.label}>Date:</Text>
-            <Button title="Select Date" onPress={() => setShowPicker(true)} />
-
-            <Text style={styles.dateText}>{date.toDateString()}</Text>
-
-            {showPicker && (
-              <DateTimePicker
-                value={date}
-                mode="date"
-                display="default"
-                onChange={onChangeDate}
+        <View style={styles.content}>
+          <Text style={styles.title}>Add Birthday</Text>
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+          >
+            <View style={styles.formCard}>
+              <Text style={styles.label}>Name:</Text>
+              <TextInput
+                style={styles.input}
+                placeholder="Enter name of the person"
+                value={name}
+                onChangeText={setName}
               />
-            )}
 
-            <Button title="Submit" onPress={handleSubmit} />
-          </View>
-        </ScrollView>
+              <Text style={styles.label}>Date:</Text>
+              <TouchableOpacity
+                onPress={() => {
+                  setShowPicker(true);
+                }}
+                style={[{ backgroundColor: "#00adaa" }, styles.button]}
+              >
+                <Text style={styles.buttonText}>Select Date</Text>
+              </TouchableOpacity>
+
+              <Text style={styles.dateText}>
+                {"Selected date: " + date.toDateString()}
+              </Text>
+
+              {showPicker && (
+                <DateTimePicker
+                  value={date}
+                  mode="date"
+                  display="default"
+                  onChange={onChangeDate}
+                />
+              )}
+
+              <TouchableOpacity
+                onPress={handleSubmit}
+                style={[{ backgroundColor: "#00984c" }, styles.button]}
+              >
+                <Text style={styles.buttonText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </View>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );
@@ -76,30 +111,63 @@ const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
     backgroundColor: "#fff",
+    justifyContent: "center",
+    marginBottom: 0,
   },
   keyboardContainer: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    paddingHorizontal: 5,
+    paddingBottom: 10,
+  },
   scrollContent: {
     flexGrow: 1,
-    justifyContent: "center",
-    padding: 20,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
   },
   formCard: {
     gap: 12,
   },
   label: {
+    paddingTop: 20,
     fontSize: 16,
   },
   input: {
     borderWidth: 1,
     borderColor: "#ccc",
     padding: 10,
-    marginBottom: 15,
     borderRadius: 5,
   },
   dateText: {
     fontSize: 16,
     marginBottom: 8,
   },
+  button: {
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    elevation: 8
+  },
+  buttonText: {
+    fontSize: 18,
+    color: "#fff",
+    fontWeight: "bold",
+    alignSelf: "center"
+  }
 });
+
+function formatBirthdayDate(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}

apk/app/index.tsx

@@ -1,12 +1,25 @@
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import { BirthdayList } from "@/components/birthdate-list";
+import { useRouter } from "expo-router";
 
 export default function HomeScreen() {
+  
+  const router = useRouter();
+
   return (
     <SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
       <View style={styles.content}>
+        <View style={styles.actionsContainer}>
+          <Text style={styles.title}>Upcoming Birthdays</Text>
+          <TouchableOpacity
+            onPress={() => router.push("/add")}
+            style={styles.addButton}
+          >
+            <Text style={styles.addButtonText}>+</Text>
+          </TouchableOpacity>
+        </View>
         <BirthdayList />
       </View>
     </SafeAreaView>
@@ -23,4 +36,30 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
   },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    paddingHorizontal: 5,
+    paddingBottom: 10,
+  },
+  addButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#007AFF",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addButtonText: {
+    fontSize: 24,
+    color: "white",
+    fontWeight: "bold",
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 12,
+    paddingHorizontal: 5,
+    paddingBottom: 10,
+  },
 });