The best React Native datepicker libraries
Tags: react
Published: 2021-06-10 17:39:30

---
canonical_url: https://retool.com/blog/react-native-datepicker-libraries/
---

Date pickers are a common and essential component for many apps, especially those that facilitate event booking—like a hotel booking app—to aid seamless date selection. Date pickers improve app usability by reducing the complexities of date validation issues by ensuring that invalid dates cannot be entered, restricting date ranges, and eliminating date format confusion (for example, is `July 9, 2010` or `September 7, 2010`).

The React Native framework used to provide React-Native date picker APIs for Android and iOS—[DatePickerAndriod](https://reactnative.dev/docs/datepickerandroid) and [DatePickerIOS](https://reactnative.dev/docs/datepickerios)—are now deprecated. Your choices now are to either build a date picker from scratch or use another date picker library.

We researched and tried a handful of popular React-Native date picker libraries, narrowing down to four options based on factors that make a good library. Out of the top four libraries, we found the [React-Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker) is the best; we’ll walk you through our reasoning for the selection.

## What to consider before choosing a library?
We considered several factors in making our selection for the top React-Native date picker libraries and landed on the following:

**Documentation:** Documentation is a necessity for every library, so you need to check if the library has a documentation file or site. Is the documentation detailed and written in simple language? Does it clearly highlight how to install and set up the library, how to use the library with some code examples, and have solutions to common issues or FAQs?

**Popularity:** If many developers are actively using a particular library, then it’s likely to get the job done. Popularity indicators we looked at include metrics like the number of downloads recorded on the library’s [npm](https://www.npmjs.com/) page, number of forks, stars, users, and contributors on GitHub.

**Code update frequency:** If the codebase of a library is not frequently updated that means it is not actively maintained. Metrics you should look out for are: last commit date (anything greater than a year ago is a cause for concern), number of open vs. closed issues (the latter should be greater than the former), and date of the last version release.

**Usability:** How easy is it to use the library? Do you have to learn any new technologies outside your existing tech stack? Does it support all platforms you need?

**Bundle size:** When adding a package, how much extra weight will this add? Will it significantly increase the size of your app? You can use [bundlephobia](https://bundlephobia.com/) to check.

**Reputation of creators:** Who are the creators/maintainers of the library? What is their experience? Have they successfully built and maintained other open-source libraries?

## Why React-Native DateTimePicker is the best date picker library
As mentioned, we used the factors discussed above to assess several React Native date picker libraries, and [React-Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker) stood out from the pack. It is the most popular, has the most downloads, and was created and is maintained by the React Native community—the same group that builds and maintains most popular packages in the React Native ecosystem.

Here are detailed specs of this top-notch library:
- **Documentation:** Documentation is available via the [repo’s README.md on Github](https://github.com/react-native-datetimepicker/datetimepicker#readme). It is elaborate, shows how to install, set up, and use the library’s ‘DateTimePicker’ component, and also discusses all accepted props

- **Popularity:** 46 contributors, 1.2k stars, 16.2k users on GitHub, approximately 150k weekly downloads

- **Code update frequency:** Since the first version was [released on 18 June 2019](https://github.com/react-native-datetimepicker/datetimepicker/releases?after=v2.1.1), new versions with are released at least once every month

- **Usability:** Supports Android, iOS, and Windows. Supported by [Expo](https://docs.expo.io/) — the official toolchain for building React Native apps

- **Bundle Size:** 188kb

- **Reputation of creators:** Created by and actively maintained by the React Native community

![React-Native DateTimePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8s9ydadjr2afxkvgfbj.png)

## Notable React-Native date picker library options to consider
Based on our assessment, we found other React-Native date picker libraries that are worth recommending as well. If React Native DateTimePicker doesn’t suit your needs, here are three other alternatives that are popular, have good documentation, and are also simple to use.

### [React-native-modal-datetime-picker](https://github.com/mmazzarolo/react-native-modal-datetime-picker)
- **Documentation:** Documentation is hosted on the [repo’s readme.md on Github](https://github.com/mmazzarolo/react-native-modal-datetime-picker#readme). It is straightforward, covers all the basics required to install, set up, and use the `DateTimePickerModal` component from the library, alongside a description of all acceptable props and answers to popular FAQs.

- **Popularity:** Approximately 100k weekly downloads, 2.2k stars, 9.1k GitHub users, 76 contributors

- **Code update frequency:** The repo is active. Over 66 releases since its first release on October 6, 2016

- **Usability:** Supports Android and iOS. Also, Supported by Expo. But, it uses [React-Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker) under the hood, so it is dependent on it. It is a good alternative if you want to show your date pickers inside a modal.

- **Bundle Size:** 35.2kb (lightest weight of the bunch)

- **Reputation of creators:** [Matteo Mazzarolo](https://mmazzarolo.com/), a software developer at inVision

### [React-native-date-picker](https://github.com/henninghall/react-native-date-picker)
- **Documentation:** Documentation is hosted on the [repo’s readme.md on Github](https://github.com/henninghall/react-native-date-picker#readme) and it covers all the basics required to install, set up, and use the ‘DatePicker’ component from the library, alongside a description of all acceptable props and answers to popular FAQs.

- **Popularity:** It has 826 stars, 24 contributors, 1.5k GitHub users, and approximately 26,000 weekly downloads

- **Code update frequency:** Since its first release on 8 April 2018, there have been 71 releases, with at least a new version with code updates and bug fixes every month

- **Usability:** Supports Android and iOS. Not supported by Expo. It is ideal if you want a unified date picker design across your Android and iOS apps.

- **Bundle Size:** 157kb
- **Reputation of creators:** Henning Hall, JavaScript developer at SF Studios

### [React-native-calendar-picker](https://github.com/stephy/CalendarPicker)
- Documentation: Documentation is available via the [repo’s readme.md on Github](https://github.com/stephy/CalendarPicker#readme). It is elaborate, shows how to install, set up, and use the library’s ‘CalendarPicker’ component, discusses all accepted props, and showcases several code examples to achieve different tasks.

- Popularity/Active community: 579 stars, 1.4k GitHub users, 38 contributors, approximately 5000 weekly downloads

- Code update frequency: Over 31 version releases. Ever since the earliest release was made on March 10, 2018, at least 5 releases are made yearly to fix bugs and update the codebase.

- Usability: Android and iOS. No time picker. Not supported by Expo. It is a good alternative if you just want a simple calendar interface for date picking across all platforms.

- Bundle Size: 99.6kb

- Reputation of creators: [Stephani Bishop](https://stephanimoroni.com/), Senior software engineer at Netflix

## Getting started with React-Native DateTimePicker
You’ve heard our take on the [React-Native DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). Now, let’s give you an overview of how you can install and use it in your project. Before you get started, ensure you have XCode >= 11.6 and React Native version 0.60 or greater.

**1. Install via npm /yarn**
```
npm install @react-native-community/datetimepicker --save
```

**2. Rebuild project**
```
npx pod-install
```

**3. Import and use**
```
import React, {useState} from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const App = () => {

const [date, setDate] = useState(new Date());

const onChange = (event, selectedDate) => {
 const currentDate = selectedDate || date;
 setDate(currentDate);
};

 return(
      <DateTimePicker
         value={date}
         onChange={onChange}
       />
 )
}
```

For more detailed instructions and examples, check out the library’s [README.md](https://github.com/react-native-datetimepicker/datetimepicker#readme)

## A React-Native date picker library for every use case
When sifting between different React-Native date picker libraries, based on factors like ease of use, active development, and popularity, then React-Native DateTimePicker is the pick of the litter.

That said, as we’ve proven with our full list of libraries, there’s no dearth of popular, efficient, and highly usable options when it comes to React Native date picker libraries — regardless of your use case.