In web applications, you typically use the <select> element to let the user choose from a list of options. React Native comes with a <Picker> component that works on both iOS and Android. There is some trickery involved with styling this component, so let's hide all of this inside of a generic Select component:
import React, { PropTypes } from 'react';
import {
View,
Picker,
Text,
} from 'react-native';
import styles from './styles';
// The "<Select>" component provides an
// abstraction around the "<Picker>" component.
// It actually has two outer views that are
// needed to get the styling right.
const Select = props => (
<View style={styles.pickerHeight}>
<View style={styles.pickerContainer}>
{/* The label for the picker... */}
<Text style={styles.pickerLabel}>
{props.label} ...