Tab

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

note

This component is not for (complex) navigation. Use React Navigation for that.

Import

import { Tab } from '@rn-vui/themed';

Theme Key

Tab

Usage

Basic Tabs

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

<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>

Props

note

Includes all View props.

Name	Type	Default	Description
animationConfig	TimingAnimationConfig | SpringAnimationConfig(Object)	{}	Animation Config
animationType	spring | timing	spring	Animation type
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		active index
variant	primary | default	primary	Define the background Variant.

Playground

Loading...