🚀 Get Started with Zezo OTT UI Kit (React Native)

Zezo OTT UI Kit empowers you to build stunning OTT-style mobile apps using React Native.

🛠️ This guide is optimized for React Native CLI users for best performance and compatibility. Expo (with Prebuild) is also supported, but Pure Expo is not compatible due to native module requirements.

✅ Supported Environments

Platform	Support
React Native CLI	✅ Fully Supported
Expo (Prebuild)	✅ Fully Supported
Expo (Pure)	❌ Not Supported

⚠️ Warning: The UI kit relies on native modules, making it incompatible with Pure Expo (without prebuild or EAS).

🛠 Choose Your Setup

Follow the steps for either React Native CLI or Expo (Prebuild), then proceed to the common setup steps.

React Native CLI

React Native CLI Setup

Step 1: Create a New Project

Install React Native CLI:

Terminal


npm uninstall -g react-native-cli @react-native-community/cli

Create your project:

Terminal


npx react-native init ZezoOTT
cd ZezoOTT

Note: Replace ZezoOTT with your preferred app name.

Step 2: Install Zezo UI Kit

yarn

Terminal


yarn add @zezosoft/zezo-ott-react-native-ui-kit

Step 3: Configure `babel.config.js`

Install Babel module resolver:

yarn

Terminal


yarn add --dev babel-plugin-module-resolver

Update babel.config.js:

babel.config.js


module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        alias: {
          "@features": "./src/features",
          "@navigation": "./src/navigation",
          "@utils": "./src/utils",
        },
      },
    ],
    "react-native-reanimated/plugin",
  ],
};

Reset Metro bundler:

Terminal


npx react-native start --reset-cache

Tip: If Metro bundler fails to start, ensure all dependencies are installed (npm install or yarn) and try again.

Step 4: Update `tsconfig.json`

tsconfig.json


{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@features/*": ["features/*"],
      "@navigation/*": ["navigation/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

Step 5: Continue with Common Setup

➡️ Proceed to Common Setup Steps below.

Common Setup Steps

Step 6: Setup Home Screen

In this step, you will create the Home Screen for your Zezo OTT application feature module. This includes setting up a UI layout using the components from the @zezosoft/zezo-ott-react-native-ui-kit and exposing it via a feature entry point.

👤 1. Create HomeScreen Component

Create the file: src/features/home/HomeScreen/HomeScreen.tsx

src/features/home/HomeScreen/HomeScreen.tsx


import React from "react";
import {
  SafeAreaWrapper,
  SizeMatters,
  Text,
  View,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
 
/**
 * HomeScreen
 * A simple home screen displaying a welcome message.
 */
const HomeScreen = () => {
  return (
    <SafeAreaWrapper>
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text style={{ fontSize: SizeMatters.scale(25) }}>
          Welcome to Zezo OTT
        </Text>
      </View>
    </SafeAreaWrapper>
  );
};
 
export default HomeScreen;

Explanation:

SafeAreaWrapper: Ensures the screen content is rendered within the safe area boundaries of a device.
SizeMatters.scale(25): Scales font size based on screen dimensions for better responsiveness.
View and Text: Used for basic layout and content display.

📦 2. Create Home Feature Entry Point

Create the file: src/features/home/index.ts

src/features/home/index.ts


import HomeScreen from "./HomeScreen/HomeScreen";
 
/**
 * HomeFeature module
 * Exposes all public components/screens related to the Home feature.
 */
const HomeFeature = {
  HomeScreen,
};
 
export default HomeFeature;

Explanation:

This acts as a single entry point to the Home feature.
Makes it easier to import and organize screens in the main app navigator.

yarn

Terminal


yarn add @react-navigation/native @react-navigation/native-stack
react-native-screens react-native-safe-area-context
react-native-gesture-handler react-native-reanimated
lucide-react-native react-native-flash-message

2. Create routes.ts file:

src/navigation/routes.ts


export const Route = {
  TabBar: "TabBar",
  Home: "Home",
  // Add More Route
};

3. Create TabBar.tsx file:

src/navigation/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 HomeFeature from "@features/home";
 
const EmptyComponent = () => null;
 
const tabs: TabBarOneProps["tabs"] = [
  {
    key: "home",
    name: "Home",
    icon: Home,
    screenComponent: HomeFeature.HomeScreen,
  },
  {
    key: "search",
    name: "Search",
    icon: Search,
    screenComponent: EmptyComponent,
  },
  {
    key: "favourite",
    name: "Favorite",
    icon: Heart,
    screenComponent: EmptyComponent,
  },
  {
    key: "profile",
    name: "Profile",
    icon: User,
    screenComponent: EmptyComponent,
  },
];
 
export default function TabBar() {
  return (
    <ZezoOttTabBar.One tabs={tabs} onTabPress={(key) => console.log(key)} />
  );
}

4. Create NavigationUtil.ts file:

src/ZezoOtt/utils/NavigationUtil.ts


import { Route } from "@navigation/routes";
import {
  createNavigationContainerRef,
  CommonActions,
  StackActions,
} from "@react-navigation/native";
import { Alert, BackHandler, Platform } from "react-native";
 
export const navigationRef = createNavigationContainerRef();
 
export async function navigate<T extends object>(
  routeName: string,
  params?: T
) {
  navigationRef.isReady();
  if (navigationRef.isReady()) {
    navigationRef.dispatch(CommonActions.navigate(routeName, params || {}));
  }
}
 
export async function resetAndNavigate<T extends object>(
  routeName: string,
  params?: T,
  onBackGoToHome?: boolean
) {
  navigationRef.isReady();
  if (navigationRef.isReady()) {
    if (onBackGoToHome) {
      navigationRef.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            { name: Route.TabBar },
            { name: routeName, params: params || {} },
          ],
        })
      );
    } else {
      navigationRef.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [{ name: routeName, params: params || {} }],
        })
      );
    }
  }
}
 
export async function goBack() {
  if (navigationRef.isReady()) {
    if (navigationRef.canGoBack()) {
      navigationRef.dispatch(CommonActions.goBack());
    } else {
      Alert.alert(
        "Exit App",
        Platform.OS === "android"
          ? "Are you sure you want to exit?"
          : "Press the home button to exit.",
        Platform.OS === "android"
          ? [
              { text: "Cancel", style: "cancel" },
              { text: "Exit", onPress: () => BackHandler.exitApp() },
            ]
          : [{ text: "OK", style: "default" }],
        { cancelable: true }
      );
    }
  }
}
 
export async function push(routeName: string, params?: object) {
  navigationRef.isReady();
  if (navigationRef.isReady()) {
    navigationRef.dispatch(StackActions.push(routeName, params));
  }
}
 
export function canGoBack() {
  navigationRef.isReady();
  if (navigationRef.isReady()) {
    return navigationRef.canGoBack();
  }
}
 
export async function prepareNavigation() {
  navigationRef.isReady();
}
 
export function getCurrentRouteName(): string | undefined {
  if (navigationRef.isReady()) {
    return navigationRef.getCurrentRoute()?.name;
  }
  return undefined;
}

Create src/navigation/Navigation.tsx:

src/navigation/Navigation.tsx


import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import TabBar from "./TabBar";
import { Route } from "./routes";
import HomeFeature from "@features/home";
 
const Stack = createNativeStackNavigator();
 
export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name={Route.TabBar} component={TabBar} />
        <Stack.Screen name={Route.Home} component={HomeFeature.HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Step 8: Update `App.tsx`

Update App.tsx:

App.tsx


import React from "react";
import { ZezoUIProvider } from "@zezosoft/zezo-ott-react-native-ui-kit";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import FlashMessage from "react-native-flash-message";
import Navigation from "@navigation/Navigation";
 
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ZezoUIProvider autoSwitchTheme>
        <Navigation />
        <FlashMessage position="top" />
      </ZezoUIProvider>
    </GestureHandlerRootView>
  );
}

🔁 Final Step: Restart the Project

After setup, restart your development server:

yarn

Terminal


yarn start --reset-cache

Android

yarn

Terminal


yarn android

✅ Summary

✅ You’re now set up with:

Zezo OTT UI Kit installed
Navigation integrated with React Navigation
Module aliases for cleaner imports
Theming enabled via ZezoUIProvider
A ready-to-build OTT app UI base

Troubleshooting Tips:

Build errors: Run npm install or yarn to ensure all dependencies are installed.

Metro bundler issues: Clear cache with npx react-native start --reset-cache.

Native module errors: For Expo, verify prebuild was run (npx expo prebuild).

🚀 Get Started with Zezo OTT UI Kit (React Native)

✅ Supported Environments

🛠 Choose Your Setup

React Native CLI

React Native CLI Setup

Step 1: Create a New Project

Step 2: Install Zezo UI Kit

yarn

npm

Step 3: Configure babel.config.js

yarn

npm

Step 4: Update tsconfig.json

Step 5: Continue with Common Setup

Expo (Prebuild)

Expo (Prebuild) Setup

Step 1: Create a New Project

yarn

npm

📁 iOS or Android Folder Missing?

💡 Still not working?

⚠️ Notes:

Step 2: Install Zezo UI Kit

yarn

npm

Step 3: Update tsconfig.json

Step 4: Continue with Common Setup

Common Setup Steps

Step 6: Setup Home Screen

👤 1. Create HomeScreen Component

📦 2. Create Home Feature Entry Point

Step 7: Set Up Navigation

1. Install navigation dependencies:

yarn

npm

2. Create routes.ts file:

3. Create TabBar.tsx file:

4. Create NavigationUtil.ts file:

Step 8: Update App.tsx

🔁 Final Step: Restart the Project

yarn

npm

Android

yarn

npm

Ios

yarn

npm

✅ Summary

Step 3: Configure `babel.config.js`

Step 4: Update `tsconfig.json`

Step 3: Update `tsconfig.json`

Step 8: Update `App.tsx`