O'Reilly logo

React and React Native - Second Edition by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 from 'react';import PropTypes from 'prop-types';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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required