Datepickers are one of the most common, non-trivial UI components. They are particularly important for apps that involve any type of booking, like hotels, reservations, and flights, or any product that requires a date input, such as date-of-birth. Datepickers show the user they’ve chosen the right date while avoiding any confusion across global date format differences.
While React web applications have always relied on third-party date picker libraries, React Native apps used to have a native date-picker API for Android and iOS (named DatePickerAndroid and DatePickerIOS respectively). However, both were deprecated, with the framework instructing developers to use community packages instead.
With that in mind, we reviewed the most popular community React Native datepicker libraries. We’ll discuss the pros and cons of each library, share each one's popularity stats, and outline what projects each library is best suited for. As a forewarning, the names of these libraries are very similar. They also share very little variance compared to our React map library breakdown. But by the end of this post, you’ll be able to identify which datepicker library you should use for your project.
This article was originally published in Sept. 2021. It's been updated for 2024.
GitHub Stars: 2.3K
NPM weekly downloads: 407.1K
Compatible with Expo? Yes
License: MIT
Overall, React native DateTimePicker is the most successful library in the space. It has the most NPM downloads and the second most Github stars (and is the main dependency of this metric’s leader). The library is part of the react-native-community Github group, a popular, well-trusted organization that vets and publishes React Native libraries. While the group is actively looking for collaborators and financial backers, there is very active development on the library.
React Native DateTimePicker uses the native system components under its hood. For most, these should be very familiar aesthetically:
React Native DateTimePicker is notably compatible with Expo—a popular React Native build environment—and is part of the Expo Managed Workflow.
React Native DateTimePicker is an extremely feature-packed library, with support for custom calendars, theme variants, locales, date maxes and mins, and custom minute intervals.
How do I use React Native DateTimePicker?
To install React Native DateTimePicker, first install the package and the relevant cocoa pods for iOS (unless using Expo):
1yarn add @react-native-community/datetimepicker cd ios && pod installIf you are using Expo, instead do:
1npx expo install @react-native-community/datetimepickerThen, simply import the package and implement in JSX:
1import React, { useState } from 'react'
2import DatePicker from 'react-native-date-picker'
3
4export default () => {
5 const [myDate, setMyDate] = useState(new Date())
6 return <DatePicker date={myDate} onDateChange={setMyDate} />
7}GitHub Stars: 2.9K
NPM weekly downloads: 283.6K
Compatible with Expo? Yes
License: MIT
react-native-modal-datetime-picker (whew, what a mouthful, perhaps RNMDP for short) is a library that makes it easy to display a date-picker inside a modal, darkening the rest of the page.
Notably, RNMDP leverages React-Native DateTimePicker under the hood—and every RNMDP NPM weekly download also contributes to React-Native DateTimePicker’s numbers.
RNMDP simply makes it easy to put the date-picker in a modal. For some, this is particularly useful (evidenced by its slightly higher Github stars). For others, an already implemented modal library may be a better option.
RNMDP is also compatible with Expo. Given the dependency, it also is using the native iOS and Android date-time UI under the hood.
*ignoring React as a dependency.
How do I use react-native-modal-datetime-picker?
For non-Expo projects, install the package and the react-native-modal-datetime-picker dependency:
1yarn add react-native-modal-datetime-picker For Expo projects, instead install it via Expo’s CLI:
1npx expo install react-native-modal-datetime-pickerThen, to use the package:
1import React, { useState } from "react";
2import { Button, View } from "react-native";
3import DateTimePickerModal from "react-native-modal-datetime-picker";
4
5export default () => {
6 const [myDate, setMyDate] = useState(new Date())
7 return <DateTimePickerModal
8 date={myDate}
9 onConfirm={setMyDate}
10 mode="date"
11 />
12}
13
14export default Example;GitHub Stars: 2.1K
NPM weekly downloads: 162.6K
Compatible with Expo? No
License: MIT
React Native Date Picker is another option outside of the react-native-community ecosystem. It has scored a commendable 2.1K GitHub stars, has over a hundred thousand NPM weekly downloads, and operates under an MIT license. And, contrary to some outdated guides, it's compatible with Expo via Developmental Builds without the need for a config plugin.
React Native Date Picker works differently from previous options—it uses the iOS native date-picker but emulates a similar interface for Android. This is ideal for developers that want a more unified experience across both operating systems.
How do I use React Native Date Picker?
To install React Native Date Picker, start by installing the package:
1yarn add react-native-date-pickerNext, install the iOS cocoa pods (unless using Expo):
1cd ios && pod installThen, you can implement react-native-date-picker in a similar fashion to DateTimePicker:
1import React, { useState } from 'react'
2import DatePicker from 'react-native-date-picker'
3
4export default () => {
5 const [date, setDate] = useState(new Date())
6 return <DatePicker date={date} onDateChange={setDate} />
7}There are three excellent options for using datepickers in React Native. It comes down to two questions:
- Do you want an unified look and feel across iOS and Android? If so, you should use React-Native-Date-Picker.
- Are you looking for something that uses native components? Then you should use React-Native DateTimePicker for inline components or React-Native-Model-Datetime-Picker for built-in modal support.
Now that you've chosen a datepicker, it's time to add it to an app. Sign up for a free Retool account and start building today.
Reader
