@zezosoft/zezo-ott-react-native-ui-kit 1.0.4 → 1.0.6

package/src/components/Auth/Login/LoginWithEmail.tsx

@@ -17,12 +17,12 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
@@ -53,7 +53,7 @@ type LoginWithEmailProps = {
   logoUri?: string;
   loadingSubmitBtn?: boolean;
 
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   text?: {
     emailLabel?: string;
     emailPlaceholder?: string;
@@ -113,7 +113,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
   const {
     control,
@@ -150,7 +150,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={isKeyboardOpen ? 0.31 : 0.35}
     >
       <View style={[styles.container, containerStyle]}>
@@ -162,7 +162,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -209,7 +209,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -250,7 +250,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                       spellCheck={false}
                       autoCorrect={false}
                       autoComplete="off"
-                      theme={resolvedTheme}
+                      theme={overrideTheme}
                     />
                     {!isKeyboardOpen &&
                       shouldRender(renderForgotPassword || onForgotPassword) &&
@@ -283,7 +283,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     title={text?.loginButton || 'Login'}
                     onPress={handleSubmit(handleFormSubmit)}
                     disabled={loadingSubmitBtn || !isValid || isLoading}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     titleStyle={{
                       fontSize: RFValue(14),
                     }}

package/src/components/Auth/Login/LoginWithPhone.tsx

@@ -12,13 +12,13 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import PhoneNumberInput from '../../Input/PhoneNumberInput';
 import TextButton from '../../Button/TextButton';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type PhoneField = {
@@ -49,7 +49,7 @@ type LoginWithPhoneProps = {
   };
   loadingSubmitBtn?: boolean;
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   text?: {
     phoneLabel?: string;
     phonePlaceholder?: string;
@@ -100,7 +100,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const [isLoading, setIsLoading] = React.useState(false);
 
   const {
@@ -181,7 +181,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
       <View
@@ -196,7 +196,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -240,7 +240,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                     errorMessage={errors.phone?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     accessibilityLabel={`Phone input${errors.phone ? ', error' : ''}`}
                   />
                 )}
@@ -256,7 +256,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 <Button.Primary
                   title={text.loginButton || DEFAULT_TEXT.loginButton}
                   disabled={loadingSubmitBtn || !isValid || isLoading}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   onPress={handleSubmit(handleFormSubmit)}
                   loadingText={
                     text.loadingSubmitBtnText ||

package/src/components/Auth/OTP/OTP.tsx

@@ -19,12 +19,12 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import BackBtn from '../../Button/BackBtn';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import Display from '../../../utils/Display';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type OTPProps = {
@@ -43,7 +43,7 @@ type OTPProps = {
   };
   loading?: boolean;
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   otpDigitCount?: number;
   keyboardType?: KeyboardTypeOptions;
   phoneNumber?: string;
@@ -123,7 +123,7 @@ const OTP: React.FC<OTPProps> = ({
   cellStyle,
   focusCellStyle,
 }) => {
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [otp, setOtp] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -252,7 +252,7 @@ const OTP: React.FC<OTPProps> = ({
     typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
-      theme={resolvedTheme}
+      theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
       gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
@@ -266,7 +266,7 @@ const OTP: React.FC<OTPProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={backBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -352,7 +352,7 @@ const OTP: React.FC<OTPProps> = ({
               ) : (
                 <Button.Primary
                   title={text.submitButton || DEFAULT_TEXT.submitButton}
-                  theme={resolvedTheme}
+                  theme={overrideTheme}
                   onPress={handleSubmit}
                   loadingText={text.loadingSubmitBtnText}
                   titleStyle={{ fontSize: RFValue(13) }}

package/src/components/Auth/QrLogin/QrLogin.tsx

@@ -9,14 +9,13 @@ import {
   Dimensions,
   TouchableOpacity,
   ActivityIndicator,
-  StatusBar,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { Text } from '../../Text';
 import AppHeader from '../../Headers/AppHeader';
-import { useTheme } from '../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
 import {
   Camera,
@@ -26,6 +25,7 @@ import {
   type Code as BaseCode,
 } from 'react-native-vision-camera';
 import QrViewArea from './components/QrViewArea';
+import { AppStatusBar } from '../../common/AppStatusBar';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 const HEADER_HEIGHT = 25;
@@ -43,7 +43,7 @@ export type QrLoginProps = {
   scanButtonText?: string;
   onBackPress?: () => void;
   onScanSuccess?: (value: string) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   cameraType?: 'back' | 'front';
   layout?: 'one' | 'two';
 };
@@ -65,7 +65,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
   cameraType = DEFAULTS.cameraType,
   layout = 'one',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const [scanActive, setScanActive] = useState(false);
@@ -144,17 +144,13 @@ export const QrLogin: React.FC<QrLoginProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
-      />
+      <AppStatusBar theme={theme} />
 
       <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
         <AppHeader
           title={title}
           onBackPress={onBackPress}
-          theme={appliedTheme}
+          theme={theme}
           titleAlign="left"
         />
       </View>
@@ -170,7 +166,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
                 codeScanner={codeScanner}
               />
               <QrViewArea
-                theme={appliedTheme}
+                theme={theme}
                 layout={layout}
                 headerHeight={HEADER_HEIGHT}
               />

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import Svg, { Rect } from 'react-native-svg';
-import type { AppTheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
@@ -22,7 +22,7 @@ type QrViewAreaProps = {
   scanBoxWidth?: number;
   layout?: 'one' | 'two';
   headerHeight?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const QrViewArea: React.FC<QrViewAreaProps> = ({
@@ -31,7 +31,7 @@ const QrViewArea: React.FC<QrViewAreaProps> = ({
   headerHeight = 60,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const anim = useRef(new Animated.Value(0)).current;

package/src/components/Auth/SignUp/SignUp.tsx

@@ -18,12 +18,12 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
@@ -52,7 +52,7 @@ export interface SignupProps {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loadingSubmitBtn?: boolean;
   text?: {
     usernameLabel?: string;
@@ -120,7 +120,7 @@ const Signup: React.FC<SignupProps> = ({
     },
     mode: 'onChange',
   });
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -144,7 +144,7 @@ const Signup: React.FC<SignupProps> = ({
 
   return (
     <BackgroundLayout
-      theme={resolvedTheme}
+      theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
       gradientSplitBackground={
         isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
@@ -160,7 +160,7 @@ const Signup: React.FC<SignupProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -205,7 +205,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.username?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -236,7 +236,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -277,7 +277,7 @@ const Signup: React.FC<SignupProps> = ({
                     spellCheck={false}
                     autoCorrect={false}
                     autoComplete="off"
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -312,7 +312,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.confirmPassword?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="none"
                     autoCapitalize="none"
                     spellCheck={false}
@@ -334,7 +334,7 @@ const Signup: React.FC<SignupProps> = ({
                   <Button.Primary
                     title={text?.signupButton || 'Sign up'}
                     disabled={!isValid}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     loading={loadingSubmitBtn || isLoading}
                     loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
                     onPress={handleSubmit(handleFormSubmit)}

package/src/components/Auth/SplashScreen/SplashScreen.tsx

@@ -1,23 +1,25 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Wed 30 Jul 2025 at 03:21 PM
+ * @lastModified Fri 17 Oct 2025 at 09:51 PM
  */
 
 import React, { useEffect, useMemo, useCallback } from 'react';
+import { type ViewStyle } from 'react-native';
 import SplashImage from './components/SplashImage/SplashImage';
 import SplashVideo from './components/SplashVideo/SplashVideo';
 import SplashLottie from './components/SplashLottie/SplashLottie';
-import { StatusBar, type ViewStyle } from 'react-native';
-import type { AppTheme } from '../../../theme/themes';
-import { useTheme } from '../../../theme';
-import { useInitSplashCacheSync } from '../../../hooks/useInitSplashCacheSync';
+
+import type { ThemeOverride } from '../../../theme/themes';
+
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import Color from 'color';
-type SplashSourceType = 'image' | 'video' | 'lottie-animation';
+import { useSplashCache } from '../../../hooks/useSplashCache';
+import { AppStatusBar } from '../../common/AppStatusBar';
+
+type SplashType = 'image' | 'video' | 'lottie-animation';
 
 type SplashScreenConfig = {
   source: string;
-  type?: SplashSourceType;
+  type?: SplashType;
   width: number;
   height: number;
   isStatic?: boolean;
@@ -28,10 +30,11 @@ type SplashScreenConfig = {
 };
 
 type SplashScreenProps = {
+  logoUrl: string;
   splashScreenConfig: SplashScreenConfig;
   innerContainerStyle?: ViewStyle;
   onRedirect: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   backgroundImage?: {
     source?: string | null;
     onImageError?: (error: Error) => void;
@@ -40,20 +43,11 @@ type SplashScreenProps = {
   };
 };
 
-const DEFAULT_IMAGE_TIMEOUT_SECONDS = 5;
+const DEFAULT_IMAGE_TIMEOUT = 5;
+const FALLBACK_TIMEOUT = 0.5;
 
 export const SplashScreen: React.FC<SplashScreenProps> = ({
-  splashScreenConfig: {
-    source: splashSource,
-    type: splashType = 'image',
-    width,
-    height,
-    isStatic = false,
-    screenTime,
-    fullscreen = false,
-    resizeMode = 'contain',
-    backgroundColor: splashBackgroundColor,
-  },
+  splashScreenConfig,
   innerContainerStyle,
   backgroundImage = {
     gradientSplitBackground: 0.4,
@@ -62,32 +56,38 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   onRedirect,
   theme: overrideTheme,
 }) => {
-  const isRemoteSource = useMemo(
-    () => splashSource.startsWith('http'),
-    [splashSource]
-  );
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const {
+    source: splashSource,
+    type: splashType = 'image',
+    width,
+    height,
+    isStatic = false,
+    screenTime,
+    fullscreen = false,
+    resizeMode = 'contain',
+    backgroundColor: splashBgColor,
+  } = splashScreenConfig;
 
+  const isRemote = splashSource.startsWith('http');
   const isImageSplash = splashType === 'image';
-  const backgroundImageUri =
+
+  const backgroundImageUrl =
     isImageSplash && backgroundImage.source?.startsWith('http')
       ? backgroundImage.source
       : undefined;
 
-  const {
-    data: { localPathLogo },
-  } = useInitSplashCacheSync({
-    logoUrl: isRemoteSource ? splashSource : undefined,
-    backgroundUrl: backgroundImageUri,
+  const { data } = useSplashCache({
+    logoUrl: isRemote ? splashSource : undefined,
+    backgroundUrl: backgroundImageUrl,
   });
 
   const resolvedSplashUri =
-    isRemoteSource && localPathLogo ? localPathLogo : splashSource;
-  const effectiveTimeout = useMemo(() => {
-    const timeout =
-      screenTime ??
-      (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
-    return Number.isFinite(timeout) ? Number(timeout) : 0;
+    isRemote && data.logoPath ? data.logoPath : splashSource;
+
+  const displayTimeout = useMemo(() => {
+    if (typeof screenTime === 'number' && screenTime > 0) return screenTime;
+    if (isImageSplash || isStatic) return DEFAULT_IMAGE_TIMEOUT;
+    return 0;
   }, [screenTime, isImageSplash, isStatic]);
 
   const handleRedirect = useCallback(() => {
@@ -99,17 +99,12 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   }, [onRedirect]);
 
   useEffect(() => {
-    const fallbackTimeout = 0.5; // fallback to 0.5s even if 0
-    const timeout = effectiveTimeout > 0 ? effectiveTimeout : fallbackTimeout;
-    const timer = setTimeout(() => {
-      handleRedirect();
-    }, timeout * 1000);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [effectiveTimeout, handleRedirect]);
-
-  const splashComponentProps = useMemo(
+    const timeoutSec = displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT;
+    const timer = setTimeout(handleRedirect, timeoutSec * 1000);
+    return () => clearTimeout(timer);
+  }, [displayTimeout, handleRedirect]);
+
+  const splashProps = useMemo(
     () => ({
       source: resolvedSplashUri,
       width,
@@ -121,68 +116,69 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   );
 
   const renderSplashContent = useCallback(() => {
+    const videoExtensions = ['.mp4', '.mov', '.mkv', '.webm', '.avi', '.3gp'];
+    const LOTTIE_EXTENSIONS = ['.json', '.lottie'];
     switch (splashType) {
       case 'video':
-        return (
+        const isVideoFile = videoExtensions.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
+        );
+
+        return isVideoFile ? (
           <SplashVideo
-            {...splashComponentProps}
-            onEnd={effectiveTimeout ? undefined : handleRedirect}
+            {...splashProps}
+            onEnd={displayTimeout ? undefined : handleRedirect}
           />
+        ) : null;
+
+      case 'lottie-animation': {
+        const isLottieFile = LOTTIE_EXTENSIONS.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
         );
-      case 'lottie-animation':
-        return (
+
+        return isLottieFile ? (
           <SplashLottie
-            {...splashComponentProps}
-            onAnimationFinish={effectiveTimeout ? undefined : handleRedirect}
+            {...splashProps}
+            onAnimationFinish={displayTimeout ? undefined : handleRedirect}
           />
-        );
+        ) : null;
+      }
+
       case 'image':
       default:
-        return <SplashImage {...splashComponentProps} />;
-    }
-  }, [splashType, splashComponentProps, effectiveTimeout, handleRedirect]);
-  const getSafeBackgroundColor = (
-    inputColor: string | undefined,
-    fallbackColor: string
-  ): string => {
-    try {
-      if (!inputColor) return fallbackColor;
-
-      const parsedColor = Color(inputColor);
-      const alpha = parsedColor.alpha(); // 0 to 1
-
-      if (alpha < 0.8) return fallbackColor; // ✅ your condition
-
-      return parsedColor.hex(); // Always convert to solid hex
-    } catch (e) {
-      return fallbackColor;
+        return <SplashImage {...splashProps} />;
     }
-  };
-  const colorToUse = getSafeBackgroundColor(
-    splashBackgroundColor,
-    resolvedTheme.colors.background
-  );
-  const isDark = Color(colorToUse).isDark();
-  const statusBarStyle: 'light-content' | 'dark-content' = isDark
-    ? 'light-content'
-    : 'dark-content';
+  }, [
+    splashType,
+    resolvedSplashUri,
+    splashProps,
+    displayTimeout,
+    handleRedirect,
+  ]);
 
   return (
     <BackgroundLayout
       backgroundImage={isImageSplash ? backgroundImage.source : undefined}
-      backgroundColor={splashBackgroundColor}
+      backgroundColor={splashBgColor}
       resizeMode={backgroundImage.resizeMode ?? 'cover'}
       innerContainerStyle={innerContainerStyle}
       onImageError={backgroundImage.onImageError}
-      theme={resolvedTheme}
+      theme={overrideTheme}
       gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
     >
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={statusBarStyle}
+      <AppStatusBar
+        theme={{
+          ...overrideTheme,
+          dark: {
+            ...overrideTheme?.dark,
+            background: splashBgColor,
+          },
+          light: {
+            ...overrideTheme?.light,
+            background: splashBgColor,
+          },
+        }}
       />
-
       {renderSplashContent()}
     </BackgroundLayout>
   );