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.

Practice

1. What is the main purpose of a Picker component in React Native?

easy

A. To input text data

B. To display images in a gallery

C. To play audio files

D. To let users select one option from a list

Solution

1. Step 1: Understand Picker usage

   A Picker is designed to show a list of options for the user to choose from.

2. Step 2: Compare with other components

   Other options like text input or image gallery serve different purposes, not selection from a list.

3. Final Answer:

   To let users select one option from a list -> Option D

4. Quick Check:

   Picker = select one option [OK]

Hint: Picker is for choosing one item from many [OK]

Common Mistakes:

• Confusing Picker with text input
• Thinking Picker plays media
• Assuming Picker shows images

2. Which of the following is the correct way to import the Picker component from @react-native-picker/picker?

easy

A. import { Picker } from 'react-native';

B. import Picker from '@react-native-picker/picker';

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

D. import Picker from 'react-native-picker';

Solution

1. Step 1: Check official import syntax

   The Picker is exported as a named export from '@react-native-picker/picker', so curly braces are needed.

2. Step 2: Eliminate incorrect imports

   Default import from the correct package or imports from wrong packages are incorrect.

3. Final Answer:

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

4. Quick Check:

   Named import with braces [OK]

Hint: Use curly braces for named imports like Picker [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong package
• Missing curly braces around Picker

3. Given this code snippet, what will be displayed when the user selects "Banana" from the Picker?

const [fruit, setFruit] = useState('Apple');

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

<Text>Selected fruit: {fruit}</Text>

medium

A. Selected fruit: Banana

B. Selected fruit: undefined

C. Selected fruit: Cherry

D. Selected fruit: Apple

Solution

1. Step 1: Understand state update on selection

   The onValueChange calls setFruit with the selected value, updating the fruit state.

2. Step 2: Check selected value after choosing Banana

   When Banana is selected, fruit becomes 'Banana', so the Text shows 'Selected fruit: Banana'.

3. Final Answer:

   Selected fruit: Banana -> Option A

4. Quick Check:

   State updates to selected value = Banana [OK]

Hint: Selected value updates state shown in Text [OK]

Common Mistakes:

• Assuming state does not update on selection
• Confusing label and value
• Expecting default value always

4. Identify the error in this DatePicker usage:

const [date, setDate] = useState(new Date());

<DatePicker
  value={date}
  onChange={(event, selectedDate) => setDate(selectedDate)}
/>

medium

A. The 'value' prop should be 'date' instead of 'value'

B. The DatePicker component requires 'mode' prop

C. The 'onChange' callback parameters are incorrect

D. The 'setDate' function should not be called inside 'onChange'

Solution

1. Step 1: Review DatePicker required props

   React Native DatePicker requires a 'mode' prop like 'date' or 'time' to work properly.

2. Step 2: Check other props correctness

   'value' and 'onChange' usage is correct; 'setDate' is correctly called to update state.

3. Final Answer:

   The DatePicker component requires 'mode' prop -> Option B

4. Quick Check:

   Missing required 'mode' prop [OK]

Hint: DatePicker needs 'mode' prop to work [OK]

Common Mistakes:

• Omitting 'mode' prop causes no date shown
• Confusing 'value' with 'selected' prop
• Ignoring event parameter in onChange

5. You want to create a form with a Picker for selecting a country and a DatePicker for selecting a birthdate. How do you ensure the UI updates correctly when the user changes either input?

hard

A. Use separate state variables for country and birthdate, update each on change

B. Use a single state object and never update it

C. Only update state when the form is submitted

D. Use refs instead of state to track selections

Solution

1. Step 1: Manage state for each input separately

   Use one state variable for country and another for birthdate to track changes independently.

2. Step 2: Update state on user interaction

   Update the corresponding state in onValueChange for Picker and onChange for DatePicker to reflect UI changes.

3. Final Answer:

   Use separate state variables for country and birthdate, update each on change -> Option A

4. Quick Check:

   Separate states updated on change [OK]

Hint: Track each input with its own state variable [OK]

Common Mistakes:

• Using one state object but not updating it
• Delaying state update until submit
• Using refs instead of state for UI updates