---
id: tab
title: Tab
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/Tab.mdx";
import Play from "@site/playground/Tab/tab.playground";

<IconsStyle />

Tabs organize content across different screens, data sets, and other interactions.

:::note
This component is not for (complex) navigation. Use [React Navigation](https://reactnavigation.org) for that.
:::

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { Tab } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`Tab`}</CodeBlock>
  </div>
</div>

### Basic Tabs

```tsx live
function RneTab() {
  const [index, setIndex] = React.useState(0);
  return (
    <>
      <Tab value={index} onChange={setIndex} dense>
        <Tab.Item>Tab</Tab.Item>
        <Tab.Item>Tab</Tab.Item>
      </Tab>
    </>
  );
}
```

### Active Tab Items

```tsx live
<Tab value={0} scrollable>
  <Tab.Item
    containerStyle={(active) => ({
      backgroundColor: active ? "red" : undefined,
    })}
  >
    Tab
  </Tab.Item>
  <Tab.Item
    buttonStyle={(active) => ({
      backgroundColor: active ? "red" : undefined,
    })}
  >
    Tab
  </Tab.Item>
</Tab>
```

<Usage />

## Props

:::note
Includes all [View](https://reactnative.dev/docs/view#props) props.
:::

<div class='table-responsive'>

| Name               | Type                                          | Default    | Description                              |
| ------------------ | --------------------------------------------- | ---------- | ---------------------------------------- |
| `buttonStyle`      | `ViewStyle or (active: boolean) => ViewStyle` | `none`     | Additional button style                  |
| `containerStyle`   | ViewStyle or (active: boolean) => ViewStyle   | `none`     | Additional Styling for button container. |
| `dense`            | boolean                                       | `none`     | Dense Tab Item                           |
| `disableIndicator` | boolean                                       |            | Disable the indicator below.             |
| `iconPosition`     | `left` \| `right` \| `top` \| `bottom`        | `none`     |                                          |
| `indicatorStyle`   | View Style                                    |            | Additional styling for tab indicator.    |
| `onChange`         | (value: number) => void                       | `Function` | On Index Change Callback.                |
| `scrollable`       | boolean                                       | `false`    | Makes Tab Scrolling                      |
| `titleStyle`       | TextStyle or (active: boolean) => TextStyle   | `none`     | Additional button title style            |
| `value`            | number                                        | `0`        | Child position index value.              |
| `variant`          | `primary` \| `default`                        | `default`  | Define the background Variant.           |

</div>

## Playground

<Play />
