diff --git a/README.md b/README.md index 40a9368..f048444 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# something logo something (todo) +# something logo something (todo) A tiny todo app built with React Native and Expo. diff --git a/components/atoms/AppCard.tsx b/components/atoms/AppCard.tsx index 57684b6..9063922 100644 --- a/components/atoms/AppCard.tsx +++ b/components/atoms/AppCard.tsx @@ -3,6 +3,7 @@ import { View, Pressable, StyleSheet, + Platform, type LayoutChangeEvent, type StyleProp, type ViewStyle, @@ -41,11 +42,15 @@ export function AppCard({ return ( // overlay with blur and pressable to close when tapping outside the card - + {Platform.OS === 'ios' ? ( + + ) : ( + + )} {/* Card */} diff --git a/components/layout/ScreenLayout.tsx b/components/layout/ScreenLayout.tsx index 672842c..0ff7638 100644 --- a/components/layout/ScreenLayout.tsx +++ b/components/layout/ScreenLayout.tsx @@ -1,4 +1,4 @@ -import { View, StyleSheet, Animated } from 'react-native'; +import { View, StyleSheet, Animated, Platform } from 'react-native'; import { useEffect, useRef } from 'react'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { NavigationBar } from './NavigationBar'; @@ -51,7 +51,13 @@ export function ScreenLayout({ return ( {/* background waves */} diff --git a/components/molecules/DueDateRow.tsx b/components/molecules/DueDateRow.tsx index 8927f12..2e11dea 100644 --- a/components/molecules/DueDateRow.tsx +++ b/components/molecules/DueDateRow.tsx @@ -63,11 +63,21 @@ function DueDatePicker({ dueDate, onDueDateChange, onToggle }: DueDatePickerProp const parsed = dueDate ? new Date(dueDate) : now; const [date, setDate] = useState(parsed < now ? now : parsed); - const handleDateChange = useCallback((_event: DateTimePickerEvent, selectedDate?: Date) => { - if (selectedDate) { - setDate(selectedDate); - } - }, []); + const handleDateChange = useCallback( + (event: DateTimePickerEvent, selectedDate?: Date) => { + if (Platform.OS === 'android') { + if (event.type === 'set' && selectedDate) { + onDueDateChange(selectedDate.toISOString()); + } + onToggle(); + return; + } + if (selectedDate) { + setDate(selectedDate); + } + }, + [onDueDateChange, onToggle], + ); const handleConfirm = useCallback(() => { onDueDateChange(date.toISOString()); @@ -89,14 +99,16 @@ function DueDatePicker({ dueDate, onDueDateChange, onToggle }: DueDatePickerProp /> - {/* Confirm button */} - + {/* Confirm button (ios only, android confirms via native modal) */} + {Platform.OS === 'ios' && ( + + )} ); }