feat: add calendar date picker, nav icons, and input-focused keyboard scrolling

src/tabs/TripsTab.js

@@ -3,6 +3,16 @@ import { Image, Pressable, Text, TextInput, View } from 'react-native';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
+function DateField({ label, value, onPress }) {
+  return (
+    <Field label={label}>
+      <Pressable style={styles.dateInput} onPress={onPress}>
+        <Text style={styles.dateInputText}>{value}</Text>
+      </Pressable>
+    </Field>
+  );
+}
+
 export default function TripsTab({
   tripForm,
   updateTripForm,
@@ -14,8 +24,9 @@ export default function TripsTab({
   chooseTrip,
   setTripAsTemplate,
   deleteTrip,
-  focusToEnd,
+  onInputFocus,
   defaultTemplateTripId,
+  openDatePicker,
 }) {
   return (
     <View style={styles.section}>
@@ -29,7 +40,7 @@ export default function TripsTab({
             onChangeText={(v) => updateTripForm('name', v)}
             placeholder="Summer Weekend"
             placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+            onFocus={onInputFocus}
           />
         </Field>
 
@@ -40,29 +51,12 @@ export default function TripsTab({
             onChangeText={(v) => updateTripForm('location', v)}
             placeholder="Berlin"
             placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
+            onFocus={onInputFocus}
           />
         </Field>
 
-        <Field label="Start Date (YYYY-MM-DD)">
-          <TextInput
-            style={styles.input}
-            value={tripForm.startDate}
-            onChangeText={(v) => updateTripForm('startDate', v)}
-            placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
-          />
-        </Field>
-
-        <Field label="End Date (YYYY-MM-DD)">
-          <TextInput
-            style={styles.input}
-            value={tripForm.endDate}
-            onChangeText={(v) => updateTripForm('endDate', v)}
-            placeholderTextColor="#6b7280"
-            onFocus={focusToEnd}
-          />
-        </Field>
+        <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
+        <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
 
         <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
           <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>