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.