Tabs

Important Note

This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.

Anatomy

The structure provided below can help you identify and understand a Tabs component's various parts.

export default () => (
  <Tabs>
    <TabsList>
      <TabsTrigger>
        <TabsText />
      </TabsTrigger>
    </TabsList>
    <TabsContents>
      <TabsContent />
    </TabsContents>
  </Tabs>
)

API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
defaultValue	string	-	The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.
value	string	-	The controlled value of the tab to activate. Should be used in conjunction with onValueChange.
onValueChange	function	-	Event handler called when the value changes
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the tabs.

TabsList

Contains the triggers that are aligned along the edge of the active content.

Prop	Type	Default	Description
loop	boolean	true	When true, keyboard navigation will loop from last tab to first, and vice versa.

TabsTrigger

The button that activates its associated content. Must be wrapped with TabsList.

Prop	Type	Default	Description
value	string	-	A unique value that associates the trigger with a content.
isDisabled	boolean	false	When true, prevents the user from interacting with the tab.

TabsText

Must be wrapped with TabsTrigger. It inherits all the properties of React Native's Text component.

TabsContents

Wraps all the TabsContent components. It inherits all the properties of React Native's View component.

TabsContent

Contains the content associated with each trigger. It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
value	string	-	A unique value that associates the content with a trigger.

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

We have outlined the various features that ensure the Tabs component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

The element that serves as the container for the set of tabs has role tablist.
Each element that serves as a tab has role tab and is contained within the element with role tablist.
Each element that contains the content panel for a tab has role tabpanel.
If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by aria-label.
Each element with role tab has the property aria-controls referring to its associated tabpanel element.
The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.

Keyboard Interactions

Space or Enter - Activates the tab if it was not activated automatically on focus.
Tab - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown - Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowUp - Moves focus to the previous trigger depending on orientation and activates its associated content.
ArrowRight - Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowLeft - Moves focus to the previous trigger depending on orientation and activates its associated content.
Home - Moves focus to the first trigger and activates its associated content.
End - Moves focus to the last trigger and activates its associated content.

Unstyled

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

Customizing the Tabs

We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer gluestack.io/style on how to use styled components.

You can read more on how to animate components here.

Usage

Default styling of all these components can be found in the components/core/tabs file. For reference, you can view the source code of the styled Tabs components.

// import the styled components

import {
  Root,
  List,
  Trigger,
  Content,
  Contents,
  Text,
} from "components/core/tabs/styled-components"

// import the createTabs function
import { createTabs } from "@gluestack-ui/tabs"

// Understanding the API
export const Tabs = createTabs({
  Root,
  List,
  Trigger,
  Content,
  Contents,
  Text,
})

// Using the tabs component
export default () => (
  <Tabs>
    <TabsList>
      <TabsTrigger value="tab1">
        <TabsText>Tab 1</TabsText>
      </TabsTrigger>
      <TabsTrigger value="tab2">
        <TabsText>Tab 2</TabsText>
      </TabsTrigger>
      <TabsTrigger value="tab3">
        <TabsText>Tab 2</TabsText>
      </TabsTrigger>
    </TabsList>
    <TabsContents>
      <TabsContent value="tab1">
        <Text>Content 1</Text>
      </TabsContent>
      <TabsContent value="tab2">
        <Text>Content 2</Text>
      </TabsContent>
      <TabsContent value="tab3">
        <Text>Content 3</Text>
      </TabsContent>
    </TabsContents>
  </Tabs>
)