# react-native-modal-datetime-picker [![npm version](https://badge.fury.io/js/react-native-modal-datetime-picker.svg)](https://badge.fury.io/js/react-native-modal-datetime-picker) ![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg) A declarative cross-platform react-native date and time picker.

This library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal, providing a unified user and developer experience. Under the hood, this library is using [`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker). ## Setup (for non-Expo projects) If your project is not using [Expo](https://expo.io/), install the library and the community date/time picker using npm or yarn: ```bash # using npm $ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker # using yarn $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker ``` Please notice that the `@react-native-community/datetimepicker` package is a native module so [**it might require manual linking**](https://github.com/react-native-community/react-native-datetimepicker#getting-started). ## Setup (for Expo projects) If your project is using [Expo](https://expo.io/), install the library and the community date/time picker using the [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/): ```bash npx expo install react-native-modal-datetime-picker @react-native-community/datetimepicker ``` To ensure the picker theme respects the device theme, you should also configure the appearance styles in your `app.json` this way: ```json { "expo": { "userInterfaceStyle": "automatic" } } ``` Refer to the [Appearance](https://docs.expo.io/versions/latest/sdk/appearance/) documentation on [Expo](https://expo.io/) for more info. ## Usage ```javascript import React, { useState } from "react"; import { Button, View } from "react-native"; import DateTimePickerModal from "react-native-modal-datetime-picker"; const Example = () => { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const showDatePicker = () => { setDatePickerVisibility(true); }; const hideDatePicker = () => { setDatePickerVisibility(false); }; const handleConfirm = (date) => { console.warn("A date has been picked: ", date); hideDatePicker(); }; return (

	Stars	Issues	Version	Updated	Created
react-native-datepicker	2,119	286	1.7.2	6 years ago	8 years ago
react-native-modal-datetime-picker	2,912	25	17.1.0	8 months ago	8 years ago
react-native-picker	1,741	208	4.3.7	6 years ago	8 years ago

react-native-datepicker vs react-native-modal-datetime-picker vs react-native-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past