Tabs

Tabbed navigation with animated sliding indicator, horizontal/vertical orientation, and multiple visual variants.

iOSAndroid

Preview Tabs on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-tabs

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent
} from '@/components/docyrus-native/tabs';

<TabsRoot defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Overview</TabsTrigger>
    <TabsTrigger value="tab2">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Overview content here.</TabsContent>
  <TabsContent value="tab2">Settings content here.</TabsContent>
</TabsRoot>

API Reference

TabsRoot

Prop	Type	Default	Description
`value`	`string`	—	Controlled active tab value
`defaultValue`	`string`	—	Initial active tab value
`onValueChange`	`(value: string) => void`	—	Callback when active tab changes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Tab layout orientation
`variant`	`'default' \| 'pills' \| 'underline'`	`'default'`	Visual style variant
`children`	`ReactNode`	—	TabsList and TabsContent children
`className`	`string`	—	Additional CSS classes
`accessibilityLabel`	`string`	`'Tabs'`	Accessibility label for the tab list

TabsList

Prop	Type	Default	Description
`scrollable`	`boolean`	`false`	Wrap triggers in a horizontal/vertical ScrollView
`children`	`ReactNode`	—	TabsTrigger children
`className`	`string`	—	List container CSS classes

TabsTrigger

Prop	Type	Default	Description
`value`	`string`	—	Unique tab identifier (must match TabsContent value)
`disabled`	`boolean`	`false`	Whether the trigger is disabled
`textClassName`	`string`	—	Text CSS classes
`children`	`ReactNode`	—	Trigger label
`className`	`string`	—	Trigger CSS classes

TabsContent

Prop	Type	Default	Description
`value`	`string`	—	Tab identifier (must match TabsTrigger value)
`children`	`ReactNode`	—	Content to render when tab is active
`className`	`string`	—	Content area CSS classes

Components

Component	Description
`TabsRoot`	Root container managing active tab state and context
`TabsList`	Container for tab triggers with animated sliding indicator (Reanimated spring)
`TabsTrigger`	Pressable tab button with layout measurement for indicator positioning
`TabsContent`	Content panel with Reanimated fade-in/fade-out transitions

Type Exports

Type	Description
`TabsRootProps`	Props for TabsRoot component
`TabsListProps`	Props for TabsList component
`TabsTriggerProps`	Props for TabsTrigger component
`TabsContentProps`	Props for TabsContent component
`TabsOrientation`	`'horizontal' \| 'vertical'`
`TabsVariant`	`'default' \| 'pills' \| 'underline'`

Tabs

On this page