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

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';

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

Usage

index.tsx
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>
  );
}
© Ronin Technologies LLC 2024