Toggle

Toggle Primitive Text Component

Demo

A button with a true or false state, which can be activated or deactivated by toggling.

Installation

CLI

npx @react-native-reusables/cli@latest add toggle

Manual

Dependencies

Before copy/pasting, add the toggle primitive and the text component to your project.

Copy/paste the following code to ~/components/ui/toggle.tsx:

Usage

import * as React from 'react';
import { View } from 'react-native';
import { Toggle, ToggleIcon } from '~/components/ui/toggle';
import { Bold } from '~/lib/icons/Bold';

function Example() {
  const [pressed, setPressed] = React.useState(false);
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <Toggle
        pressed={pressed}
        onPressedChange={setPressed}
        aria-label='Toggle bold'
        variant='outline'
      >
        <ToggleIcon icon={Bold} size={18} />
      </Toggle>
    </View>
  );
}

Props

Toggle

Extends Pressable props

Prop	Type	Note
pressed	boolean
onPressedChange	(val: boolean) => void
asChild	boolean	(optional)
disabled	boolean	(optional)
variant	’default’ | ‘outline’	(optional)
size	’default’ | ‘sm’ | ‘lg’	(optional)

ToggleIcon

Extends LucideIcon props

Prop	Type	Note
icon	LucideIcon