TabView

The TabView component is used to display content divided into multiple tabs, offering a way to switch between different sections. The component allows customization of the header, active tab behavior, and styles.

Import

Phaselis exports the TabView component.

import { TabView } from "phaselis";

• TabView: Main component for creating tabbed navigation.

Usage

Basic TabView

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

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

export default Example;

Scrollable TabView

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

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

export default Example;

Props

activeTab

number

The index of the tab that should be active initially.

import { Text } from "react-native";

<TabView activeTab={1}>
  <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>

children required

any | any[]

The tabs to display, each represented as a TabItem component.

import { Text } from "react-native";

<TabView>
  <TabItem title="Overview">
    <Text>Overview Content</Text>
  </TabItem>
  <TabItem title="Details">
    <Text>Details Content</Text>
  </TabItem>
</TabView>

scrollable

boolean

Determines if the tab headers are scrollable.

import { Text } from "react-native";

<TabView scrollable>
  <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>

headerProps

TabViewHeaderProps

Props to customize the tab header, such as icons and styles.

import { Text } from "react-native";

<TabView
  headerProps={{
    showIcons: true,
    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>

style

Name	Type	Description
container	ViewStyle	Style for the main container of the TabView.
element	ViewStyle	Style for the content area of the active tab.

You can style the TabView with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the element (content area).

import { Text } from "react-native";

// Object with named styles
<TabView
  style={{
    container: { backgroundColor: "#f0f0f0", padding: 20 },
    element: { padding: 15 },
  }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabView>

// Direct element styling
<TabView
  style={{ padding: 15, backgroundColor: "#f8f9fa", borderRadius: 8 }}
>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabView>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<TabView containerStyle={{ backgroundColor: "#f5f5f5", borderRadius: 8 }}>
  <TabItem title="Item 1">
    <Text>Tab Content 1</Text>
  </TabItem>
  <TabItem title="Item 2">
    <Text>Tab Content 2</Text>
  </TabView>