TabItem

The TabItem component is used to represent the content of an individual tab in a tab-based navigation system.

Import

import { TabItem } from "phaselis";

Usage

import { TabItem, TabView } from "phaselis";
import { Text } from "react-native";

const Example = () => {
 return (
   <TabView>
     <TabItem title="Item 1">
       <Text>Tab Content 1</Text>
     </TabItem>
     <TabItem title="Item 2">
       <Text>Tab Content 2</Text>
     </TabItem>
   </TabView>
 );
};

export default Example;

Props

title

string

The title prop for the TabItem component defines the text displayed as the tab's label in the TabViewHeader.

import { Text } from "react-native";

<TabItem title="Item 2">
  <Text>Tab Content 2</Text>
</TabItem>

children

any

Content to be rendered inside the TabItem.

import { Text } from "react-native";

<TabItem>
  <Text>Content for this tab</Text>
</TabItem>

leftIcon / rightIcon

SlotIconName

Icon to display on the left/right side of the tab title in the header.

<TabItem title="Settings" leftIcon="Settings">
  <Text>Settings content</Text>
</TabItem>

style

Name	Type	Description
container	ViewStyle	Style for the container of the tab content.

You can style the TabItem with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the container.

// Object with named styles
<TabItem 
  title="Styled Tab"
  style={{
    container: { padding: 16, backgroundColor: "#f5f5f5", borderRadius: 8 }
  }}
>
  <Text>Content with styled container</Text>
</TabItem>

// Direct container styling
<TabItem 
  title="Direct Styling"
  style={{ padding: 16, backgroundColor: "#f0f0f0", borderRadius: 8 }}
>
  <Text>Content with direct styling</Text>
</TabItem>