React and React Native

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 ...