🧩 Header

The Zezo OTT UI Kit includes three flexible header components, optimized for OTT-style React Native apps.

Header Variant	Layout
`Header.One`	Logo + Menu + Search
`Header.Two`	Centered Logo + Menu Button
`Header.Three`	Logo + Custom Category View (e.g. “Movies”)

🖼️ Preview

Use these headers anywhere in your app — Home, Category, Detail, or Search screens.

Header.One Header One

Header.Two Header Two

Header.Three Header Three

📡 API Call Methods

⚙️ First, set up the getZezoOtt API client: API Client Setup

You can fetch branding and category data using:

🔗 getZezoOtt().settings.get() — Fetch app-wide settings like logo, theme, etc.
🔗 getZezoOtt().categories.get() — Fetch list of available content categories

🎯 Example Field Mapping

Field	Used In
`settings.logo`	`logoUri` prop in all Header components
`categories`	`category` prop in `Header.Three`

🔹 `Header.One`

Best suited for dashboards or landing screens.

▶️ Example

HomeScreen.tsx


import React from "react";
import {
  Header,
  SafeAreaWrapper,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
 
const HomeScreen = () => {
  return (
    <SafeAreaWrapper>
      <Header.One
        logoUri={
          "https://res.cloudinary.com/djuznvvbr/image/upload/v1749801710/ZezoOttLogo_ztf50t.png" // App logo URL from settings API
        }
        onMenuPress={() => console.log("Menu")}
        onSearchPress={() => console.log("Search")}
        isLoading={} // settings API loading state for logo
      />
    </SafeAreaWrapper>
  );
};
 
export default HomeScreen;

📋 Props

Prop	Type	Description
`logoUri`	`string`	Logo image URL
`onMenuPress`	`() => void`	Callback for menu icon
`onSearchPress`	`() => void`	Callback for search icon
`isLoading`	`boolean`	Show loading shimmer on logo
`MenuIcon`	`React.FC<{ width: number, height: number }>`	Optional custom menu icon
`SearchIcon`	`React.FC<{ width: number, height: number }>`	Optional custom search icon
`theme`	`AppTheme`	Optional theme override

🔹 `Header.Two`

Ideal for detail pages or back-navigation flows.

▶️ Example

HomeScreen.tsx


import React from "react";
import {
  Header,
  SafeAreaWrapper,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
 
const HomeScreen = () => {
  return (
    <SafeAreaWrapper>
      <Header.Two
        logoUri={
          "https://res.cloudinary.com/djuznvvbr/image/upload/v1749801710/ZezoOttLogo_ztf50t.png" // App logo URL from settings API
        }
        onMenuPress={() => console.log("Menu Press")}
        isLoading={} // settings API loading state for logo
      />
    </SafeAreaWrapper>
  );
};
 
export default HomeScreen;

📋 Props

Prop	Type	Description
`logoUri`	`string`	Center logo image
`onMenuPress`	`() => void`	Callback for back/menu icon
`MenuIcon`	`React.FC<{ width: number, height: number }>`	Optional custom left-side icon
`isLoading`	`boolean`	Show loading shimmer on logo
`theme`	`AppTheme`	Optional theme override

🔹 `Header.Three`

Great for category views like Movies, Shows, etc.

▶️ Example

HomeScreen.tsx


import React from "react";
import { FlatList } from "react-native";
import {
  Header,
  SafeAreaWrapper,
  Text,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
import { getZezoOtt } from "@ZezoOtt/http";
import { useQuery } from "@tanstack/react-query";
 
const HomeScreen = () => {
  return (
    <SafeAreaWrapper>
      <Header.Three
        logoUri={
          "https://res.cloudinary.com/djuznvvbr/image/upload/v1749801710/ZezoOttLogo_ztf50t.png" // App logo URL from settings API
        }
        isLoading={} // settings API loading state for logo
        category={
          <FlatList
            data={categories} // Category list from categories API response
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => item._id}
            contentContainerStyle={{
              flexDirection: "row",
              gap: 12,
            }}
            renderItem={({ item }) => <Text key={item._id}>{item.name}</Text>}
          />
        }
      />
    </SafeAreaWrapper>
  );
};
 
export default HomeScreen;

📋 Props

Prop	Type	Description
`logoUri`	`string`	Logo image URL
`isLoading`	`boolean`	Show loading shimmer on logo
`category`	`React.ReactNode`	Element to render next to the logo
`theme`	`AppTheme`	Optional theme override

💡 Features

✅ Theming (light/dark mode ready)
✅ Custom icons supported via props
✅ Cross-platform (Android/iOS)
✅ Touch ripple & press feedback (uses Pressable)
✅ Icon scaling powered by react-native-size-matters

🧩 Header

🖼️ Preview

📡 API Call Methods

🎯 Example Field Mapping

🔹 Header.One

▶️ Example

📋 Props

🔹 Header.Two

▶️ Example

📋 Props

🔹 Header.Three

▶️ Example

📋 Props

💡 Features

🔹 `Header.One`

🔹 `Header.Two`

🔹 `Header.Three`