Switch and checkbox patterns in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Switch component from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ASwitch

BButton

CTextInput

DView

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Button instead of Switch.

Forgetting to import Switch at all.

The Switch component is imported from react-native to create toggle switches.

2fill in blank

medium

Complete the code to set the initial state for a checkbox using React useState hook.

React Native

const [isChecked, [1]] = React.useState(false);

Drag options to blanks, or click blank then click option'

AsetChecked

BsetIsChecked

CtoggleChecked

DcheckedSetter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a setter name that does not match the state variable.

Using a name that does not start with 'set'.

The setter function for isChecked state is conventionally named setIsChecked.

3fill in blank

hard

Fix the error in the Switch component to update the state when toggled.

React Native

<Switch value={isEnabled} onValueChange=[1] />

Drag options to blanks, or click blank then click option'

AtoggleIsEnabled()

BsetIsEnabled

C(value) => setIsEnabled(value)

D() => setIsEnabled(!isEnabled)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function directly without argument.

Calling the setter function immediately instead of passing a function.

The onValueChange handler receives the new value and should update the state accordingly using (value) => setIsEnabled(value).

4fill in blank

hard

Fill both blanks to create a checkbox using a Pressable and a conditional checkmark.

React Native

const [checked, setChecked] = React.useState(false);

<Pressable onPress={() => setChecked([1])}>
  {checked && <Text>[2]</Text>}
</Pressable>

Drag options to blanks, or click blank then click option'

A!checked

Bchecked

C✓

DX

Attempts:

3 left

💡 Hint

Common Mistakes

Setting state to true always instead of toggling.

Using wrong symbol for checkmark.

Pressing toggles the checked state by setting it to the opposite (!checked). The checkmark symbol '✓' is shown when checked is true.

5fill in blank

hard

Fill all three blanks to create a controlled Switch with label and accessibility.

React Native

const [isOn, setIsOn] = React.useState(false);

<View accessible accessibilityLabel=[1]>
  <Text>[2]</Text>
  <Switch value={isOn} onValueChange=[3] />
</View>

Drag options to blanks, or click blank then click option'

A"Toggle setting"

B"Enable feature"

C(value) => setIsOn(value)

D() => setIsOn(!isOn)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-descriptive accessibility label.

Not updating state correctly in onValueChange.

The accessibilityLabel describes the switch for screen readers, so use a descriptive string like "Toggle setting". The label text should describe the switch, e.g. "Enable feature". The onValueChange handler updates the state with the new value.