Paweł Karniej Self-made developer specializing in building React Native apps. IG: @selfmadedeveloper

Choosing the right React Native datepicker

2 min read 813

Choosing the Right React Native Date Picker

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, etc. 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.

Choosing the right library

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 one criterion can determine the best datepicker for your app; you need to take all the above points into equal consideration.

Comparing 3 datepicker options

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

React Native DatePicker by xgfe

This datepicker package has the most GitHub stars of the three options (1,800) and is the oldest datepicker on the list. It was uploaded to Github four years ago and until recently was the most-used picker in the React Native project.

Although there are still valid use cases for this datepicker, the project’s last commit was on 22 April 2018, and it’s no longer maintained. This package also uses DatePickerIOS, TimePickerAndroid, and DatePickerAndroid React Native modules, which have been deprecated in the latest versions and merged into one DateTimePicker module.

For these reasons, I do not recommend using this package in newer React Native projects. However, it still may be usable if you need to add support for a datepicker in an older project.

React Native Date Picker by Henning Hall

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

I chose this library because it’s quite different from the others listed above. 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.

React Native Date Picker for Android App Designed With Native iOS Feel

We made a custom demo for .
No really. Click here to check it out.

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 DateTimePicker by react-native-community

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 on Sept. 18.

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 datepicker looks like:

Date Pickers, iOS Versus Android

And the time picker:

Time Pickers, iOS Versus AndroidThis 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.


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

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, the best package is the third option, React Native DateTimePicker. Not only does it provide a native user experience, but it is also supported by the fantastic React Native community.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Full visibility into your web apps

    LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

    In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

    Paweł Karniej Self-made developer specializing in building React Native apps. IG: @selfmadedeveloper

    Leave a Reply