npm package: @krushijinjurde/react-native-datepicker
Description: An iOS-style DatePicker component for React Native and Expo
Author: Your Name
Latest version: 1.0.0

# React Native DatePicker

An iOS-style DatePicker component for React Native and Expo that mimics Apple's native date picker design. Features smooth scrolling, multiple modes (date, time, datetime), and full TypeScript support.

![DatePicker Demo](https://via.placeholder.com/800x600.png?text=DatePicker+Demo)

## Features

✨ **iOS-style Design** - Authentic Apple DatePicker look and feel  
📅 **Multiple Modes** - Date, Time, and DateTime picker modes  
🎨 **Customizable** - Colors, sizes, and locale support  
📱 **Expo Compatible** - Works seamlessly with Expo  
🔤 **TypeScript** - Full TypeScript support with type definitions  
⚡ **Smooth Animations** - Native-like scrolling experience  
🌍 **Internationalization** - Locale support for different languages

## Installation

```bash
npm install @yourorg/react-native-datepicker
```

or

```bash
yarn add @yourorg/react-native-datepicker
```

## Usage

### Basic Example

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import DatePicker from '@yourorg/react-native-datepicker';

export default function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <View>
      <DatePicker
        value={selectedDate}
        onChange={setSelectedDate}
        mode="date"
      />
    </View>
  );
}
```

### Time Picker

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import DatePicker from '@yourorg/react-native-datepicker';

export default function TimePicker() {
  const [selectedTime, setSelectedTime] = useState(new Date());

  return (
    <View>
      <DatePicker
        value={selectedTime}
        onChange={setSelectedTime}
        mode="time"
        minuteInterval={5}
      />
    </View>
  );
}
```

### DateTime Picker with Custom Styling

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import DatePicker from '@yourorg/react-native-datepicker';

export default function CustomDateTimePicker() {
  const [selectedDateTime, setSelectedDateTime] = useState(new Date());

  return (
    <View>
      <DatePicker
        value={selectedDateTime}
        onChange={setSelectedDateTime}
        mode="datetime"
        textColor="#007AFF"
        itemHeight={50}
        visibleItemCount={5}
        locale="en-US"
      />
    </View>
  );
}
```

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `Date` | **Required** | The currently selected date |
| `onChange` | `(date: Date) => void` | **Required** | Callback when the date changes |
| `mode` | `'date' \| 'time' \| 'datetime'` | `'date'` | The mode of the picker |
| `minimumDate` | `Date` | `undefined` | Minimum date that can be selected |
| `maximumDate` | `Date` | `undefined` | Maximum date that can be selected |
| `locale` | `string` | `'en-US'` | The locale for the picker (e.g., 'en-US', 'es-ES', 'fr-FR') |
| `textColor` | `string` | `'#000000'` | Text color for the picker items |
| `itemHeight` | `number` | `44` | Height of each item in the picker (in pixels) |
| `visibleItemCount` | `number` | `5` | Number of visible items in the picker (odd numbers recommended) |
| `minuteInterval` | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 10 \| 12 \| 15 \| 20 \| 30` | `1` | The minute interval for time/datetime mode |
| `style` | `ViewStyle` | `undefined` | Custom style for the container |

## Modes

### Date Mode (`mode="date"`)
Displays columns for Month, Day, and Year.

### Time Mode (`mode="time"`)
Displays columns for Hours and Minutes in 24-hour format.

### DateTime Mode (`mode="datetime"`)
Displays all columns: Month, Day, Year, Hours, and Minutes.

## Advanced Usage

### Setting Date Constraints

```tsx
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  mode="date"
  minimumDate={new Date(2020, 0, 1)}
  maximumDate={new Date(2030, 11, 31)}
/>
```

### Localization

```tsx
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  mode="date"
  locale="es-ES"  // Spanish
/>
```

### Minute Intervals

```tsx
<DatePicker
  value={selectedTime}
  onChange={setSelectedTime}
  mode="time"
  minuteInterval={15}  // 0, 15, 30, 45
/>
```

## Running the Example

The package includes an example Expo app that demonstrates all features:

```bash
cd example
npm install
npm start
```

Then scan the QR code with the Expo Go app on your device or run on an emulator.

## Compatibility

- ✅ iOS
- ✅ Android
- ✅ Web (with limited touch support)
- ✅ Expo (SDK 48+)
- ✅ React Native 0.60+

## TypeScript

This package is written in TypeScript and includes type definitions. All props are fully typed for excellent IDE support.

```tsx
import { DatePickerProps } from '@yourorg/react-native-datepicker';

const props: DatePickerProps = {
  value: new Date(),
  onChange: (date: Date) => console.log(date),
  mode: 'date',
};
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

MIT © [Your Name]

## Support

If you like this project, please consider giving it a ⭐️ on GitHub!

For bugs and feature requests, please [open an issue](https://github.com/yourusername/react-native-datepicker/issues).

## Credits

Inspired by Apple's iOS DatePicker design.