Tabs

A Tabs component allows users to switch between different views or sections. Built on top of heroui-native Tabs with items-based API.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Tabs running in the Nayan UI example app

Usage

Source
Tabs.tsx
import { View } from 'react-native';
import { NTabs, NText } from '@nayan-ui/native';


export default function TabsScreen() {
  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic (uncontrolled)</NText>
      <NTabs
        defaultValue="account"
        items={[
          { label: 'Account', value: 'account', content: <NText>Manage your account settings.</NText> },
          { label: 'Security', value: 'security', content: <NText>Password and 2FA.</NText> },
          { label: 'Billing', value: 'billing', content: <NText>Payment methods and invoices.</NText> }
        ]}
      />


      <NText className="text-lg font-bold">Secondary variant</NText>
      <NTabs
        variant="secondary"
        defaultValue="tab1"
        items={[
          { label: 'Overview', value: 'tab1', content: <NText>Overview content.</NText> },
          { label: 'Analytics', value: 'tab2', content: <NText>Analytics data.</NText> },
          { label: 'Reports', value: 'tab3', content: <NText>Reports list.</NText> }
        ]}
      />


      <NText className="text-lg font-bold">With disabled tab</NText>
      <NTabs
        defaultValue="a"
        items={[
          { label: 'Active', value: 'a', content: <NText>This tab is active.</NText> },
          { label: 'Disabled', value: 'b', content: <NText>Cannot reach.</NText>, isDisabled: true },
          { label: 'Another', value: 'c', content: <NText>Another tab.</NText> }
        ]}
      />
    </View>
  );
}

Attributes

9 props
NameTypeDefaultDetails
itemsTabItem[]RequiredArray of tab items with label, value, and optional content.
valuestringOptionalControlled active tab value.
defaultValuestringOptionalDefault active tab value.
onValueChange(value: string) => voidOptionalCallback when active tab changes.
variantstringOptionalTabs variant style.
classNamestring' 'You can customise by passing tailwind classes.
listClassNamestring' 'You can customise tab list by passing tailwind classes.
triggerClassNamestring' 'You can customise tab triggers by passing tailwind classes.
contentClassNamestring' 'You can customise tab content by passing tailwind classes.

Tags

Other components solving nearby problems.