Picker and date picker in React Native

Introduction

Pickers let users choose one option from a list easily. Date pickers help users select a date without typing.

When you want users to select their favorite fruit from a list.

When users need to pick their birthdate in a form.

When choosing a time or date for an appointment.

When selecting a country or city from many options.

Syntax

React Native

import { Picker } from '@react-native-picker/picker';
import DateTimePicker from '@react-native-community/datetimepicker';

// Picker example
<Picker
  selectedValue={selectedValue}
  onValueChange={(itemValue) => setSelectedValue(itemValue)}>
  <Picker.Item label="Option 1" value="1" />
  <Picker.Item label="Option 2" value="2" />
</Picker>

// DateTimePicker example
<DateTimePicker
  value={date}
  mode="date"
  display="default"
  onChange={onChange}
/>

Picker needs a selectedValue and onValueChange to work.

DateTimePicker needs a date value and an onChange handler.

Examples

This picker lets users choose between Apple and Banana.

React Native

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

<Picker
  selectedValue={fruit}
  onValueChange={setFruit}>
  <Picker.Item label="Apple" value="apple" />
  <Picker.Item label="Banana" value="banana" />
</Picker>

This date picker shows a spinner to pick a date.

React Native

import DateTimePicker from '@react-native-community/datetimepicker';

<DateTimePicker
  value={new Date()}
  mode="date"
  display="spinner"
  onChange={(event, selectedDate) => setDate(selectedDate)}
/>

Sample App

This app shows a fruit picker and a button to open a date picker. The selected fruit and date appear below.

React Native

import React, { useState } from 'react';
import { View, Text, Button, Platform } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  const [fruit, setFruit] = useState('apple');
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 10 }}>Pick a fruit:</Text>
      <Picker
        selectedValue={fruit}
        onValueChange={(itemValue) => setFruit(itemValue)}
        accessibilityLabel="Fruit picker"
      >
        <Picker.Item label="Apple" value="apple" />
        <Picker.Item label="Banana" value="banana" />
        <Picker.Item label="Orange" value="orange" />
      </Picker>

      <Text style={{ fontSize: 18, marginVertical: 10 }}>Selected fruit: {fruit}</Text>

      <Button onPress={() => setShow(true)} title="Pick a date" accessibilityLabel="Show date picker" />

      {show && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={onChange}
          accessibilityLabel="Date picker"
        />
      )}

      <Text style={{ fontSize: 18, marginTop: 10 }}>
        Selected date: {date.toDateString()}
      </Text>
    </View>
  );
}

Important Notes

Picker works well for short lists. For long lists, consider searchable dropdowns.

DateTimePicker behaves differently on iOS and Android; test on both.

Always provide accessibility labels for better user experience.

Summary

Pickers let users select one option from a list easily.

Date pickers help users choose dates without typing.

Use state to track selected values and update UI accordingly.