Build: Settings Screen

A simple settings screen with a switch and a checkbox to toggle preferences.

Target UI

Settings Screen

[ ] Enable Notifications

Switch: Dark Mode [ ON ]

Add a checkbox labeled 'Enable Notifications' that toggles on/off

Add a switch labeled 'Dark Mode' that toggles on/off

Display the current state of both controls below them as text

Use React Native components and hooks

Starter Code

React Native

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

export default function SettingsScreen() {
  // TODO: Add state hooks for checkbox and switch

  return (
    <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      {/* TODO: Add checkbox component here */}

      {/* TODO: Add switch component here */}

      {/* TODO: Show current states here */}
    </View>
  );
}

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function SettingsScreen() {
  const [notificationsEnabled, setNotificationsEnabled] = useState(false);
  const [darkModeEnabled, setDarkModeEnabled] = useState(false);

  const toggleNotifications = () => setNotificationsEnabled(prev => !prev);
  const toggleDarkMode = () => setDarkModeEnabled(prev => !prev);

  return (
    <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      <TouchableOpacity
        onPress={toggleNotifications}
        style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}
        accessibilityRole="checkbox"
        accessibilityState={{ checked: notificationsEnabled }}
        accessibilityLabel="Enable Notifications"
      >
        <View
          style={{
            height: 24,
            width: 24,
            borderWidth: 2,
            borderColor: '#333',
            backgroundColor: notificationsEnabled ? '#333' : 'transparent',
            marginRight: 10,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          {notificationsEnabled && (
            <Text style={{ color: 'white', fontWeight: 'bold' }}>✓</Text>
          )}
        </View>
        <Text style={{ fontSize: 18 }}>Enable Notifications</Text>
      </TouchableOpacity>

      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text style={{ fontSize: 18, marginRight: 10 }}>Dark Mode</Text>
        <Switch
          value={darkModeEnabled}
          onValueChange={toggleDarkMode}
          accessibilityLabel="Dark Mode"
        />
      </View>

      <Text style={{ fontSize: 16, marginBottom: 5 }}>
        Notifications are {notificationsEnabled ? 'ON' : 'OFF'}
      </Text>
      <Text style={{ fontSize: 16 }}>
        Dark Mode is {darkModeEnabled ? 'ON' : 'OFF'}
      </Text>
    </View>
  );
}

We use useState to keep track of the checkbox and switch states. The checkbox is built using a TouchableOpacity with a square box that fills with a checkmark when enabled. The switch uses React Native's built-in Switch component. Accessibility roles and labels are added for screen readers. The current states are shown below as simple text to confirm the toggles work.

Final Result

Completed Screen

Settings Screen

[✓] Enable Notifications

Dark Mode: [ ON ]

Notifications are ON
Dark Mode is ON

Tap the checkbox area to toggle notifications on or off

Toggle the switch to turn dark mode on or off

Text below updates to show current states

Stretch Goal

Add a reset button that sets both toggles back to OFF

💡 Hint

Use a Button component and set both states to false on press