How to change toggle switch color in React Native? Code Example

In order to change the toggle switch color we need to use props like –

1. thumbColor – To change the color of circular disc. It accepts color value.
2. trackColor – For changing the color of track behind circular disc. It has a value format of object – {false: color, true: color}. Use false key to set color for inactive state and true key for active state. The false color doesn’t work in iOS.
3. ios_backgroundColor – To set the track color on iOS when it is in inactive state.

Code Example

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

const App = () => {
  
  return (
    <View style={styles.container}>
      <Text>Android: </Text>
      <Text>Disabled Switch:</Text>
      <Text>Track Color: #888888 (from trackColor.false)</Text>
      <Text>Thumb Color: #f5dd4b</Text>
      <Switch
        trackColor={{ false: "#888888", true: "#81b0ff" }}
        thumbColor={"#f5dd4b"}
        ios_backgroundColor="#3e3e3e"
        value={false}
      />

      <Text>Enabled Switch:</Text>
      <Text>Track Color: #81b0ff (from trackColor.true)</Text>
      <Text>Thumb Color: #f4f3f4</Text>
      <Switch
        trackColor={{ false: "#888888", true: "#81b0ff" }}
        thumbColor={"#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        value={true}
      />
    </View>
  );
}

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

export default App;

Output –

In the above image I have shown how the switches will look like in Android and iOS systems separately. iOS uses ios_backgroundColor prop to display track color in inactive state while Android uses trackColor.false value.

For active state, both iOS and Android uses trackColor.true value to set the track color.

In the code we are setting these props from line number 13 to 15.

Live Demo

Conclusion

The conclusion of this article is that the switch color can be changed using trackColor, ios_backgroundColor, and thumbColor props. Use them according to your brand theme.