Toggle

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

Installation

Run the following command:

npx nwui-cli@latest add toggle

🚀

Ship.

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

~/components/nativewindui/Toggle.tsx

Download

import { Switch } from 'react-native';

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

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

🚢

Ship.

Usage

index.tsx

Download

import * as React from 'react';
import { View } from 'react-native';

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

function ToggleExample() {
  const [switchValue, setSwitchValue] = React.useState(true);
  return (
    <View className="items-center">
      <Toggle value={switchValue} onValueChange={setSwitchValue} />
    </View>
  );
}

Toggle

Installation

Usage

NativeWindUI