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,
   },
 });