How to disable the toggle switch in React Native? Code Example

In order to disable the toggle switch in React Native, we can use disabled prop of <Switch> component and set it to true.

Once the switch is disabled, the user won’t be able to interact with it.

Code Example

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

const App = () => {
  
  return (
    <View style={styles.container}>
      <Text>Disabled Switch</Text>
      <Switch
        disabled={true}
      />
      <Text>Enabled Switch</Text>
      <Switch
        disabled={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    height: 200
  }
});

export default App;

Output –

In this image we can see that there are two switches. First one is disabled and second is enabled. You can see how the switches looks like on both Android and iOS mobiles.

In our code we are setting the disabled prop in Switch component in line 10.

By default a switch is always enabled so there is no need to add disabled prop when you have no plans of disabling it.

Live Demo

Conclusion

The conclusion of this article is that you can use disabled prop of Switch component to prevent users from interacting with it.