Individual tab item component with icon support, active/inactive states, and theme integration

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

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

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;