This content originally appeared on DEV Community and was authored by kevbosaurus
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 and 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 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 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 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 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. 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, new versions with are released at least once every month
Usability: Supports Android, iOS, and Windows. Supported by Expo — the official toolchain for building React Native apps
Bundle Size: 188kb
Reputation of creators: Created by and actively maintained by the React Native community
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
Documentation: Documentation is hosted on the repo’s readme.md on Github. It is straightforward, covers all the basics required to install, set up, and use the
DateTimePickerModalcomponent 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 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, a software developer at inVision
React-native-date-picker
Documentation: Documentation is hosted on the repo’s readme.md on Github 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
Documentation: Documentation is available via the repo’s readme.md on Github. 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, Senior software engineer at Netflix
Getting started with React-Native DateTimePicker
You’ve heard our take on the React-Native 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
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.
This content originally appeared on DEV Community and was authored by kevbosaurus
kevbosaurus | Sciencx (2021-06-10T17:39:30+00:00) The best React Native datepicker libraries. Retrieved from https://www.scien.cx/2021/06/10/the-best-react-native-datepicker-libraries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.