How to Use Switch in React Native: Simple Guide

In React Native, use the Switch component to create a toggle button that lets users switch between two states. Control its state with a boolean value and update it using the onValueChange callback.

Syntax

The Switch component requires a value prop to control its on/off state and an onValueChange prop to handle toggling. You can also customize colors and styles.

• value: boolean to show if switch is on (true) or off (false).
• onValueChange: function called when user toggles the switch.
• trackColor: colors for the background track when off and on.
• thumbColor: color of the round thumb.

javascript

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

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

  return (
    <Switch
      value={isEnabled}
      onValueChange={toggleSwitch}
      trackColor={{ false: '#767577', true: '#81b0ff' }}
      thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
    />
  );
}

Output

A toggle switch that changes color and state when tapped.

Example

This example shows a simple toggle switch that changes its state and color when pressed. The state is stored in a React hook and updates the UI immediately.

javascript

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

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

  return (
    <View style={styles.container}>
      <Text>{isEnabled ? 'Switch is ON' : 'Switch is OFF'}</Text>
      <Switch
        value={isEnabled}
        onValueChange={toggleSwitch}
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Output

A centered screen with text showing 'Switch is OFF' or 'Switch is ON' and a toggle switch that changes state and color when tapped.

Common Pitfalls

Common mistakes when using Switch include:

• Not controlling the value prop with state, causing the switch to not update visually.
• Forgetting to update state inside onValueChange, so the switch appears stuck.
• Using incorrect color props or values that do not match expected types.

Always keep the switch state in React state and update it on toggle.

javascript

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

// Wrong: value is fixed, switch won't toggle visually
function WrongSwitch() {
  return <Switch value={false} onValueChange={() => {}} />;
}

// Right: value controlled by state and updated on toggle
function RightSwitch() {
  const [isOn, setIsOn] = useState(false);
  return <Switch value={isOn} onValueChange={() => setIsOn(!isOn)} />;
}

Output

WrongSwitch: switch stays off and does not toggle visually.
RightSwitch: switch toggles on and off correctly.

Quick Reference

Prop	Type	Description
value	boolean	Controls if the switch is on (true) or off (false)
onValueChange	function	Callback called when user toggles the switch
trackColor	object	Colors for the track when off and on, e.g. { false: '#ccc', true: '#0f0' }
thumbColor	string	Color of the round thumb
disabled	boolean	If true, disables the switch interaction

Key Takeaways

Use the Switch component with a boolean state to control its on/off status.

Always update the state inside onValueChange to reflect user toggles.

Customize colors with trackColor and thumbColor props for better UI.

Avoid fixed value props without state updates to prevent non-responsive switches.

Use the disabled prop to disable user interaction when needed.