Merge pull request #123 from Francis6-git/feat/date-picker-issue-47

implement native date and time picker for billing date #47

Author: Smartdevs17

package-lock.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "^9.1.0",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",

package.json

@@ -18,6 +18,8 @@ import { colors, spacing, typography, borderRadius } from '../utils/constants';
 import { SubscriptionCategory, BillingCycle, SubscriptionFormData } from '../types/subscription';
 import { useSubscriptionStore } from '../store';
 import { Button } from '../components/common/Button';
+import { formatCurrency } from '../utils/formatting';
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 
 const AddSubscriptionScreen: React.FC = () => {
   const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -44,6 +46,10 @@ const AddSubscriptionScreen: React.FC = () => {
     BillingCycle.MONTHLY
   );
 
+  // Date Picker States
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerMode, setPickerMode] = useState<'date' | 'time'>('date');
+
   const handleCategorySelect = (category: SubscriptionCategory) => {
     setSelectedCategory(category);
     setFormData((prev) => ({ ...prev, category }));
@@ -56,11 +62,38 @@ const AddSubscriptionScreen: React.FC = () => {
 
   const handleInputChange = (
     field: keyof SubscriptionFormData,
-    value: string | number | boolean
+    value: string | number | boolean | Date
   ) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const onDateChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
+    if (event.type === 'dismissed') {
+      setShowPicker(false);
+      return;
+    }
+
+    if (selectedDate) {
+      handleInputChange('nextBillingDate', selectedDate);
+      
+      if (Platform.OS === 'android' && pickerMode === 'date') {
+        setShowPicker(false);
+        setTimeout(() => {
+          setPickerMode('time');
+          setShowPicker(true);
+        }, 100);
+      } else if (Platform.OS === 'android' && pickerMode === 'time') {
+        setShowPicker(false);
+        setPickerMode('date');
+      }
+    }
+  };
+
+  const showPickerHandler = () => {
+    setPickerMode('date');
+    setShowPicker(true);
+  };
+
   const handleSubmit = async () => {
     if (!formData.name.trim()) {
       Alert.alert('Error', 'Please enter a subscription name');
@@ -202,6 +235,32 @@ const AddSubscriptionScreen: React.FC = () => {
                 </View>
               </View>
 
+              <View style={styles.inputGroup}>
+                <Text style={styles.label}>Next Billing Date *</Text>
+                <TouchableOpacity 
+                  style={styles.datePickerButton} 
+                  onPress={showPickerHandler}
+                >
+                  <Text style={styles.datePickerText}>
+                    {formData.nextBillingDate.toLocaleString([], {
+                      dateStyle: 'medium',
+                      timeStyle: 'short',
+                    })}
+                  </Text>
+                </TouchableOpacity>
+
+                {showPicker && (
+                  <DateTimePicker
+                    value={formData.nextBillingDate}
+                    mode={pickerMode}
+                    is24Hour={true}
+                    display={Platform.OS === 'ios' ? 'inline' : 'default'}
+                    onChange={onDateChange}
+                    minimumDate={new Date()}
+                  />
+                )}
+              </View>
+
               <View style={styles.inputGroup}>
                 <Text style={styles.label}>Billing Cycle</Text>
                 <View style={styles.billingCycleContainer}>
@@ -395,6 +454,19 @@ const styles = StyleSheet.create({
     ...typography.h3,
     fontWeight: '600',
   },
+  // Date picker styling
+  datePickerButton: {
+    backgroundColor: colors.surface,
+    padding: spacing.md,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    justifyContent: 'center',
+  },
+  datePickerText: {
+    ...typography.body,
+    color: colors.text,
+  },
   categoryGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -495,4 +567,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default AddSubscriptionScreen;
+export default AddSubscriptionScreen;