Picker and date picker in React Native - Mini App: Build & Ship

Build: Picker and DatePicker Screen

This screen lets the user select a fruit from a dropdown and pick a date using a date picker. The selected fruit and date are shown below the pickers.

Target UI

-------------------------
| Select a fruit:       |
| [Picker ▼]            |
|                       |
| Select a date:        |
| [Date Picker Button]  |
|                       |
| Selected fruit:       |
| [fruit name]          |
| Selected date:        |
| [date in YYYY-MM-DD]  |
-------------------------

Add a Picker with at least 3 fruit options: Apple, Banana, Cherry

Add a button that opens a date picker modal

Show the selected fruit below the picker

Show the selected date below the date picker in YYYY-MM-DD format

Use React Native's built-in components and community date picker

Ensure the UI updates when selections change

Starter Code

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 PickerDatePickerScreen() {
  const [selectedFruit, setSelectedFruit] = useState('Apple');
  const [date, setDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);

  // TODO: Add picker and date picker UI here

  return (
    <View style={{ padding: 20 }}>
      {/* TODO: Add Picker component here */}

      {/* TODO: Add button to open date picker here */}

      {/* TODO: Show selected fruit and date here */}
    </View>
  );
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

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 PickerDatePickerScreen() {
  const [selectedFruit, setSelectedFruit] = useState('Apple');
  const [date, setDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);

  const onChange = (event, selectedDate) => {
    setShowDatePicker(Platform.OS === 'ios');
    if (selectedDate) {
      setDate(selectedDate);
    }
  };

  const formattedDate = date.toISOString().split('T')[0];

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ marginBottom: 8, fontWeight: 'bold' }}>Select a fruit:</Text>
      <Picker
        selectedValue={selectedFruit}
        onValueChange={(itemValue) => setSelectedFruit(itemValue)}
        style={{ marginBottom: 20 }}
        accessibilityLabel="Fruit picker"
      >
        <Picker.Item label="Apple" value="Apple" />
        <Picker.Item label="Banana" value="Banana" />
        <Picker.Item label="Cherry" value="Cherry" />
      </Picker>

      <Text style={{ marginBottom: 8, fontWeight: 'bold' }}>Select a date:</Text>
      <Button title="Pick a date" onPress={() => setShowDatePicker(true)} accessibilityLabel="Open date picker" />

      {showDatePicker && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={onChange}
          maximumDate={new Date(2100, 12, 31)}
          minimumDate={new Date(1900, 0, 1)}
          accessibilityLabel="Date picker"
        />
      )}

      <View style={{ marginTop: 30 }}>
        <Text style={{ fontWeight: 'bold' }}>Selected fruit:</Text>
        <Text>{selectedFruit}</Text>

        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Selected date:</Text>
        <Text>{formattedDate}</Text>
      </View>
    </View>
  );
}

This solution uses React Native's Picker from '@react-native-picker/picker' to let the user select a fruit. The selected fruit is stored in state and updated on change.

For the date picker, it uses '@react-native-community/datetimepicker'. A button toggles the visibility of the date picker modal. When the user picks a date, the state updates and the picker closes (except on iOS where it stays open).

The selected fruit and date are displayed below the controls. The date is formatted as YYYY-MM-DD using toISOString().split('T')[0].

Accessibility labels are added for screen readers. The UI uses simple Text and Button components with spacing for clarity.

Final Result

Completed Screen

-------------------------
| Select a fruit:       |
| [Apple ▼]             |
|                       |
| Select a date:        |
| [Pick a date]         |
|                       |
| Selected fruit:       |
| Apple                 |
| Selected date:        |
| 2024-06-15            |
-------------------------

Tapping the picker opens a dropdown to select Apple, Banana, or Cherry.

Tapping 'Pick a date' opens the native date picker modal.

Selecting a date updates the displayed date below.

Changing the fruit updates the displayed fruit below.

Stretch Goal

Add a reset button that sets the fruit back to 'Apple' and date to today.

💡 Hint

Add a Button labeled 'Reset' that calls setSelectedFruit('Apple') and setDate(new Date()) when pressed.