Tab Bar

A segmented-control style tab bar with an animated sliding indicator. Fully controlled via value and onChange, and driven by a tabs array of { value, label } pairs. Tabs split the available width equally unless scrollable is set, so give it a container with real width to fill: a flex parent, or an explicit w.

Basic usage

Day

Week

Month

function TabBarDemo() {
  const [value, setValue] = useState('day');

  return (
    <TabBar
      tabs={[
        { value: 'day', label: 'Day' },
        { value: 'week', label: 'Week' },
        { value: 'month', label: 'Month' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

Scrollable

With scrollable, tabs render at their natural width in a horizontal scroll view instead of splitting the container equally; better once you have more tabs than comfortably fit.

All

Active

Completed

Archived

<TabBar
  tabs={[
    { value: 'all', label: 'All' },
    { value: 'active', label: 'Active' },
    { value: 'completed', label: 'Completed' },
    { value: 'archived', label: 'Archived' },
  ]}
  value={value}
  onChange={setValue}
  scrollable
/>

Props

Prop	Type	Default	Description
tabs	{ value: string; label: string }[]		Required. Tabs to render.
value	string		Required. Value of the active tab.
onChange	(value: string) => void		Required. Called when a tab is pressed.
trackBg	TVajraColors	'surfaceRaised'	Background color of the outer track.
trackRounded	TRoundedToken	'r-full'	Corner radius of the outer track.
trackPadding	TSpacingToken	's-1'	Padding around tabs inside the track.
indicatorBg	TVajraColors	'surface'	Background color of the sliding active indicator.
indicatorRounded	TRoundedToken	'r-full'	Corner radius of the sliding indicator.
activeColor	TVajraColors	'text'	Label color for the active tab.
inactiveColor	TVajraColors	'textMuted'	Label color for inactive tabs.
labelProps	Omit<TTextProps, 'color'>		Extra props passed to each tab's Text label.
scrollable	boolean	false	Renders tabs in a horizontal ScrollView with natural width instead of equal-width flex.