Skip to content

Tabs Primitive

A collection of layered content sections, referred to as tab panels, displayed individually.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/tabs

Usage

import * as React from 'react';
import * as TabsPrimitive from '@rn-primitives/tabs';
import { Text } from 'react-native';
function Example() {
const [value, setValue] = React.useState('account');
return (
<TabsPrimitive.Root
value={value}
onValueChange={setValue}
>
<TabsPrimitive.Primitive.List>
<TabsPrimitive.Trigger value='account'>
<Text>Account</Text>
</TabsPrimitive.Trigger>
<TabsPrimitive.Trigger value='password'>
<Text>Password</Text>
</TabsPrimitive.Trigger>
</TabsPrimitive.Primitive.List>
<TabsPrimitive.Content value='account'>
<Text>Account content</Text>
</TabsPrimitive.Content>
<TabsPrimitive.Content value='password'>
<Text>Password content</Text>
</TabsPrimitive.Content>
</TabsPrimitive.Root>
);
}

Props

Root

Extends View props

PropTypeNote
valuestring
onValueChange(value: string ) => void
asChildboolean(optional)
disabledboolean(optional)
orientation’horizontal’ | ‘vertical’Web Only (optional)
dir’ltr’ | ‘rtl’Web Only (optional)
activationMode’automatic’ | ‘manual’Web Only (optional)

List

Extends View props

PropTypeNote
asChildboolean(optional)

Trigger

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Content

Extends View props

PropTypeNote
valuestring
forceMountboolean(optional)
asChildboolean(optional)

useRootContext

Must be used within a Root component. It provides the following values from the dropdown menu: value, and onValueChange.

useTriggerContext

Must be used within a Trigger component. It provides the following values from the dropdown menu: value.