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:
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:
import React from "react"; import { View, Text } from "react-native"; import { Picker } from "@react-native-picker/picker"; import styles from "./styles"; export default function Select(props) { return ( ...