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.

Usage

Import

import { Tab } from '@rneui/themed';

Theme Key

Tab

Basic Tabs

Tab

Tab

Show Code

Active Tab Items

Tab

Tab

Show Code

Props

note

Includes all View props.

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.

Playground

Recent

favourite

cart

children [?]

<Tab.Item title="Recent" /> <Tab.Item title="favourite" /> <Tab.Item title="cart" />

 
          <Tab.Item title="Recent" />
          <Tab.Item title="favourite" />
          <Tab.Item title="cart" />
         

value [?]

onChange [?]

() => console.log("onChange()")

() => console.log("onChange()")

disableIndicator [?]

indicatorStyle [?]

{}

{}

variant [?]

primary

default