Collecting date/time input
In this final section of the chapter, you'll learn how to implement date/time pickers. React Native has independent date/time picker components for iOS and Android, which means that it is up to you to handle the cross-platform differences between the components.
So, let's start with a date picker component for iOS:
import React, { PropTypes } from 'react'; import { Text, View, DatePickerIOS, } from 'react-native'; import styles from './styles'; // A simple abstraction that adds a label to // the "<DatePickerIOS>" component. const DatePicker = (props) => ( <View style={styles.datePickerContainer}> <Text style={styles.datePickerLabel}> {props.label} </Text> <DatePickerIOS mode="date" {...props} /> </View> ); DatePicker.propTypes = { label: PropTypes.string, }; export default DatePicker;
There's not a lot...