react-native-customdob/README.md

date of birth input

## DOBPicker
DOBPicker is a customizable Date of Birth picker component for React Native, built using react-native-paper and react-native-modal-datetime-picker. It allows users to select a date and time using a modal date picker, with additional support for custom icons and text input handling.

## Installation
Ensure you have react-native-paper and react-native-modal-datetime-picker installed in your project. If not, install them first:

npm install react-native-paper react-native-modal-datetime-picker date-fns

Then, install DOBPicker by adding it to your project:

npm install react-native-customtextinput

## Usage
Import and use the DOBPicker component in your React Native project:

import React, { useState } from 'react';

import { View, Image } from 'react-native';

import DOBPicker from 'react-native-customtextinput';

const App = () => {

  const [selectedDate, setSelectedDate] = useState<Date | undefined>();

  return (

    <View style={{ padding: 20 }}>

      <DOBPicker
        label="Date of Birth"
        onDateChange={handleDateChange}
        dateFormat="yyyy-MM-dd"
        calendarIcon={require('./assets/calendar.png')}
        clearIcon={require('./assets/clear.png')}
        rightCalendarIconStyle={{ width: 30, height: 30, tintColor: 'blue' }}
        Icon={require('./assets/user.png')}
        leftIconStyle={{ width: 25, height: 25, tintColor: 'green' }}
      />
      
    </View>

  );
};

export default App;

## Props

| Prop Name             | Type                               | Default               | Description                                                   |
|-----------------------|------------------------------------|-----------------------|---------------------------------------------------------------|
| `label`               | `string`                           | `undefined`           | Label for the text input field.                               |
| `value`               | `string`                           | `undefined`           | The value displayed in the input field.                       |
| `Icon`                | `ImageSourcePropType`              | `undefined`           | Optional left-side icon.                                      |
| `calendarIcon`        | `ImageSourcePropType`              | Required              | Calendar icon for the date picker.                            |
| `clearIcon`           | `ImageSourcePropType`              | `undefined`           | Clear icon to reset the selected date.                        |
| `onDateChange`        | `(selectedDate: Date / undefined) => void` | Required              | Callback when the date is selected or cleared.               |
| `dateFormat`          | `string`                           | `'dd/MM/yyyy h:mm'`  | Format for displaying the selected date.                     |
| `onClear`             | `() => void`                       | `undefined`           | Callback when the clear button is pressed.                    |
| `returnKeyType`       | `'done' / 'next'`                 | `undefined`           | Return key type for the keyboard.                             |
| `onSubmitEditing`     | `() => void`                       | `undefined`           | Callback when submitting the input field.                    |
| `forwardRef`          | `Ref<RNTextInput>`                | `undefined`           | Forwarded reference to the input field.                       |
| `textColor`           | `string`                           | `'black'`             | Color of the text in the input field.                         |
| `placeholderTextColor`| `string`                           | `'black'`             | Color of the placeholder text.                                |
| `mode`                | `'flat' / 'outlined'`             | `'outlined'`          | Mode of the TextInput component from react-native-paper.     |
| `rightCalendarIconStyle`| `StyleProp<ImageStyle>`         | `undefined`           | Style for the right calendar/clear icon.                     |
| `leftIconStyle`      | `StyleProp<ImageStyle>`            | `undefined`           | Style for the left icon.                                      |
| `datetimeMode`       | `'date' / 'time' / 'datetime'`    | `'datetime'`          | Mode for the DateTimePickerModal (date, time, or datetime).  |

## Features
Displays a modal date and time picker.

Customizable icons for calendar and clear actions.

Prevents direct text input to ensure valid date selection.

Uses date-fns for date formatting and parsing.

Supports React Native Paper's theming.