Switch and checkbox patterns in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Switch component used for in React Native?

A Switch is used to toggle between two states, like ON and OFF, similar to a light switch in real life. It is often used for settings that can be enabled or disabled.

beginner

How does a Checkbox differ from a Switch in mobile apps?

A Checkbox allows multiple selections and shows a checkmark when selected. A Switch is usually for a single binary choice. Checkboxes are often used in lists or forms.

beginner

Which React Native component is used to create a toggle switch?

The Switch component is used to create a toggle switch in React Native.

intermediate

How do you handle the state of a Switch or Checkbox in React Native?

You use React's useState hook to keep track of whether the Switch or Checkbox is ON or OFF, and update the state when the user toggles it.

intermediate

Why is accessibility important for Switch and Checkbox components?

Accessibility ensures that all users, including those using screen readers or keyboard navigation, can understand and interact with the Switch or Checkbox. This includes proper labels and focus management.

Which React Native component is best for a binary ON/OFF setting?

A Button

B Checkbox

C TextInput

D Switch

The Switch component is designed for binary ON/OFF toggles.

What hook is commonly used to manage the state of a Switch in React Native?

A useState

B useEffect

C useContext

D useRef

useState is used to store and update the toggle state.

Which property controls the current value of a Switch in React Native?

A selected

B checked

C value

D onValueChange

The 'value' prop sets whether the Switch is ON (true) or OFF (false).

What visual indicator does a Checkbox show when selected?

A A toggle switch

B A checkmark

C A filled circle

D A cross mark

Checkboxes show a checkmark when selected.

Why should Switch and Checkbox components have accessible labels?

A To help screen reader users understand their purpose

B To prevent user clicks

C To change colors automatically

D To improve app speed

Accessible labels help users with disabilities know what the control does.

Explain how you would implement a Switch in React Native to toggle a setting.

Think about how to store the ON/OFF state and update it when the user taps the switch.

Describe the differences between Switch and Checkbox components and when to use each.

Consider real-life examples like turning a light on/off versus selecting multiple items in a list.