Managing Selection Menus and Pickers

In this lesson, you will learn how to implement selection interfaces that allow users to choose a single value from a predefined list of options.

When building forms or settings screens, you often need a way for users to select one item from a collection without typing. In React Native, the most common way to handle this is using the @react-native-picker/picker library, which provides a native UI component that mimics the standard OS selection behavior (the spinning wheel on iOS or the dropdown menu on Android).

Understanding the Picker Structure

A picker works by pairing a parent Picker component with multiple Picker.Item children. The parent manages the "active" selection through its selectedValue prop, while each child defines the display label and the underlying value that your application logic will use.

Here is a basic implementation:

import React, { useState } from 'react';
import { Picker } from '@react-native-picker/picker';

const FruitSelector = () => {
  const [fruit, setFruit] = useState('apple');

  return (
    <Picker
      selectedValue={fruit}
      onValueChange={(itemValue) => setFruit(itemValue)}
    >
      <Picker.Item label="Apple" value="apple" />
      <Picker.Item label="Banana" value="banana" />
      <Picker.Item label="Cherry" value="cherry" />
    </Picker>
  );
};

Key Considerations for Selection

1. Controlled Components: Like the text inputs you learned earlier, the picker is a controlled component. You must keep the selectedValue tied to your state so that the UI always reflects your data source.
2. User Experience: Because pickers trigger native platform interactions, ensure that they are placed in areas where a user’s touch can easily trigger the modal or menu.
3. Accessibility: Since pickers rely on system-level interactions, they automatically provide good accessibility support for screen readers, ensuring that visually impaired users can navigate through the available list of options.

When you need to collect data from a finite set of choices—like choosing a country, a date range, or a category—the picker provides a clean, native-feeling way to keep your interface tidy and user-friendly.

Key Takeaway: Use the Picker component to provide a reliable, native selection interface by mapping your data to Picker.Item nodes and maintaining the chosen state in your component’s data flow.