RN Neo — Neubrutalist UI for React Native

A radio button with an inner dot indicator. Supports a disabled state, custom sizes, and separate colors for selected / unselected states.

Usage

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

const [selected, setSelected] = useState(false);

<Radio selected={selected} onChange={setSelected} />

// With size and custom colors
<Radio
  selected={selected}
  onChange={setSelected}
  size="lg"
  backgroundColor={{ true: 'secondary', false: 'surface' }}
  innerColor={{ true: 'onSecondary', false: 'transparent' }}
/>

// Disabled
<Radio selected={selected} onChange={setSelected} disabled />

Building a Radio Group

Radio is a controlled primitive — it does not manage group state. Wire up multiple buttons manually:

const [value, setValue] = useState('a');

<Radio selected={value === 'a'} onChange={() => setValue('a')} />
<Radio selected={value === 'b'} onChange={() => setValue('b')} />
<Radio selected={value === 'c'} onChange={() => setValue('c')} />

Behavior

The inner dot scales from 0 to 1 when selected switches — a clean pop-in.
The dot size derives from the container minus padding; its radius scales with the container's radius.
The shadow offset multiplier doubles (1× → 2×) when selected.
When disabled, it renders at reduced opacity and ignores interactions.
Background / shadow / opacity transitions animate when animation is enabled.
padding defaults to the size preset value if not set explicitly.

Size

Size	Dimensions	Default Padding
`sm`	18 × 18	`sm` (4px)
`md`	22 × 22	`md` (8px)
`lg`	28 × 28	`md` (8px)

Props

Radio

Prop	Type	Default	Description
`selected`	`boolean`	Required	Current selected state.
`onChange`	`(selected: boolean) => void`	Required	Called with the new value on press.
`disabled`	`boolean`	—	Disables interaction and reduces opacity.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the dimensions of the radio button.
`backgroundColor`	`Record<'true' \| 'false', BgColors \| string>`	`{ true: 'primary', false: 'surface' }`	Background color for each state.
`innerColor`	`Record<'true' \| 'false', Colors \| string>`	`{ true: 'onPrimary', false: 'transparent' }`	Inner dot 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. Token or raw number.
`borderColor`	`Colors \| string`	From theme	Border color.
`radius`	`Radius \| number`	From theme	Border radius. Scales to the inner dot proportionally.

Shadow

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

Spacing

Accepts all standard spacing props (padding*, margin*); padding defaults to the size preset. See Box → Spacing for the full list.

Accessibility

Radio sets accessibilityRole="radio" and passes selected and disabled to accessibilityState automatically.

Radio

On this page