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 }) => (
<ModalDatePicker
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>
}}
{...props}
/>
)
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.
Example:
<resources xmlns:tools="http://schemas.android.com/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>
<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>
</style>
</resources>
- Fork it and create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature' 3.Push to the branch: git push origin my-new-feature
- Submit a pull request
MIT