# Tabs (React Native)
> A scrollable tab bar with a sliding indicator, and its panels.
GramproKit for React Native · Display · Beta · Source: https://kit.gramproindia.com/native/docs/tabs
> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).
_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/tabs). The example's source:
```tsx
import { useState } from "react";
import { Text } from "react-native";
import { useKitTheme } from "@/component-lib/shared/native";
import { Tab, TabList, TabPanel, Tabs } from "@/component-lib/tabs";
import { Section } from "./layout"; // Section and Row: page layout for the demo
function Body({ children }: { children: string }) {
const { tokens } = useKitTheme();
return {children};
}
export function TabsDemo() {
const [value, setValue] = useState("invoices");
return (
<>
Overview
Invoices
Payments
Reports
Settings
Archived
Overview: revenue and outstanding at a glance.
12 invoices waiting for approval.
Payments received this month.
Reports: GST, TDS and ledgers.
Settings for this workspace.
Day
Week
Month
Year
Today's numbers.
This week's numbers.
This month's numbers.
This year's numbers.
List
Board
Calendar
No value given: the first tab is selected.
Board view; the list keeps its state while hidden.
Calendar view.
Profile
Security
Billing
Name, photo and contact details.
Password and two-factor sign-in.
Plan and payment method.
);
}
```
## Install
```bash
npx @grampro/kit@native add Tabs
```
## Usage
```tsx
import { Tabs, TabList, Tab, TabPanel } from "@/component-lib/tabs";
Open
Paid
…
…
```
## Props
### TabsProps
| Prop | Type | Description |
|---|---|---|
| `value` | `string` | Selected tab (controlled). |
| `defaultValue` | `string` | Selected tab at first. Without either, the first enabled tab is selected. |
| `onValueChange` | `(value: string) => void` | The newly selected tab. Not fired when the same tab is pressed again. |
| `orientation` | `TabsOrientation` | Default `horizontal`. |
| `activation` | `TabsActivation` | Kept for API parity with the web. Touch has no arrow-key focus to follow, so a press always selects. |
| `variant` | `TabsVariant` | Default `line`. |
| `size` | `TabsSize` | Default `md`. |
| `keepMounted` | `boolean` | Keep hidden panels mounted, preserving their state (form input, scroll) through React's ``. Default false. |
| `children` | `ReactNode` | |
Also accepts the props of `Omit`.
### TabProps
| Prop | Type | Description |
|---|---|---|
| `value` (required) | `string` | Identifies the tab and its panel. |
| `disabled` | `boolean` | |
| `icon` | `ReactNode` | An icon before the tab's text. |
| `badge` | `ReactNode` | A small count or label after the text, e.g. unread items. |
| `children` | `ReactNode` | |
| `style` | `StyleProp \| ((state: TabStyleState) => StyleProp)` | |
| `styles` | `Partial<{ label: StyleProp; badge: StyleProp; icon: StyleProp`.
### TabPanelProps
| Prop | Type | Description |
|---|---|---|
| `value` (required) | `string` | |
| `keepMounted` | `boolean` | Overrides `keepMounted` on `Tabs` for this panel. |
| `children` | `ReactNode` | |
Also accepts the props of `Omit`.
## Native and web
- `activation` is accepted for parity but a tap always selects.
- Web version: [Tabs on the web](https://kit.gramproindia.com/tabs).