react-native-web/packages/react-native-web-examples/pages/switch/index.js

import React from 'react';
import { StyleSheet, Switch, View } from 'react-native';
import Example from '../../shared/example';

function Divider() {
  return <View style={styles.divider} />;
}

export default function SwitchPage() {
  const [checked, setChecked] = React.useState(true);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setChecked(!checked);
    }, 2500);
    return () => {
      clearInterval(interval);
    };
  }, [checked]);

  return (
    <Example title="Switch">
      <View style={styles.row}>
        <Switch disabled={true} value={false} />
        <Divider />
        <Switch disabled={true} value={true} />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#E0245E"
          disabled={true}
          value={true}
        />
        <Divider />
        <Switch
          disabled={true}
          thumbColor="#fff"
          trackColor="#E0245E"
          value={false}
        />
        <Divider />
        <Switch
          disabled={true}
          trackColor={{ true: '#E0245E', false: '#1DA1F2' }}
          value={false}
        />
        <Divider />
        <Switch
          disabled={true}
          trackColor={{ true: '#E0245E', false: '#1DA1F2' }}
          value={true}
        />
      </View>
      <View style={styles.row}>
        <Switch value={false} />
        <Divider />
        <Switch value={true} />
      </View>
      <View style={styles.row}>
        <Switch
          activeThumbColor="#1DA1F2"
          activeTrackColor="#ccc"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#17BF63"
          activeTrackColor="#ccc"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#FFAD1F"
          activeTrackColor="#ccc"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#F45D22"
          activeTrackColor="#ccc"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#794BC4"
          activeTrackColor="#ccc"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#E0245E"
          activeTrackColor="#ccc"
          value={true}
        />
      </View>
      <View style={styles.row}>
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#1DA1F2"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#17BF63"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#FFAD1F"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#F45D22"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#794BC4"
          value={true}
        />
        <Divider />
        <Switch
          activeThumbColor="#fff"
          activeTrackColor="#E0245E"
          value={true}
        />
      </View>
      <View style={styles.row}>
        <Switch activeTrackColor="#ccc" thumbColor="#1DA1F2" value={false} />
        <Divider />
        <Switch activeTrackColor="#ccc" thumbColor="#17BF63" value={false} />
        <Divider />
        <Switch activeTrackColor="#ccc" thumbColor="#FFAD1F" value={false} />
        <Divider />
        <Switch activeTrackColor="#ccc" thumbColor="#F45D22" value={false} />
        <Divider />
        <Switch activeTrackColor="#ccc" thumbColor="#794BC4" value={false} />
        <Divider />
        <Switch activeTrackColor="#ccc" thumbColor="#E0245E" value={false} />
      </View>
      <View style={styles.row}>
        <Switch thumbColor="#fff" trackColor="#1DA1F2" value={false} />
        <Divider />
        <Switch thumbColor="#fff" trackColor="#17BF63" value={false} />
        <Divider />
        <Switch thumbColor="#fff" trackColor="#FFAD1F" value={false} />
        <Divider />
        <Switch thumbColor="#fff" trackColor="#F45D22" value={false} />
        <Divider />
        <Switch thumbColor="#fff" trackColor="#794BC4" value={false} />
        <Divider />
        <Switch thumbColor="#fff" trackColor="#E0245E" value={false} />
      </View>

      <View style={styles.row}>
        <Switch
          style={{ height: 32, width: 32 }}
          thumbColor="#1DA1F2"
          value={checked}
        />
      </View>
    </Example>
  );
}

const styles = StyleSheet.create({
  row: {
    alignItems: 'center',
    flexDirection: 'row',
    marginVertical: 20
  },
  divider: {
    width: 10
  }
});