Toggling between on and off

Another common element you’ll see in web forms is checkboxes. For example, think of toggling Wi-Fi or Bluetooth on your device. React Native has a Switch component that works on both iOS and Android. Thankfully, this component is a little easier to style than the Picker component. Let’s look at a simple abstraction you can implement to provide labels for your switches:

type CustomSwitchProps = SwitchProps & {
  label: string;
};
export default function CustomSwitch(props: CustomSwitchProps) {
  return (
    <View style={styles.customSwitch}>
      <Text>{props.label}</Text>
      <Switch {...props} />
    </View>
  );
}

Now, let’s learn how we can use a couple of switches to control application state:

export default function TogglingOnAndOff() {
  const [first, setFirst] = useState(false);
  const [second, setSecond] = useState(false);
  return (
    <View style={styles.container}>...