# 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/actions/workflow/status/henninghall/react-native-date-picker/push-main.yml?branch=master&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. ## Expo - ✅ You can use this library with [Development Builds](https://docs.expo.dev/development/introduction/). No config plugin is required. - ❌ This library can't be used in the "Expo Go" app because it [requires custom native code](https://docs.expo.dev/workflow/customizing/). ## Installation 1. Download package ```sh # npm npm install react-native-date-picker # yarn yarn add react-native-date-picker # pnpm pnpm add react-native-date-picker ``` 2. Install pods (skip for expo projects) ``` cd ios && pod install ``` 3. Rebuild the project ```sh # expo projects npx expo run:android npx expo run:ios # non-expo projects 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. ## 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 ( <>