Choosing the right React Native date picker

Written by Paweł Karniej✏️

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 date pickers 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 date picker for your app, you need to take all the above points into equal consideration.

Comparing 3 date picker options

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 DatePicker by xgfe

This date picker package has the most Github stars of the three options (1,800) and is the oldest date picker 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 date picker, the project’s last commit was on April 22, 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 date picker in an older project.

React Native Date Picker by Henning Hall

The 1.0.0 version of this date picker library was committed on April 8, 2018, and the last commit is from Oct. 20, 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.

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

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

---

Editor's note: Seeing something wrong with this post? You can find the correct version here.

Plug: LogRocket, a DVR for web apps

 

 
LogRocket is a frontend logging tool 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.
 
Try it for free.

---

The post Choosing the right React Native date picker appeared first on LogRocket Blog.