🧠 Splash Screen Store

The Splash Screen Store provides a robust and persistent state solution using Zustand with MMKV storage. It powers splash screen customization for Zezo OTT apps, enabling local access to splash configuration data like images, videos, and animations.

It supports hydration at app startup, global state access, and is optimized for mobile performance.

🧾 Data Structure


interface ISplashScreenConfig {
  source: string;
  width: number;
  height: number;
  screenTime: number;
  fullscreen: boolean;
  resizeMode: "contain" | "cover" | "stretch" | "repeat" | "center";
  type: "image" | "video" | "lottie-animation";
  backgroundTransparent: boolean;
  backgroundColor: string;
}
 
interface ISplashData {
  _id: string;
  logo: string;
  app_splesh_screen: ISplashScreenConfig;
  login_poster: string | null;
}

🏪 Zustand Store Setup

Zustand handles the splash screen data and MMKV ensures it’s securely stored on-device.

ZezoOtt/store/splashStore.ts


import { create } from "zustand";
import { createJSONStorage, devtools, persist } from "zustand/middleware";
import { splashMMKVStorage } from "./storage";
 
export const useSplashStore = create<ISplashStoreState>()(
  persist(
    devtools((set) => ({
      splash: {
        _id: "",
        logo: "",
        app_splesh_screen: {
          source: "",
          width: 0,
          height: 0,
          screenTime: 1,
          fullscreen: false,
          resizeMode: "cover",
          type: "image",
          backgroundTransparent: false,
          backgroundColor: "#000",
        },
        login_poster: "",
      },
      spleshLogoLocal: null,
      setSplash: (splash) => set({ splash }),
      setSpleshLogoLocal: (logoPath) => set({ spleshLogoLocal: logoPath }),
    })),
    {
      name: "splash-screen-store",
      storage: createJSONStorage(() => splashMMKVStorage),
    }
  )
);

💾 MMKV Storage Adapter

A simple adapter that bridges Zustand and MMKV for persistent local storage.

ZezoOtt/store/storage.ts


import { MMKV } from "react-native-mmkv";
 
export const splashStorage = new MMKV({
  id: "splashScreenStorage",
  encryptionKey: "splashStorageSecret",
});
 
export const splashMMKVStorage = {
  setItem: (key, value) => splashStorage.set(key, value),
  getItem: (key) => splashStorage.getString(key) ?? null,
  removeItem: (key) => splashStorage.delete(key),
};

🌐 Fetch Splash Config from API

Hydration logic is triggered on app load.

ZezoOtt/Screens/SplashScreen/splash.utils.ts


import { getZezoOtt } from "@ZezoOtt/http";
import { useSplashStore } from "@ZezoOtt/store/splashStore";
 
export const fetchSplashScreenConfig = async () => {
  try {
    const response = await getZezoOtt().appSettings.getSettings();
    const { setSplash } = useSplashStore.getState();
    setSplash(response.data);
    return response.data;
  } catch (error) {
    console.error("❌ Failed to fetch splash config:", error);
    return null;
  }
};

📘 Reference: getZezoOtt().appSettings.getSettings() Documentation

🧹 Routes Enum

src/navigation/routes.ts


export enum Route {
  TabBar = "tabbar",
  SplashScreen = "splashscreen",
}

You should trigger splash config fetching as early as possible — ideally when the app initializes. Use react-query’s useQuery inside your root navigation.

src/navigation/Navigation.tsx


import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { useQuery } from "@tanstack/react-query";
import { fetchSplashScreenConfig } from "@ZezoOtt/Screens/SplashScreen/splash.utils";
import { Route } from "./routes";
import AuthFeature from "@features/auth";
import TabBar from "./TabBar";
 
const Stack = createNativeStackNavigator();
 
const Navigation: React.FC = () => {
  // 🔄 Fetch splash config on app load
  useQuery({
    queryKey: ["splashScreenConfig"],
    queryFn: fetchSplashScreenConfig,
  });
 
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{ headerShown: false }}
        initialRouteName={Route.SplashScreen}
      >
        <Stack.Screen
          name={Route.SplashScreen}
          component={AuthFeature.SplashScreen}
        />
        <Stack.Screen name={Route.TabBar} component={TabBar} />
        {/* More screens... */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default Navigation;

✅ Benefits

⚡ Ultra-fast storage/retrieval via MMKV
♻️ Automatic hydration on app startup
🧠 Centralized state management
🧹 Ready-to-use with UI components

🔗 Integrates With

SplashScreen component via useSplashStore()
Remote config fetch via fetchSplashScreenConfig()
Fully reactive: works with navigation guards, theme changers, etc.