React Native DatePicker Modal Component for iOS/Android
This project uses node and npm.
$ npm installl 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:
style
: Styles for the container ofrenderDate
.modalButtonStyle
: Styles for the modal button.modalBtnContainerStyle
: Styles for the modal button container.modalStyle
: Styles for the modal.modalOverlayStyle
: Styles for the modal overlay.
- 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