📱 SplashScreen

The SplashScreen is a customizable React Native component used to display a branded startup screen using local or remote images, videos, or Lottie animations. It does not post any data to the server and works entirely on the client side.

✨ Features

🖼️ Supports static images, videos, Lottie animations
🌗 Auto theme switching (light/dark)
📶 Fully supports local & remote media (no server dependency)
🌈 Optional gradient overlay
⏱️ Auto-redirect after timeout or media end
🖥️ Fullscreen & responsive layout

🖼️ Preview

📦 Setup Store First

Before using <SplashScreen />, make sure to initialize the splash state store:

👉 See Splash Screen Store Setup

This store handles:

Encrypted MMKV state persistence
AES-based decryption
Global hydration via Zustand

👉 See Auth Store Setup

🚀 Usage Example

SplashScreen.tsx


import React from "react";
import { Auth } from "@zezosoft/zezo-ott-react-native-ui-kit";
 
import { useAuthStore } from "@ZezoOtt/store/authStore";
import { resetAndNavigate } from "@ZezoOtt/utils/NavigationUtil";
import { Route } from "@navigation/routes";
import { useSplashStore } from "@ZezoOtt/store/splashStore";
 
const SplashScreen = () => {
  const { user } = useAuthStore();
  const { splash } = useSplashStore.getState();
 
  return (
    <Auth.SplashScreen
      splashScreenConfig={splash.app_splesh_screen}
      backgroundImage={{
        source: splash.login_poster as string,
        resizeMode: "cover",
        gradientSplitBackground: 0.4,
      }}
      onRedirect={() => {
        if (user) {
          resetAndNavigate(Route.TabBar);
        } else {
          resetAndNavigate(Route.LoginWithPhone);
        }
      }}
    />
  );
};
 
export default SplashScreen;

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

✅ No server call – all media rendering and redirects happen locally

🔧 Props

`SplashScreenProps`

Prop	Type	Description
`splashScreenConfig`	`SplashScreenConfig`	Media source & display configuration
`innerContainerStyle`	`ViewStyle` (optional)	Style override for inner container (e.g., padding, margin)
`onRedirect`	`() => void`	Callback after timeout or media ends
`theme`	`AppTheme` (optional)	Force a specific theme (`light` or `dark`)
`backgroundImage`	`BackgroundImageProps` (optional)	Background image + gradient config

`SplashScreenConfig`

Property	Type	Description
`source`	`string`	Media source path or URL
`type`	`"image"` \| `"video"` \| `"lottie-animation"` (optional)	Type of media to display
`width`	`number`	Width of the splash content
`height`	`number`	Height of the splash content
`isStatic`	`boolean` (optional)	If true, disables animation/playback
`screenTime`	`number` (optional)	Timeout duration in seconds
`fullscreen`	`boolean` (optional)	Whether to use fullscreen layout
`resizeMode`	`'contain'` \| `'cover'` \| `'stretch'` \| `'repeat'` \| `'center'`	Resize mode for the splash media
`backgroundColor`	`string` (optional)	Background color behind media

`BackgroundImageProps`

Property	Type	Description
`source`	`string \| null` (optional)	Background image path or URL
`onImageError`	`(error: Error) => void` (optional)	Callback on image load failure
`gradientSplitBackground`	`number` (optional), Example `0.4`	Gradient split position (0 to 1)
`resizeMode`	`'cover'` \| `'contain'` \| `'stretch'` \| `'repeat'`	Resize mode for the background image

🔄 How It Works

Component renders at app launch.
Local or remote media is displayed.
Timeout starts (if set).
When timeout or media ends → onRedirect() is triggered.

💡 Developer Notes

Issue	Solution
Remote image not loading	Ensure it’s over HTTPS and accessible
Video not playing	Install and link `react-native-video`
Lottie not displaying	Confirm your Lottie JSON is mobile compatible
Delay in rendering	Use local assets or cache remote ones with `useInitSplashCacheSync`

✅ Summary

The SplashScreen:

Works fully client-side
Uses local or remote media
Doesn’t send or store any data externally
Easily integrates with any navigation flow