react-native-datepicker-modal

React Native DatePicker Modal Component for iOS/Android

Table of Contents

• Install
• Usage
• Properties
• Contribute
• License

Install

This project uses node and npm.

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

Usage

1import React from 'react'
2import { StyleSheet, Text } from 'react-native'
3
4import ModalDatePicker from 'react-native-datepicker-modal'
5
6import colors from './config/colors'
7import spacing from './config/spacing'
8import fontSize from './config/fontSize'
9
10const DatePicker = ({ style, ...props }) => (
11  <ModalDatePicker
12    style={[styles.container, style]}
13    renderDate={({ year, month, day, date }) => {
14      if (!date) {
15        return <Text style={[styles.text, styles.placeholderText]}>Date of birth</Text>
16      }
17
18      const dateStr = `${day}-${month}-${year}`
19      return <Text style={styles.text}>{dateStr}</Text>
20    }}
21    {...props}
22  />
23)
24
25const styles = StyleSheet.create({
26  container: {
27    backgroundColor: colors.white,
28    borderBottomColor: colors.gray.veryLight,
29    borderBottomWidth: 1,
30    marginVertical: spacing[1],
31    marginHorizontal: spacing[0],
32    justifyContent: 'center',
33    borderRadius: 2,
34    height: 50
35  },
36  placeholderText: {
37    color: colors.gray.light
38  },
39  text: {
40    width: '100%',
41    paddingHorizontal: spacing[1],
42    paddingVertical: spacing[0],
43    fontFamily: 'Montserrat',
44    fontSize: fontSize.medium,
45    color: colors.gray.dark
46  }
47})
48
49export default DatePicker
50

Properties

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

renderDate

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

startDate

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

onError

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

onDateChanged

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

minDate

Minimum date that can be selected.

maxDate

Maximum date that can be selected.

modalButtonText

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

Styling

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.

Example:

1<resources xmlns:tools="http://schemas.android.com/tools">
2
3    <!-- Base application theme. -->
4    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
5        <!-- Customize your theme here. -->
6        <item name="android:datePickerDialogTheme">@style/Picker.Theme</item>
7    </style>
8
9    <style name="Picker.Theme" parent="Theme.AppCompat.Light.Dialog">
10        <item name="colorPrimary">#3F51B5</item>
11        <item name="colorPrimaryDark">#303F9F</item>
12        <item name="colorAccent">#448AFF</item>
13        <item name="android:textColorPrimary">#212121</item>
14    </style>
15
16</resources>

Contribute

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

License

MIT