Switch

Switch

Switch is controlled: it shows value and reports a flip through onValueChange, and unless you store the new value the thumb springs back. trackColor takes { false, true } colors and thumbColor colors the knob:

A controlled Switch with its own colors (SwitchDemo.js, excerpt)XML

      <Switch
        value={notify}
        onValueChange={(next) => {
          console.log('onValueChange', next);
          setNotify(next);
        }}
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={notify ? '#1565c0' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        aria-label="Notify me about new releases"
      />

Two taps on the switch logged:

Output of 63

 LOG  onValueChange true
 LOG  onValueChange false

Put the label in a Text beside the switch and in aria-label, so screen readers announce it with its state.

MENU