Switch

Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.

Renders a boolean input.

This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

Example

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

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

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

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

export default App;

Reference

Props

View Props

Inherits View Props.

disabled

If true the user won't be able to toggle the switch.

Type	Default
bool	`false`

onChange

Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new value, use onValueChange instead.

Type
function

onValueChange

Invoked when the user tries to change the value of the switch. Receives the new value as an argument. If you want to instead receive an event, use onChange.

Type
function

thumbColor

Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.

Type
color

trackColor

Custom colors for the switch track.

Type
`object: {false: [color](colors), true: [color](colors)}`

value

The value of the switch. If true the switch will be turned on. Default value is false.

Type
bool

Last updated: Sep 30, 2025