Picker and date picker in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Picker component in React Native?

A Picker is a dropdown menu that lets users select one option from a list. It looks like a spinning wheel or dropdown on mobile devices.

beginner

How do you import the DateTimePicker in React Native?

You import it from '@react-native-community/datetimepicker' package using: <br><code>import DateTimePicker from '@react-native-community/datetimepicker';</code>

beginner

What prop controls the mode of the DateTimePicker?

The mode prop controls whether the picker shows a date, time, or both. Values can be 'date', 'time', or 'datetime'.

beginner

How do you handle the selected value from a Picker?

You use the onValueChange prop to get the selected value and update your component's state to reflect the choice.

intermediate

Why should you use accessibility labels with Picker and DateTimePicker?

Accessibility labels help screen readers describe the picker to users with disabilities, making your app usable by everyone.

Which prop sets the selected value in a React Native Picker?

A currentValue

B value

C defaultValue

D selectedValue

The selectedValue prop sets the current selected option in a Picker.

What package do you install to use DateTimePicker in React Native?

A @react-native-community/datetimepicker

B react-native-picker

C react-native-datepicker

D react-native-date-picker

The official DateTimePicker is from '@react-native-community/datetimepicker'.

Which mode shows only the time in DateTimePicker?

A datetime

B date

C time

D timer

The mode 'time' shows only the time selection.

How do you open the DateTimePicker on Android?

A It opens automatically on render

B Using a button with onPress to set visibility

C By calling a show() method

D By setting a visible state and rendering conditionally

On Android, you usually control visibility with a button press that sets a state to show the picker.

Which accessibility prop helps screen readers identify a Picker?

A accessibilityLabel

B accessibilityHint

C aria-label

D accessibilityRole

The accessibilityLabel describes the Picker for screen readers.

Explain how to implement a Picker in React Native and handle user selection.

Think about how you show options and save the chosen one.

Describe how to use DateTimePicker to select a date and time in a React Native app.

Consider how you open the picker and get the chosen date or time.