🚀 TabBar

The Zezo OTT UI Kit provides a sleek and highly customizable TabBar component designed for OTT-style mobile apps. Fully compatible with React Navigation , it offers 3 beautifully crafted variants to suit different design needs.

✅ Key Features

🎨 Theme-aware: supports light and dark modes
🧩 Works with Lucide icons or custom icons
⚙️ Built on top of React Navigation
🔀 onTabPress callback for tab change handling
🧱 Prebuilt Variants: .One, .Two, .Three

🖼️ Design Preview

TabBar.One TabBar One

TabBar.Two TabBar Two

TabBar.Three TabBar Three

🧪 Usage Example

TabBar.tsx


import React from "react";
import {
  TabBar as ZezoOttTabBar,
  TabBarOneProps,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
import { Home, Search, Heart, User } from "lucide-react-native";
import { Route } from "./routes";
import HomeFeature from "@features/home"; //Setup Go To Getting Started Page "@features/home"
 
const tabs: TabBarOneProps["tabs"] = [
  {
    key: Route.Home,
    name: "Home",
    icon: Home,
    screenComponent: HomeFeature.HomeScreen,
  },
  {
    key: Route.Search,
    name: "Search",
    icon: Search,
    screenComponent: () => <></>,
  },
  {
    key: Route.Favorites,
    name: "Favorite",
    icon: Heart,
    screenComponent: () => <></>,
  },
  {
    key: Route.Settings,
    name: "Settings",
    icon: User,
    screenComponent: () => <></>,
  },
];
 
export default function TabBar() {
  const handleTabPress = (key: string) => {
    console.log("Tab selected:", key);
  };
 
  return <ZezoOttTabBar.One tabs={tabs} onTabPress={handleTabPress} />;
}

🔗 See related route definition: Route enum from @navigation/routes.ts

🎨 Available Variants

Variant	Description
`TabBar.One`	Clean, minimal layout with icon and label
`TabBar.Two`	Elevated pill-style design with rounded corners
`TabBar.Three`	Glassmorphic floating bar with blur & depth

🧾 Props Reference

Prop	Type	Description
`tabs`	`TabBarOneProps["tabs"]`	Array of tab items (icon, label, component)
`onTabPress`	`(key: string) => void`	Callback when a tab is pressed
`theme`	`AppTheme`	Optional theme override
`renderIcon`	`(tab) => ReactNode`	(Only for `.One`): custom icon renderer