SegmentedControl

SegmentedControl provides an iOS-style segmented tab switcher with a fluid sliding pill indicator animation.

Usage

SegmentedExample.tsx

import { useState } from 'react';
import { SegmentedControl } from '@masumdev/rn-ui';

export function SegmentedExample() {
  const [index, setIndex] = useState(0);

  return (
    <SegmentedControl
      values={['Day', 'Week', 'Month']}
      selectedIndex={index}
      onChange={(i) => setIndex(i)}
    />
  );
}

With Icons & Badges

SegmentedAdvanced.tsx

import { SegmentedControl } from '@masumdev/rn-ui';
import { List, Grid } from 'lucide-react-native';

const options = [
  { label: 'List', value: 'list', icon: (p) => <List {...p} /> },
  { label: 'Grid', value: 'grid', icon: (p) => <Grid {...p} /> },
];

<SegmentedControl values={options} tone="primary" size="sm" />

Props API

Prop	Type	Default	Description
values*	(string | SegmentedOption)[]	—	Segment labels or option objects.
selectedIndex	number	—	Controlled selected index.
defaultIndex	number	0	Initial uncontrolled index.
onChange	(index: number, value: string) => void	—	Callback when segment changes.
size	ComponentSize	"md"	Size preset (sm, md, lg).
tone	ComponentTone	"primary"	Color tone.
disabled	boolean	false	Disable all segments.
hapticFeedback	boolean	true	Enable haptic feedback.

SegmentedOption

Prop	Type	Default	Description
label*	string	—	Segment label text.
value*	string	—	Segment value identifier.
icon	RenderIcon	—	Leading icon.
badge	string | number	—	Badge indicator.
disabled	boolean	—	Disable this specific segment.