The best date pickers for your React Native app

Editor’s note: this article was updated on 30 June, 2022 to update the stats for each library, remove out-of-date or deprecated libraries, and include more popular and effective.

Today, almost every application has some kind of date or time picker implemented. We use them to set reminders, mark special dates in a calendar, set up an alarm, and much more. In this article, we’ll take a look at the available options for React Native datepickers and discuss how to choose the right one for your app.

Contents

• Choosing the right library for a React Native date picker
• The best React Native date pickers
• React Native DateTimePicker
• React Native Date Picker
• React-native-paper-dates
• React-native-modal-datetime-picker

Choosing the right library for a React Native date picker

When working with React Native, it’s often necessary to use an external core library, so it’s important to be thoughtful in choosing the correct one. When deciding whether to include a third-party library in an app you’re working on, take the following four criteria into consideration:

1. GitHub stars: if the package has only a few stars, we can neither be sure it’s reliable nor expect it to be maintained and stable for our project
2. Activity: if the package has enough GitHub stars but isn’t actively maintained, it may not be suitable. React Native is changing quickly, so we want the package that will work best with the newest version of the framework (be sure to check the last commit date)
3. Main maintainer: it is also important to determine who is the main maintainer of the library. For example, if the package lacks GitHub stars but is maintained by the React Native community (a community of talented and trusted developers involved in creating and expanding the framework), we can have more confidence in the package than if it was some unknown person’s work
4. README: a great README file can make a good library even stronger. This is especially crucial given the fast-paced development of React Native. Look there for information about support for the newest React Native versions

No single criterion can determine the best date picker for your app; you need to take all the above points into equal consideration.

The best React Native date pickers

I’ve searched through all the available options and narrowed the list down to three date pickers. Let’s explore them in detail.

React Native DateTimePicker

React Native DateTimePicker is implemented in accordance with iOS and Android development guidelines and uses its native system components under the hood.

This package is also actively maintained by the React Native community, which is responsible for the best available open-source libraries in React Native. At the time of writing, the last commit was made in April 2022.

This package has a descriptive README and is up to date with one of the newest React Native versions. This makes it one of the strongest candidates if you’re looking for a date and time picker with a native feel for your app.

Here’s what the date picker looks like:

And the time picker:

This library has a ton of features, and available props are outlined in the README. It has a simple installation guide and a helpful example usage section.

React Native Date Picker

The 1.0.0 version of this date picker library was committed on April 8, 2018, and the last commit is from June 2022, which means it’s still being actively maintained. This makes it a good candidate for testing.

I chose this library because it allows you to keep a consistent look across Android and iOS. Although it isn’t a popular solution, Henning Hall created a custom component for Android and made it look identical to the native iOS picker.

In my experience, when building cross-platform React Native apps, some clients focus more on iOS before building an Android version of their app. Therefore, it often makes sense to build the entire app with an iOS-like appearance, and this package is great for that. It also has a helpful README.

React-native-paper-dates

If you’re using React Native Paper or are in the market for a versatile cross-platform Material Design date picker, react-native-paper-dates is worth checking out.

React Native Paper Dates comes with single date, range of dates, and a multiple dates picker options for their modal, along with a text input option.

You need to install React Native Paper to use this library, so if you’re not using it in your project, but want to use this date picker, I would recommend using their babel plugin. It will reduce the bundle size by excluding modules you don’t use. All you need to do is update your babel config file – babel.config.js or babelrc – to look something like this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

React-native-modal-datetime-picker

Last, but certainly not least, react-native-modal-datetime-picker has 2.5K GitHub stars and over 150k weekly downloads.

It is actively maintained and uses React Native DateTimePicker under the hood so supports all of their props while providing an improved developer experience.

Summary

Among the date picker options described above, all have unique strengths and weaknesses, and your choice should be based on your app’s particular needs and goals.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

That said, if you’re looking for a package that’s actively maintained and supported, and can help you achieve the look and feel of native iOS and Android apps, you may want to consider the first option, React Native DateTimePicker. Not only does it provide a native user experience, but it is also supported by the fantastic React Native community.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.