Switch

A Switch component allows users to toggle between two states. Built on top of heroui-native Switch.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Switch running in the Nayan UI example app

Usage

Source
Switch.tsx
import { View } from 'react-native';
import { useState } from 'react';
import { NSwitch, NText } from '@nayan-ui/native';


export default function SwitchScreen() {
  const [wifi, setWifi] = useState(true);
  const [bluetooth, setBluetooth] = useState(false);


  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic</NText>
      <NSwitch label="Wi-Fi" isSelected={wifi} onSelectedChange={setWifi} />
      <NSwitch label="Bluetooth" isSelected={bluetooth} onSelectedChange={setBluetooth} />
      <NText className="text-muted">
        Wi-Fi: {wifi ? 'On' : 'Off'}, Bluetooth: {bluetooth ? 'On' : 'Off'}
      </NText>


      <NText className="text-lg font-bold">Disabled</NText>
      <NSwitch label="Disabled on" isSelected isDisabled onSelectedChange={() => {}} />
      <NSwitch label="Disabled off" isSelected={false} isDisabled onSelectedChange={() => {}} />
    </View>
  );
}

Attributes

7 props
NameTypeDefaultDetails
labelstringOptionalLabel for the switch.
isSelectedbooleanfalseWhether the switch is selected.
isDisabledbooleanfalseWhether the switch is disabled.
onSelectedChange(selected: boolean) => voidOptionalCallback when switch state changes.
classNamestring' 'You can customise switch by passing tailwind classes.
containerClassNamestring' 'You can customise container by passing tailwind classes.
labelClassNamestring' 'You can customise label by passing tailwind classes.

Tags

Other components solving nearby problems.