Version: 3.0.0-next.36

Tabs

Tabs are used to communicate a state that affects a system, feature or page.

Import#

NativeBase exports 5 modal-related components:

  • Tabs: Provides context and state for all components
  • Tabs.Bar: Wrapper for theĀ TabĀ components
  • Tabs.Tab: element that serves as a label for one of the tab view and can be activated to display that panel.
  • Tabs.Views: Wrapper for theĀ Tabs.ViewĀ components
  • Tabs.View: element that contains the content associated with a tab
import { Tabs } from 'native-base';

Examples#

Usage#

Composition#

Variant#

TabsAlignment#

Colors#

Sizes#

FittedTabs#

TabBarOnly#

Props#

Tabs implements Box, so all the Box Props can be passed to it.

Tabs#

NameTypeDescriptionDefault
aligncenter, end, startThe alignments of the tab.start
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").-
defaultIndexnumberThe index of the open tab.-
indexnumberIf given, update the default open tab.0
sizelg, md, smThe size of the tab.md
isFittedbooleanThe tabs will spread in the TabBar.-
onChangefunctionThe callback invoked when tab is changed.-
variantenclosed, enclosed-colored, line, soft-rounded, solid-box, solid-roundedThe variant of the tabs style to use.line

Tabs.Bar, Tabs.Tab, Tabs.Views, Tabs.View all implement Box, all the props of Box can be passed to it.