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, which works on both iOS and Android, but in terms of reducing the React Native app size, the Meta team decided to delete it in future releases and extract Picker
to its own package. To use that package, firstly, we install it in a clean project by running this command:
npx expo install @react-native-picker/picker
There is some trickery involved with styling this component based on which platform the user is on, so let’s hide all of this inside a generic Select
component. Here’s the Select.ios.js
module:
export default function Select(props: SelectProps) {
return (
<View style={styles.pickerHeight}>
<View style={styles.pickerContainer}>
<Text style={styles.pickerLabel}>{props.label}</Text>
<Picker style={styles.picker...