Switch and checkbox patterns in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Toggle Switch State Update

What will be the value of isEnabled after toggling the switch once in this React Native component?

React Native

import React, { useState } from 'react';
import { Switch, View, Text } from 'react-native';

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View>
      <Switch onValueChange={toggleSwitch} value={isEnabled} />
      <Text>{isEnabled ? 'On' : 'Off'}</Text>
    </View>
  );
}

A false

B true

C undefined

D null

💡 Hint

The toggleSwitch function flips the current boolean state.

The initial state is false. Toggling once flips it to true, so the switch value becomes true.

📝 Syntax

intermediate

Correct Checkbox State Handling

Which option correctly updates the checkbox state when the user taps it in React Native?

React Native

import React, { useState } from 'react';
import { CheckBox, View } from 'react-native';

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <View>
      <CheckBox
        value={checked}
        onValueChange={/* Which option here? */}
      />
    </View>
  );
}

A (newValue) => setChecked(newValue)

B () => setChecked(undefined)

C () => setChecked(checked)

D () => setChecked(!checked)

💡 Hint

The onValueChange handler receives the new boolean value.

The onValueChange callback provides the new checked value. Using it directly updates state correctly.

❓ lifecycle

advanced

Switch State Persistence on Re-render

Given this component, what will be the displayed text after pressing the switch twice?

React Native

import React, { useState } from 'react';
import { Switch, View, Text } from 'react-native';

export default function App() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(!isOn);
  };

  return (
    <View>
      <Switch value={isOn} onValueChange={toggle} />
      <Text>{isOn ? 'Enabled' : 'Disabled'}</Text>
    </View>
  );
}

A Disabled

B Enabled

C undefined

D Error

💡 Hint

Each toggle flips the boolean state.

Starting false, first toggle sets true, second toggle sets false again, so text shows 'Disabled'.

❓ navigation

advanced

Checkbox State and Navigation Behavior

In a React Native app using React Navigation, if a checkbox state is stored locally in a screen component, what happens to the checkbox state when navigating away and back to that screen?

A The checkbox state causes a navigation error on return.

B The checkbox state persists automatically without extra code.

C The checkbox state is shared across all screens automatically.

D The checkbox state resets to its initial value each time the screen is visited.

💡 Hint

Local state in a component resets when the component unmounts and remounts.

When navigating away, the screen unmounts by default, so local state resets on return unless stored globally or persisted.

🔧 Debug

expert

Why does this Switch not toggle visually?

This React Native Switch component does not visually toggle when pressed. What is the cause?

React Native

import React, { useState } from 'react';
import { Switch, View } from 'react-native';

export default function App() {
  const [enabled, setEnabled] = useState(false);

  return (
    <View>
      <Switch
        value={enabled}
        onValueChange={() => setEnabled(enabled)}
      />
    </View>
  );
}

A The useState hook is missing an initial value.

B The Switch component requires a different prop name than value.

C The onValueChange handler sets the state to the current value, so no change occurs.

D The Switch component must be wrapped in a TouchableOpacity.

💡 Hint

Check what value is passed to setEnabled inside onValueChange.

The handler sets state to the same value, so the state never changes and the switch never visually toggles.