TabViewHeader

The TabViewHeader component is used to customize and control the appearance and behavior of the tab headers in a TabView.

Usage

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

const Example = () => {
  return (
    <TabView
      headerProps={{
        data: [{ text: "Overview" }, { text: "Details" }, { text: "More" }],
        activeTab: 1,
        handleOnPress: (index) => console.log(`Tab ${index} pressed`),
        scrollable: true,
        style: { backgroundColor: "#e0e0e0", padding: 5 },
      }}
    >
      <TabItem title="Overview">
        <Text>Overview Content</Text>
      </TabItem>
      <TabItem title="Details">
        <Text>Details Content</Text>
      </TabItem>
      <TabItem title="More">
        <Text>More Content</Text>
      </TabItem>
    </TabView>
  );
};

export default Example;

Props

data

any[]

The data array used to display tab headers, typically derived from the title props of TabItem components.

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

<TabView
  headerProps={{
    data: [{ text: 'Tab 1' }, { text: 'Tab 2' }],
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabItem>
  {/* Add more tabs here */}
</TabView>

activeTab

number

The index of the currently active tab.

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

<TabView
  headerProps={{
    activeTab: 0,
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabItem>
  {/* Add more tabs here */}
</TabView>

handleOnPress

(index: number) => void

Function called when a tab header is pressed. It is used to set the active tab and handle any additional behavior needed on tab click.

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

<TabView
  headerProps={{
    handleOnPress: (index) => console.log(`Tab ${index} pressed`),
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabItem>
  {/* Add more tabs here */}
</TabView>

style

Name	Type	Description
container	ViewStyle	Style for the outer container of the tab header.
element	ViewStyle	Style for the individual tab elements within the header.

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

<TabView
  headerProps={{
    style: {
      container: { backgroundColor: "#eef8ff", padding: 10 },
      element: { borderBottomWidth: 2, borderColor: "#1149bc" },
    },
  }}
>
  <TabItem title="Home">
    <Text>Home Content</Text>
  </TabItem>
  <TabItem title="Settings">
    <Text>Settings Content</Text>
  </TabItem>
</TabView>

scrollable

boolean

Indicates if the tab headers should be scrollable when they exceed the container width.

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

<TabView
  headerProps={{
    scrollable: true,
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabItem>
  {/* Add more tabs here */}
</TabView>

leftIcon / rightIcon

SlotIconName

Optional icons that can be displayed on the left or right side of the tab headers.

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

<TabView
  headerProps={{
    leftIcon: "ArrowLeft",
    rightIcon: "ArrowRight",
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabItem>
  {/* Add more tabs here */}
</TabView>