react-native-customdob

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.