React Native Material date picker component

React Native Material Date Picker Component

Today I Share a Material Date Picker Component for react-native.
Which is very easy to use.


  • Easy usage.
  • Material design.
  • Easy localizable.


date Picker

Installation And Usage

Install Using NPM Or YARN.

npm install --save react-native-material-date-picker


yarn add react-native-material-date-picker


import { ModalDatePicker } from "react-native-material-date-picker";

const App = () => {
  return (             
      <View style={{flex: 1, alignSelf: 'stretch'}}>
            button={<Text> Open </Text>} 
            onSelect={(date) => console.log(date) }
            initialDate={new Date()}
            language={require('./locales/en.json')}. # Your localization file

Available Config

LocalestringenLanguage of the picker
colorstring#00B0FFThe selected date color
stylestyleStyle of the picker container
onSelectfunctionRun after selection of a date
onForwardfunctionRun after go forward a day
onBackfunctionRun after go back a day
onHiddenfunctionRun after hidden the picker (only ModalDatePicker)
isHideOnSelectbooleanfalseDetermines whether the modal will be closed (only ModalDatePicker)
initialDateDateNowThe initial date (only ModalDatePicker)
languageJSON FileYour custom language file for months and days

Dependency for Material Date Picker

There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli), for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

Download Now

React Native Material date picker component.Zip


Send download link to:


If You Have Any Problem Or Doubts,
Please Do Ask Or Suggest In Comment.

Do Follow Us on:

Also CheckOut: How to Connect and Handle Files in FTP Server using PHP?

About: Aakash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

    2 thoughts on “React Native Material date picker component”

    Leave a Reply

    %d bloggers like this: