[17] fix: android-specific ui issues

README.md

@@ -1,4 +1,4 @@
-# <img src="assets/logos.png" alt="something logo" width="40" align="center" />  something (todo)
+# <img src="assets/logos.png" alt="something logo" width="40" align="center" /> something (todo)
 
 A tiny todo app built with React Native and Expo.
 

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
     <Root entering={animated ? FadeIn.duration(200) : undefined} style={styles.overlay}>
-      <BlurView
-        intensity={blurIntensity}
-        tint={isDark ? 'dark' : 'light'}
-        style={StyleSheet.absoluteFill}
-      />
+      {Platform.OS === 'ios' ? (
+        <BlurView
+          intensity={blurIntensity}
+          tint={isDark ? 'dark' : 'light'}
+          style={StyleSheet.absoluteFill}
+        />
+      ) : (
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.overlay }]} />
+      )}
       <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
 
       {/* Card */}

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 (
     <View
-      style={[styles.container, { paddingTop: insets.top, backgroundColor: colors.background }]}
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top + (Platform.OS === 'android' ? Spacing.lg + Spacing.xxs : 0),
+          backgroundColor: colors.background,
+        },
+      ]}
     >
       {/* background waves */}
       <Wave position="top" />

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<Date>(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
         />
       </View>
 
-      {/* Confirm button */}
-      <AppButton
-        title={t('common.confirm')}
-        variant="primary"
-        size="md"
-        onPress={handleConfirm}
-        style={styles.confirm}
-      />
+      {/* Confirm button (ios only, android confirms via native modal) */}
+      {Platform.OS === 'ios' && (
+        <AppButton
+          title={t('common.confirm')}
+          variant="primary"
+          size="md"
+          onPress={handleConfirm}
+          style={styles.confirm}
+        />
+      )}
     </>
   );
 }