@lh-tools/birthday-picker

A step-by-step birthday picker for React Native with zodiac/decade drill-down UI.

Instead of a boring date picker, users select their birth date through an engaging flow:

1. Zodiac animal (for Japanese/Vietnamese) or Decade (for English)
2. Birth year (narrowed by zodiac)
3. Star sign (Western zodiac)
4. Month (narrowed by star sign)
5. Day

Screenshots

Install

npm install @lh-tools/birthday-picker

Usage

import { BirthdayPicker } from '@lh-tools/birthday-picker';

function MyScreen() {
  return (
    <BirthdayPicker
      locale="ja"
      onComplete={(date) => console.log('Birthday:', date)}
      theme={{ primary: '#6C5CE7' }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | locale | 'en' \| 'ja' \| 'vi' | 'en' | Language for labels. ja/vi show zodiac animals, en shows decades. | | initialDate | Date | 30 years ago | Pre-selected date | | onDateChange | (date: Date) => void | - | Called on every selection step | | onComplete | (date: Date) => void | - | Called when full date is selected | | theme | Partial<Theme> | - | Color overrides |

Theme

interface Theme {
  primary: string;    // Main accent color
  secondary: string;  // Star sign accent color
  text: string;       // Text color
  icon: string;       // Secondary text / labels
  border: string;     // Border color
  background: string; // Background color
}

License

MIT