# React Native Date Picker [![npm](https://img.shields.io/npm/v/react-native-date-picker.svg)](https://www.npmjs.com/package/react-native-date-picker) [![Build status](https://img.shields.io/github/workflow/status/henninghall/react-native-date-picker/Android:%20build%20&%20test?label=tests)](https://github.com/henninghall/react-native-date-picker/actions) [![npm](https://img.shields.io/npm/dm/react-native-date-picker.svg)](https://www.npmjs.com/package/react-native-date-picker) This is a React Native Date Picker with following main features: 📱  Supports iOS, Android and Expo
🕑  3 different modes: Time, Date, DateTime
🌍  Various languages
🎨  Customizable
🖼  Modal or Inlined
## Modal The first option is to use the built-in modal. See code.
React Native DateTime Picker Modal iOS React Native DateTime Picker Modal Android
iOSAndroid
## Inlined The second option is to use the inlined picker. Place it in a View or a custom made modal. See code.
React Native DateTime Picker React Native Date Time Picker
iOSAndroid
## Requirements - Xcode >= 11.6 - React Native >= 0.57. - If using React Native 0.64, 0.64.2 or later must be used. - If using Expo, SDK 42 or later must be used. If using Expo SDK 44, 44.0.4 or later must be used. ## Installation If you're using expo, follow these steps instead. 1. Download package with npm or yarn ``` npm install react-native-date-picker ``` ``` yarn add react-native-date-picker ``` 2. Install pods ``` cd ios && pod install ``` 3. Rebuild the project ``` npx react-native run-android npx react-native run-ios ``` If you're having troubles after following these steps, there might be a linking issue. ## Using Expo Expo is supported by creating a custom client. 1. Create the custom client: ``` expo install react-native-date-picker expo-dev-client ``` 2. Build the app Locally ``` expo run:ios expo run:android ``` Or in the cloud ``` eas build -p all --profile development ``` If you're having troubles, read the pinned comment here. ## Example 1: Modal ```jsx import React, { useState } from 'react' import { Button } from 'react-native' import DatePicker from 'react-native-date-picker' export default () => { const [date, setDate] = useState(new Date()) const [open, setOpen] = useState(false) return ( <>