React and React Native

Selecting from a list of options

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