From 99ed8bae592fbac5f5ebaa096b12c94efd774ca7 Mon Sep 17 00:00:00 2001
From: BinarySandia04 <aranseraroig@gmail.com>
Date: Tue, 21 Apr 2026 17:51:33 +0200
Subject: [PATCH] Fixed layouts

---
 .gitignore                        |  1 +
 apk/app/add.tsx                   | 75 ++++++++++++++++++++-----------
 apk/app/index.tsx                 | 24 +++++-----
 apk/components/birthdate-list.tsx | 14 +++++-
 4 files changed, 78 insertions(+), 36 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..970ea62
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.codex
diff --git a/apk/app/add.tsx b/apk/app/add.tsx
index fc1077e..6ff0d33 100644
--- a/apk/app/add.tsx
+++ b/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,
   },
 });
diff --git a/apk/app/index.tsx b/apk/app/index.tsx
index 16a2a17..8daea7d 100644
--- a/apk/app/index.tsx
+++ b/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,
   },
 });
diff --git a/apk/components/birthdate-list.tsx b/apk/components/birthdate-list.tsx
index b5b80eb..1233ddc 100644
--- a/apk/components/birthdate-list.tsx
+++ b/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,