React-native-customdob NPM

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).