Segmented Control

An iOS-style segmented control: a pill indicator measures the track and slides to the active segment.

ReanimatedHapticsNativeWindSource

Prerequisites

Just Reanimated and haptics for the selection tick.


npx expo install react-native-reanimated expo-haptics react-native-css

Install


npx @rslab/cli add segmented-control

Usage

import { SegmentedControl } from '@/components/ui/SegmentedControl';

const [billing, setBilling] = useState('monthly');

<SegmentedControl
  value={billing}

  onChange={setBilling}

  options={[
    { label: 'Monthly', value: 'monthly' },

    { label: 'Yearly', value: 'yearly' },
  ]}
/>;

<SegmentedControl
  value={view}

  onChange={setView}

  options={[
    { label: 'Day', value: 'day' },

    { label: 'Week', value: 'week' },

    { label: 'Month', value: 'month' },
  ]}

  disabled={loading}
/>

Props

PropTypeDefault

value

T

-

onChange

(value: T) => void

-

options

{ label: string; value: T }[]

-

Any number of segments; generic over the value’s string literal type.

disabled?

boolean

false

Fades the control and blocks presses.

haptic?

boolean

true

Selection tick on every change. Set false to mute it.

className?

string

-

Extend or override the outer track.

How it works

Measured, not hardcoded. onLayout captures the track's real width on mount, so the indicator's width and travel distance are computed from however many options you pass in, there's no assumption about segment count baked into the component.
Plain timing, no spring. Like the library's other selection controls, sliding the indicator repeatedly (tabbing through options a few times) reads sloppy with a spring's overshoot, so it's a withTiming ease-out instead.
selectionAsync() on change, the same haptic iOS uses for picking one of several options rather than the impactAsync a plain button press gets.

Tuning

the slide duration and easing in the layout effect, raise the duration for a calmer glide on wider controls
PAD: the inset between the track edge and the indicator, also used for the indicator's own vertical inset

See exactly how this works with an RSLAB subscription.

Get Pro

Segmented Control

Prerequisites

Install

Usage

Props

On this page