React Native DatePicker Modal Component for iOS/Android

react-native-datepicker-modal. React Native DatePicker Modal Component for iOS/Android


This project uses node and npm.

$ npm install react-native-datepicker-modal
$ # OR
$ yarn add react-native-datepicker-modal


import React from 'react'
import { StyleSheet, Text } from 'react-native'

import ModalDatePicker from 'react-native-datepicker-modal'

import colors from './config/colors'
import spacing from './config/spacing'
import fontSize from './config/fontSize'

const DatePicker = ({ style, ...props }) => (
    style={[styles.container, style]}
    renderDate={({ year, month, day, date }) => {
      if (!date) {
        return <Text style={[styles.text, styles.placeholderText]}>Date of birth</Text>

      const dateStr = `${day}-${month}-${year}`
      return <Text style={styles.text}>{dateStr}</Text>

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    borderBottomColor: colors.gray.veryLight,
    borderBottomWidth: 1,
    marginVertical: spacing[1],
    marginHorizontal: spacing[0],
    justifyContent: 'center',
    borderRadius: 2,
    height: 50
  placeholderText: {
    color: colors.gray.light
  text: {
    width: '100%',
    paddingHorizontal: spacing[1],
    paddingVertical: spacing[0],
    fontFamily: 'Montserrat',
    fontSize: fontSize.medium,
    color: colors.gray.dark

export default DatePicker


Component accepts the following propeties. Please see propTypes for more detail.


Function to render Component for date. Receives object with selected date, year, day and month.


Start date for DatePicker (Default: Current Date new Date()).


Function called with error argument if there is error setting date.


Function called when new date has been selected. Receives object with selected date, year, day and month.


Minimum date that can be selected.


Maximum date that can be selected.


Text string for the iOS modal button (default: “Done”)


Styling for different sub-components can also be configured:

Name Description
style Styles for the container of renderDate
modalButtonStyle Styles for the modal button on iOS
modalBtnContainerStyle Styles for the modal button container on iOS
modalStyle Styles for the modal on iOS
modalOverlayStyle Styles for the modal overlay on iOS

Styling on Android:

We use DatePickerAndroid is and API for the native DatePicker Android module and this cannot be directly styled through JS props like real React Native components.

However, you can style the native android modules by changing the styles.xml in your android folder. It is located at android/app/src/main/res/values/styles.xml relative to your react-native project.


<resources xmlns:tools="">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:datePickerDialogTheme">@style/Picker.Theme</item>

    <style name="Picker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="colorAccent">#448AFF</item>
        <item name="android:textColorPrimary">#212121</item>



  1. Fork it and create your feature branch: git checkout -b my-new-feature
  2. Commit your changes: git commit -am ‘Add some feature’ 3.Push to the branch: git push origin my-new-feature
  3. Submit a pull request

Download Details:

Author: tiaanduplessis


#react-native #programming

React Native DatePicker Modal Component for iOS/Android
22.10 GEEK