Birthdate Picker

A native-style date picker component for selecting birthdates with month, day, and year wheels

Installation

npx expo-app-ui add birthdate-picker

:::note The birthdate picker component requires @expo/vector-icons for the calendar icon. Make sure it’s installed in your project. :::

Usage

import CustomBirthdatePicker from "@/components/ui/birthdate-picker";
 
<CustomBirthdatePicker 
  onDateChange={(date) => console.log(date)} 
/>

Complete Example

Here’s a complete example showing the birthdate picker:

import CustomBirthdatePicker from "@/components/ui/birthdate-picker";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
 
export default function BirthdatePickerExample() {
  const [selectedDate, setSelectedDate] = useState<string>("");
 
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Birthdate Picker Example</Text>
 
      <CustomBirthdatePicker
        initialDate={new Date(2000, 0, 1)}
        onDateChange={(date) => {
          setSelectedDate(date);
          console.log("Selected date:", date);
        }}
      />
 
      {selectedDate && (
        <Text style={styles.result}>
          Selected: {selectedDate}
        </Text>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#FFFFFF",
  },
  heading: {
    fontSize: 22,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 20,
  },
  result: {
    marginTop: 20,
    textAlign: "center",
    fontSize: 14,
    color: "#333",
  },
});

Props

Examples

Basic Usage

<CustomBirthdatePicker 
  onDateChange={(date) => {
    console.log("Selected date:", date);
  }} 
/>

With Initial Date

<CustomBirthdatePicker
  initialDate={new Date(2000, 0, 1)}
  onDateChange={handleDateChange}
/>

In a Form

const [birthdate, setBirthdate] = useState<string>("");
 
<CustomBirthdatePicker
  initialDate={new Date(1990, 5, 15)}
  onDateChange={(date) => setBirthdate(date)}
/>
 
{birthdate && (
  <Text>Birthdate: {birthdate}</Text>
)}

Features

• Native iOS-Style Picker: Three-wheel picker for month, day, and year
• Automatic Day Validation: Handles leap years and month-specific day limits
• Modal Presentation: Opens in a modal overlay
• Formatted Output: Returns date in YYYY-MM-DD format
• 100 Years Range: Supports dates from 100 years ago to today
• Visual Feedback: Highlighted selection area
• Smooth Scrolling: Native scroll behavior with snap-to-item
• Cancel/Done Actions: Clear user actions for selection

Date Format

The onDateChange callback returns dates in YYYY-MM-DD format:

onDateChange={(date) => {
  // date will be: "2000-01-15"
  console.log(date);
}}

Notes

• The component automatically adjusts the day picker when month or year changes
• For example, if you select February, days 29-31 are automatically removed
• Leap years are handled automatically (February 29 is available in leap years)
• The year range is from 100 years ago to the current year
• The modal can be dismissed by tapping outside or using Cancel button
• Changes are only applied when “Done” is pressed
• The component uses @expo/vector-icons for the calendar icon
• All dates are in local timezone
• The input field shows the selected date in readable format (e.g., “15 January 2000”)

Styling

The component uses a clean, native iOS-style design with:

• Light gray borders
• Blue accent color for selected items
• Semi-transparent overlay background
• Rounded corners on modal and input
• Smooth animations

You can customize the colors by modifying the COLORS constant in the component file.