How to Add a Date Picker in React Native?
- React Native does not come with a built-in date picker component.
- You can use a third-party library like react-native-date-picker for a beautiful, consistent experience on Android and iOS.
- Custom date pickers are perfect for forms, booking apps, reminders, and scheduling.
- You can configure the mode (date, time, or datetime), set min/max, and fully style the picker trigger.
AppDatePicker Component Example
AppDatePicker.tsx
import React from 'react';
import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
import DatePicker from 'react-native-date-picker';
type Props = {
children: React.ReactNode;
date: Date;
setDate: (v: Date) => void;
minimumDate?: Date;
maximumDate?: Date;
mode?: 'date' | 'time' | 'datetime';
style?: StyleProp<ViewStyle>;
};
export const AppDatePicker = (props: Props) => {
const { children, date, setDate, minimumDate, maximumDate, mode, style } = props;
const [open, setOpen] = React.useState(false);
return (
<>
<TouchableOpacity
style={style}
onPress={() => {
setOpen(true);
}}>
{children}
</TouchableOpacity>
<DatePicker
modal
mode={mode}
minimumDate={minimumDate}
maximumDate={maximumDate}
open={open}
date={date}
onConfirm={(date) => {
setOpen(false);
setDate(date);
}}
onCancel={() => {
setOpen(false);
}}
/>
</>
);
};- AppDatePicker lets you use any component (like a button or text) to open the date picker modal.
- Controls its own modal state, so the picker opens only when pressed.
- Accepts `date`, `setDate`, and optional props for min/max date, mode, and custom styles.
- Ideal for forms that require users to pick a birthday, select a deadline, or schedule an event.
Key Takeaways
- To select a date in React Native, use a well-maintained third-party package like react-native-date-picker.
- Custom modal pickers let you trigger date selection from any button or text.
- The AppDatePicker component is reusable, flexible, and works great for forms and schedules.
- Configure the picker for date, time, or datetime to match your app’s needs.
- The full setup and usage can be found in the react-native-date-picker GitHub repo.