Fixed layouts

apk/app/add.tsx

@@ -3,12 +3,15 @@ import { useRouter } from "expo-router";
 import React, { useState } from "react";
 import {
     Button,
+    KeyboardAvoidingView,
     Platform,
+    ScrollView,
     StyleSheet,
     Text,
     TextInput,
     View,
 } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function SimpleForm() {
   const router = useRouter();
@@ -29,42 +32,64 @@ export default function SimpleForm() {
   };
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.label}>Name:</Text>
-      <TextInput
-        style={styles.input}
-        placeholder="Enter your name"
-        value={name}
-        onChangeText={setName}
-      />
+    <SafeAreaView style={styles.safeArea} edges={["top", "bottom"]}>
+      <KeyboardAvoidingView
+        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.label}>Date:</Text>
+            <Button title="Select Date" onPress={() => setShowPicker(true)} />
 
-      <Text style={styles.dateText}>{date.toDateString()}</Text>
+            <Text style={styles.dateText}>{date.toDateString()}</Text>
 
-      {showPicker && (
-        <DateTimePicker
-          value={date}
-          mode="date"
-          display="default"
-          onChange={onChangeDate}
-        />
-      )}
+            {showPicker && (
+              <DateTimePicker
+                value={date}
+                mode="date"
+                display="default"
+                onChange={onChangeDate}
+              />
+            )}
 
-      <Button title="Submit" onPress={handleSubmit} />
-    </View>
+            <Button title="Submit" onPress={handleSubmit} />
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  keyboardContainer: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: "center",
     padding: 20,
-    marginTop: 50,
+  },
+  formCard: {
+    gap: 12,
   },
   label: {
     fontSize: 16,
-    marginBottom: 5,
   },
   input: {
     borderWidth: 1,
@@ -74,7 +99,7 @@ const styles = StyleSheet.create({
     borderRadius: 5,
   },
   dateText: {
-    marginVertical: 10,
     fontSize: 16,
+    marginBottom: 8,
   },
 });

apk/app/index.tsx

@@ -1,22 +1,26 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { BirthdayList } from "@/components/birthdate-list";
-import ScrollView from "@/components/scroll-view";
-import { View } from "react-native";
 
 export default function HomeScreen() {
   return (
-    <ScrollView>
-      <View style={styles.titleContainer}>
-        <BirthdayList></BirthdayList>
+    <SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
+      <View style={styles.content}>
+        <BirthdayList />
       </View>
-    </ScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    gap: 8,
-    margin: 20,
+  screen: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
   },
 });

apk/components/birthdate-list.tsx

@@ -42,7 +42,7 @@ export function BirthdayList() {
   const groupedData = groupBirthdaysByDate(DATA);
 
   return (
-    <View>
+    <View style={styles.container}>
       <View style={styles.titleContainer}>
         <Text style={{ fontSize: 24, fontWeight: "bold" }}>
           Upcoming Birthdays
@@ -61,6 +61,8 @@ export function BirthdayList() {
         renderItem={({ item }) => (
           <BirthdayItem name={item.name} date={item.date} />
         )}
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
         renderSectionHeader={({ section: { title } }) => (
           <View style={styles.headerContainer}>
@@ -96,13 +98,23 @@ function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   titleContainer: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
+    gap: 12,
     paddingHorizontal: 5,
     paddingVertical: 10,
   },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingBottom: 20,
+  },
   addButton: {
     width: 40,
     height: 40,