Tab.Item

Individual tab item component that represents a single tab within a Tab container. Supports icons, custom styling for active/inactive states, and theme integration with automatic color management.

Quick Example

import { Tab } from "@ovok/native";
import { Home, Settings, User } from "iconsax-react-nativejs";
import React from "react";

export const TabItemExample = () => {
  const [activeTab, setActiveTab] = React.useState("home");

  return (
    <Tab value={activeTab} onChange={setActiveTab}>
      <Tab.Item value="home" icon={(color) => <Home size={20} color={color} />}>
        Home
      </Tab.Item>
      <Tab.Item
        value="profile"
        icon={(color) => <User size={20} color={color} />}
      >
        Profile
      </Tab.Item>
      <Tab.Item
        value="settings"
        icon={(color) => <Settings size={20} color={color} />}
      >
        Settings
      </Tab.Item>
    </Tab>
  );
};

export default TabItemExample;

Props

Prop	Type	Required	Default	Description
value	string	✓	-	Unique identifier for the tab item
children	React.ReactNode	✓	-	Text content to display in the tab
icon	(color: string) => React.ReactNode	-	-	Function that renders an icon with given color
activeStyle	StyleProp<ViewStyle>	-	-	Custom styles applied when tab is active
inactiveStyle	StyleProp<ViewStyle>	-	-	Custom styles applied when tab is inactive
activeTextStyle	StyleProp<TextStyle>	-	-	Custom text styles applied when tab is active
inactiveTextStyle	StyleProp<TextStyle>	-	-	Custom text styles applied when tab is inactive
testID	string	-	-	Test identifier for automated testing

Inherits all props from TouchableOpacityProps

Component Behavior

The Tab.Item component:

1. State Awareness: Automatically detects if it's the active tab using context
2. Dynamic Styling: Applies different styles based on active/inactive state
3. Color Management: Provides appropriate colors to icon functions
4. Event Handling: Handles press events to update tab selection
5. Theme Integration: Uses theme colors for consistent appearance

Color System

Tab.Item automatically provides colors to icons and text based on state:

• Active: theme.colors.primary
• Inactive: theme.colors.onSurfaceDisabled

Styling

Theme Colors Used

• theme.colors.primary - Active tab color (text and icon)
• theme.colors.onSurfaceDisabled - Inactive tab color (text and icon)
• theme.spacing(1) - Gap between icon and text
• theme.spacing(2) - Vertical padding

Related Components

• Tab - Parent container component