Switch and checkbox patterns in React Native

Introduction

Switches and checkboxes let users turn options on or off easily. They help make apps interactive and clear.

To let users enable or disable settings like notifications or dark mode.

To select multiple options from a list, like choosing favorite fruits.

To confirm choices, such as agreeing to terms and conditions.

To toggle features on or off, like turning on location services.

To quickly show a yes/no or true/false choice in forms.

Syntax

React Native

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

function MyComponent() {
  const [isSwitchOn, setIsSwitchOn] = useState(false);
  const [isChecked, setIsChecked] = useState(false);

  return (
    <View>
      <Switch
        value={isSwitchOn}
        onValueChange={setIsSwitchOn}
      />
      <Pressable
        onPress={() => setIsChecked(!isChecked)}
        style={{
          width: 44,
          height: 44,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <View
          style={{
            width: 24,
            height: 24,
            borderWidth: 2,
            borderColor: isChecked ? '#007AFF' : '#ccc',
            backgroundColor: isChecked ? '#007AFF' : 'transparent',
            borderRadius: 4
          }}
        />
      </Pressable>
    </View>
  );
}

Switch is used for toggling between two states, like ON/OFF.

Custom CheckBox (using Pressable + View) is used for selecting or deselecting an option.

Examples

This example shows a simple switch that toggles between true and false.

React Native

const [isEnabled, setIsEnabled] = useState(false);

<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
/>

This example shows a checkbox that the user can check or uncheck.

React Native

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

<Pressable
  onPress={() => setChecked(!checked)}
  style={{width: 44, height: 44, justifyContent: 'center', alignItems: 'center'}}
>
  <View
    style={{
      width: 24,
      height: 24,
      borderWidth: 2,
      borderColor: checked ? '#007AFF' : '#ccc',
      backgroundColor: checked ? '#007AFF' : 'transparent',
      borderRadius: 4
    }}
  />
</Pressable>

A switch that is always ON and cannot be changed by the user.

React Native

<Switch
  value={true}
  disabled={true}
/>

Sample App

This app shows a switch to turn notifications on or off and a custom checkbox to accept terms. The text below updates to show the current choices. The checkbox is made accessible with roles and states.

React Native

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

export default function App() {
  const [isSwitchOn, setIsSwitchOn] = useState(false);
  const [isChecked, setIsChecked] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Switch and Checkbox Example</Text>

      <View style={styles.row}>
        <Text style={styles.label}>Enable Notifications</Text>
        <Switch
          value={isSwitchOn}
          onValueChange={setIsSwitchOn}
          accessibilityLabel="Enable Notifications Switch"
        />
      </View>

      <Pressable
        style={styles.checkboxContainer}
        onPress={() => setIsChecked(!isChecked)}
        accessibilityRole="checkbox"
        accessibilityState={{ checked: isChecked }}
        accessibilityLabel="Accept Terms Checkbox"
      >
        <View style={[styles.checkbox, isChecked && styles.checked]} />
        <Text style={styles.label}>Accept Terms and Conditions</Text>
      </Pressable>

      <Text style={styles.status}>
        Notifications are {isSwitchOn ? 'ON' : 'OFF'}
      </Text>
      <Text style={styles.status}>
        Terms accepted: {isChecked ? 'Yes' : 'No'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20
  },
  label: {
    fontSize: 18
  },
  checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20
  },
  checkbox: {
    width: 24,
    height: 24,
    borderWidth: 2,
    borderColor: '#555',
    marginRight: 10,
    borderRadius: 4
  },
  checked: {
    backgroundColor: '#007AFF',
    borderColor: '#007AFF'
  },
  status: {
    fontSize: 16,
    marginTop: 10
  }
});

Important Notes

React Native's built-in CheckBox is deprecated on some platforms; a custom checkbox using Pressable and View can be used instead.

Always add accessibility labels and roles so screen readers can describe switches and checkboxes.

Use state hooks like useState to track the on/off or checked/unchecked status.

Summary

Switches toggle between two states, like ON/OFF.

Checkboxes let users select or deselect options.

Use state to control their values and update UI accordingly.