Toggle

A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.
Companion App Logo

Try It Live

In the Companion App
Apple
Apple
import * as React from 'react';
import { View } from 'react-native';

import { Toggle } from '@/components/nativewindui/Toggle';

export default function TextScreen() {
  const [switchValue, setSwitchValue] = React.useState(true);
  return (
    <View className="flex-1 justify-center p-4">
      <Toggle value={switchValue} onValueChange={setSwitchValue} className="mx-auto" />
    </View>
  );
}

Installation

1

Run the following command:

npx nwui-cli@latest add toggle
🚀
Ship.
1

Copy/paste the following code to the specified file path:

@/components/nativewindui/Toggle.tsx
import { Switch } from 'react-native';

import { useColorScheme } from '@/lib/useColorScheme';
import { COLORS } from '@/theme/colors';

function Toggle(props: React.ComponentProps<typeof Switch>) {
  const { colors } = useColorScheme();
  return (
    <Switch
      trackColor={{
        true: colors.primary,
        false: colors.grey,
      }}
      thumbColor={COLORS.white}
      {...props}
    />
  );
}

export { Toggle };
🛸
Ship.

Usage

import { Toggle } from '@/components/nativewindui/Toggle';
const [switchValue, setSwitchValue] = React.useState(true);

return <Toggle value={switchValue} onValueChange={setSwitchValue} />

Props

Inherits all the props from React Native's

Switch

component.

Logo

NativewindUI

DiscordGitHub
© Ronin Technologies LLC 2025