React Native Switch

React Native Switch - This is a controlled part that requires an onValueChange callback that refreshes the worth prop for the part to reflect client activities. In the event that the worth prop isn't refreshed, the part will keep on delivering the provided esteem prop rather than the normal aftereffect of any client activities.

React Native Switch

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;

Props

disabled​

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

ios_backgroundColor

On iOS, custom color for the background. This background color can be seen either when the switch value is false or when the switch is disabled (and the switch is translucent).

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.

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.

thumbColor​

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

trackColor​

Custom colors for the switch track.

iOS: When the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, use 

value​

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