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.
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:
No single criterion can determine the best date picker for your app; you need to take all the above points into equal consideration.
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 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.
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.
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'],
},
},
};
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.
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, 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 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.
Let’s see how SolidJS props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.
We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.
We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.
Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]
Learn more →
