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

The public type includes TouchableOpacityProps, but the renderer explicitly owns onPress and forwards only style and testID to the touchable. Other touchable props are accepted by the type but are not applied by the current renderer.

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

The component does not add an accessibility role, state, or label automatically.

Related Components

• Tab - Parent container component