Tabs

Navigation

Horizontal tab navigation with a sliding animated indicator. Renders tab content lazily and supports controlled and uncontrolled modes.

GitHub

Installation

bash

npx native-mate add tabs

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Tabs } from '~/components/ui/tabs'

const tabs = [
  { key: 'overview', label: 'Overview', content: <OverviewPanel /> },
  { key: 'activity', label: 'Activity', content: <ActivityPanel /> },
  { key: 'settings', label: 'Settings', content: <SettingsPanel /> },
]

// Uncontrolled
<Tabs tabs={tabs} defaultActiveKey="overview" />

// Controlled
<Tabs tabs={tabs} activeKey={active} onChange={setActive} />

Props

Prop	Type	Default	Description
tabs	Array<{ key: string; label: string; content: React.ReactNode }>	—	Tab definitions including their content panels.
activeKey	string	—	Controlled active tab key.
defaultActiveKey	string	—	Uncontrolled initial active tab key.
onChange	(key: string) => void	—	Called when the active tab changes.
style	ViewStyle	—	Additional styles for the outer container.

Example

tsx

import { useState } from 'react'
import { Tabs } from '~/components/ui/tabs'
import { Text } from '@native-mate/core'
import { View } from 'react-native'

export function TabsExample() {
  const [active, setActive] = useState('posts')

  const tabs = [
    { key: 'posts', label: 'Posts', content: <View style={{ padding: 16 }}><Text>Posts content</Text></View> },
    { key: 'likes', label: 'Likes', content: <View style={{ padding: 16 }}><Text>Likes content</Text></View> },
    { key: 'saved', label: 'Saved', content: <View style={{ padding: 16 }}><Text>Saved content</Text></View> },
  ]

  return (
    <View style={{ flex: 1 }}>
      <Tabs tabs={tabs} activeKey={active} onChange={setActive} />
    </View>
  )
}

Accordion

Avatar