RN Neo — Neubrutalist UI for React Native

A toggle switch with a sliding thumb animation. The thumb translates across the track when the value changes, and the track background transitions between on and off colors.

Usage

import { Switch } from 'rn-neo';
import { useState } from 'react';

const [value, setValue] = useState(false);

<Switch value={value} onChange={setValue} />

// With size and custom colors
<Switch
  value={value}
  onChange={setValue}
  size="lg"
  backgroundColor={{ true: 'success', false: 'muted' }}
  thumbColor={{ true: 'onSuccess', false: 'onPrimary' }}
/>

// Disabled
<Switch value={value} onChange={setValue} disabled />

Behavior

The thumb slides edge to edge when value toggles. Travel distance is computed from container width, border size, padding, and thumb size — so it fits precisely regardless of size or borderSize.
Thumb size is 60% of the track height; its radius scales from the container's radius minus internal padding, so it always looks naturally inset.
The shadow offset multiplier doubles (1× → 2×) when value is true.
Track / shadow / opacity and the thumb's translate + color animate when animation is enabled.
When disabled, it renders at reduced opacity and ignores interactions.
Track defaults to primary (on) and muted (off); thumb defaults to onPrimary for both states.

Size

Size	Width	Height
`sm`	36px	20px
`md`	48px	28px
`lg`	60px	34px

Props

Switch

Prop	Type	Default	Description
`value`	`boolean`	Required	Current on/off state.
`onChange`	`(value: boolean) => void`	Required	Called with the new value on press.
`disabled`	`boolean`	—	Disables interaction, reduces opacity.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls track width and height.
`backgroundColor`	`Record<'true' \| 'false', BgColors \| string>`	`{ true: 'primary', false: 'muted' }`	Track background for each state.
`thumbColor`	`Record<'true' \| 'false', Colors \| string>`	`{ true: 'onPrimary', false: 'onPrimary' }`	Thumb color for each state.

Border

Prop	Type	Default	Description
`border`	`boolean`	From theme	Whether to show a border.
`borderSize`	`BorderSize \| number`	From theme	Border width. Affects thumb travel and padding calculations.
`borderColor`	`Colors \| string`	From theme	Border color.
`radius`	`Radius \| number`	From theme	Track radius. Thumb radius scales from this automatically.

Shadow

Prop	Type	Default	Description
`shadow`	`boolean`	From theme	Whether to show a shadow.
`shadowSize`	`ShadowSize \| number`	From theme	Shadow offset size. Doubles when value is `true`.
`shadowColor`	`Colors \| string`	From theme	Shadow color.

Spacing

Accepts the standard margin* props (margin, marginVertical, marginHorizontal, marginTop, …). See Box → Spacing for the full list.

Accessibility

Switch sets accessibilityRole="switch" and passes checked (from value) and disabled to accessibilityState automatically.

Switch

On this page