Skip to main content
Version: 4.0.0-rc.8

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

Loading...

Active Tab Items

Loading...

Props

note

Includes all View props.

NameTypeDefaultDescription
buttonStyleViewStyle or (active: boolean) => ViewStylenoneAdditional button style
containerStyleViewStyle or (active: boolean) => ViewStylenoneAdditional Styling for button container.
densebooleannoneDense Tab Item
disableIndicatorbooleanDisable the indicator below.
iconPositionleft | right | top | bottomnone
indicatorStyleView StyleAdditional styling for tab indicator.
onChange(value: number) => voidFunctionOn Index Change Callback.
scrollablebooleanfalseMakes Tab Scrolling
titleStyleTextStyle or (active: boolean) => TextStylenoneAdditional button title style
valuenumber0Child position index value.
variantprimary | defaultdefaultDefine the background Variant.

Playground

Loading...