@zezosoft/zezo-ott-react-native-ui-kit 1.0.0 → 1.0.2

package/src/components/TabBar/Three.tsx

@@ -1,14 +1,15 @@
 /**
- * @author Ashok Desai
- * @lastModified Jun 24, 2025 at 2:30 PM
+ * @author Naresh Desai
+ * @lastModified Sat 26 Jul 2025 at 12:37 PM
  */
 import React from 'react';
 import { View, Pressable, StyleSheet, Platform } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 import { createBottomTabNavigator, type BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '@zezosoft/zezo-ott-react-native-ui-kit';
+
 import type { AppTheme, ITheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface ITab {
   key: string;
@@ -39,7 +40,15 @@ const CustomTabBar: React.FC<
   }
 > = ({ state, navigation, tabs, onTabPress, theme }) => (
   <View style={styles.bottomWrapper}>
-    <View style={[styles.bottomBox, { borderColor: theme.colors.border }]}>
+    <View
+      style={[
+        styles.bottomBox,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: Platform.OS === 'android' ? theme.colors.backdrop : 'transparent'
+        }
+      ]}
+    >
       {Platform.OS !== 'web' && (
         <BlurView
           style={StyleSheet.absoluteFill}
@@ -53,7 +62,8 @@ const CustomTabBar: React.FC<
           const isFocused = state.index === index;
           const iconColor = isFocused ? theme.colors.buttonText : theme.colors.textPrimary;
           const bgColor = isFocused ? theme.colors.button : theme.colors.blueBackground;
-          const isBorderCode = isFocused ? theme.colors.button : theme.colors.border;
+          const isBorderColor = isFocused ? theme.colors.button : theme.colors.border;
+
           return (
             <Pressable
               key={tab.key}
@@ -65,7 +75,7 @@ const CustomTabBar: React.FC<
                 styles.icon,
                 {
                   backgroundColor: bgColor,
-                  borderColor: isBorderCode
+                  borderColor: isBorderColor
                 }
               ]}
             >
@@ -87,7 +97,10 @@ const TabBarThree: React.FC<TabBarThreeProps> = ({ tabs, theme, onTabPress }) =>
   const { theme: appliedTheme } = useTheme(theme);
 
   return (
-    <Tab.Navigator screenOptions={{ headerShown: false }} tabBar={renderTabBar(tabs, onTabPress, appliedTheme)}>
+    <Tab.Navigator
+      screenOptions={{ headerShown: false, tabBarShowLabel: false, tabBarHideOnKeyboard: true }}
+      tabBar={renderTabBar(tabs, onTabPress, appliedTheme)}
+    >
       {tabs.map((tab) => (
         <Tab.Screen key={tab.key} name={tab.key} component={tab.screenComponent} />
       ))}
@@ -97,18 +110,19 @@ const TabBarThree: React.FC<TabBarThreeProps> = ({ tabs, theme, onTabPress }) =>
 
 const styles = StyleSheet.create({
   bottomWrapper: {
-    width: '100%',
-    paddingHorizontal: scale(16),
     position: 'absolute',
-    bottom: scale(20)
+    bottom: scale(20),
+    left: 0,
+    right: 0,
+    alignItems: 'center'
   },
   bottomBox: {
-    width: '100%',
+    marginHorizontal: scale(16),
+    alignSelf: 'center',
     height: BOTTOM_BAR_HEIGHT,
-    borderRadius: scale(40),
+    borderRadius: scale(BOTTOM_BAR_HEIGHT / 2),
     overflow: 'hidden',
     borderWidth: Platform.select({ ios: scale(1), android: scale(1.5) }),
-    backgroundColor: 'transparent',
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -117,7 +131,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '100%',
-    paddingHorizontal: scale(10)
+    paddingHorizontal: scale(12)
   },
   icon: {
     width: ICON_BOX_SIZE,

package/src/components/TabBar/Two.tsx

@@ -6,9 +6,10 @@ import React, { useState } from 'react';
 import { View, Pressable, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '@zezosoft/zezo-ott-react-native-ui-kit';
 import { Text } from '../Text';
 import type { AppTheme, ITheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ITab = {
   key: string;
@@ -83,6 +84,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
       screenOptions={{
         headerShown: false,
         tabBarShowLabel: false,
+        tabBarHideOnKeyboard: true,
         tabBarStyle: {
           position: 'absolute',
           bottom: scale(20),
@@ -145,7 +147,7 @@ const styles = StyleSheet.create({
   },
   label: {
     marginTop: scale(4),
-    fontSize: scale(11),
+    fontSize: RFValue(10),
     textAlign: 'center'
   }
 });

package/src/components/Text/Text.tsx

@@ -5,8 +5,8 @@
 
 import React from 'react';
 import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';
-import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface TextProps extends RNTextProps {
   children: React.ReactNode;
@@ -21,7 +21,7 @@ export interface TextProps extends RNTextProps {
 
 const Text: React.FC<TextProps> = ({
   children,
-  size = 12,
+  size = 10,
   color,
   weight = '500',
   align = 'left',
@@ -41,7 +41,7 @@ const Text: React.FC<TextProps> = ({
       style={[
         {
           color: color ?? theme.colors.textPrimary,
-          fontSize: scale(size),
+          fontSize: RFValue(size),
           fontWeight: weight,
           textAlign: align,
           fontFamily

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -7,10 +7,11 @@ import React from 'react';
 import { View, StyleSheet, FlatList, TouchableOpacity, type StyleProp, type ViewStyle, Alert } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import AppHeader from '../../Headers/AppHeader';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type IUserLocation = {
   country: string | null;
@@ -318,13 +319,13 @@ const styles = StyleSheet.create({
     marginBottom: scale(4)
   },
   deviceName: {
-    fontSize: scale(13),
+    fontSize: RFValue(12),
     fontWeight: '600',
     flexShrink: 1,
     maxWidth: '80%'
   },
   deviceMeta: {
-    fontSize: scale(10),
+    fontSize: RFValue(9),
     marginTop: scale(2),
     flexShrink: 1
   },
@@ -337,7 +338,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   logoutText: {
-    fontSize: scale(11),
+    fontSize: RFValue(10),
     fontWeight: '600'
   },
   badge: {
@@ -346,7 +347,7 @@ const styles = StyleSheet.create({
     borderRadius: scale(6)
   },
   badgeText: {
-    fontSize: scale(10),
+    fontSize: RFValue(9),
     fontWeight: '500',
     maxWidth: scale(100),
     flexShrink: 1
@@ -357,7 +358,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   emptyText: {
-    fontSize: scale(12),
+    fontSize: RFValue(11),
     textAlign: 'center'
   },
   skeletonLine: {

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -9,13 +9,14 @@ import { FlatGrid } from 'react-native-super-grid';
 import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface IHistoryItem {
   _id: string;
@@ -119,7 +120,6 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           titleAlign="left"
           theme={appliedTheme}
           titleStyle={{
-            ...styles.title,
             color: appliedTheme.colors.onBackground
           }}
           onRightPress={onSearchPress}
@@ -134,7 +134,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           data={listData}
           keyExtractor={(item, index) => item._id || `item-${index}`}
           style={listStyle}
-          contentContainerStyle={contentContainerStyle}
+          contentContainerStyle={[contentContainerStyle, { paddingBottom: scale(50) }]}
           renderItem={renderGridItem}
           onEndReached={onEndReached}
           onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -154,16 +154,14 @@ const styles = StyleSheet.create({
   container: {
     flex: 1
   },
-  title: {
-    fontSize: scale(15)
-  },
+
   noData: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'
   },
   noDataText: {
-    fontSize: scale(14),
+    fontSize: RFValue(12),
     opacity: 0.5
   }
 });

package/src/components/User/WatchLater/WatchLater.tsx

@@ -19,7 +19,7 @@ import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
@@ -27,6 +27,7 @@ import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
 import type { AppTheme, ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type IWatchLaterItem = {
   _id: string;
@@ -158,7 +159,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             <Text numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
-            <Text numberOfLines={4} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+            <Text numberOfLines={5} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
               {item?.content?.description}
             </Text>
           </View>
@@ -239,14 +240,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   noDataText: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     opacity: 0.5
   },
   contentContainerFlatStyle: {
-    paddingBottom: scale(100)
+    paddingBottom: scale(50)
   },
   thumbnailWrapper: {
-    width: scale(140),
+    width: scale(150),
     aspectRatio: 16 / 9,
     borderRadius: scale(6),
     overflow: 'hidden',
@@ -271,14 +272,16 @@ const styles = StyleSheet.create({
   },
   detailedInfo: {
     flex: 1,
-    marginLeft: scale(8)
+    marginLeft: scale(5)
   },
   detailedTitle: {
-    fontSize: scale(13),
-    fontWeight: 'bold'
+    fontSize: RFValue(11),
+    fontWeight: '500'
   },
   detailedDesc: {
-    fontSize: scale(10),
+    fontSize: RFValue(9),
+    textAlign: 'auto',
+    fontWeight: '400',
     marginTop: scale(1)
   }
 });

package/src/components/User/components/UserAvatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
 
 const fallbackAvatar = require('../../../assets/img/profile.jpg');

package/src/components/User/components/UserSection.tsx

@@ -9,8 +9,9 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import UserAvatar from './UserAvatar';
 import { Text } from '../../Text';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface UserInfo {
   name: string;
@@ -143,19 +144,19 @@ const styles = {
     justifyContent: 'center'
   } as ViewStyle,
   editLabel: {
-    fontSize: moderateScale(9),
+    fontSize: RFValue(8),
     marginTop: verticalScale(1),
     fontWeight: '500',
     lineHeight: moderateScale(12)
   } as TextStyle,
   userName: {
-    fontSize: moderateScale(16),
+    fontSize: RFValue(15),
     fontWeight: '600',
     marginTop: verticalScale(10),
     marginBottom: verticalScale(2)
   } as TextStyle,
   userEmail: {
-    fontSize: moderateScale(14),
+    fontSize: RFValue(13),
     opacity: 0.7
   } as TextStyle,
   skeletonWrapper: {

package/src/components/index.ts

@@ -8,7 +8,6 @@ export * from './Loader/Loader';
 export * from './Headers';
 export * from './Content/Content';
 export * from './Logo/Logo';
-export * from './SplashScreen';
 export * from './Auth';
 export * from './layout';
 export * from './Settings';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -1,25 +1,32 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 02:34 PM
- */
-
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme';
 import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme/hook/useTheme';
 
 type SafeAreaWrapperProps = {
   children: React.ReactNode;
   style?: ViewStyle;
   theme?: AppTheme;
+  edges?: ('top' | 'right' | 'bottom' | 'left')[];
+  fallbackBackground?: string;
 };
 
-export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({ children, style, theme }) => {
+export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+  children,
+  style,
+  theme,
+  edges = ['top'],
+  fallbackBackground = '#fff'
+}) => {
   const { theme: appliedTheme } = useTheme(theme);
 
+  const containerStyle = useMemo(() => {
+    return [styles.container, { backgroundColor: appliedTheme?.colors?.background || fallbackBackground }, style];
+  }, [appliedTheme.colors.background, fallbackBackground, style]);
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: appliedTheme.colors.background }, style]}>
+    <SafeAreaView edges={edges} style={containerStyle}>
       {children}
     </SafeAreaView>
   );

package/src/hooks/useInitSplashCacheSync.ts

@@ -1,6 +1,6 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Thu 12 Jun 2025 at 07:57 PM
+ * @lastModified Tue 29 Jul 2025 at 05:37 PM
  */
 
 import { useEffect, useState } from 'react';
@@ -9,59 +9,75 @@ import CryptoJS from 'crypto-js';
 import { MMKV } from 'react-native-mmkv';
 import { useSplashStore } from '../store/splashStore';
 
-const mmkv = new MMKV(); // Initialize MMKV instance
-const downloadPromises = new Map<string, Promise<string | null>>();
+const mmkvStorage = new MMKV();
+const inFlightDownloadsMap = new Map<string, Promise<string | null>>();
 
-const getSplashLocalPath = async (
+const SUPPORTED_FILE_TYPES = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
+
+const extractFileExtension = (url: string): string => {
+  try {
+    const cleanUrl = url.split('?')[0];
+    const ext = cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
+    return SUPPORTED_FILE_TYPES.includes(ext as (typeof SUPPORTED_FILE_TYPES)[number]) ? ext : 'png';
+  } catch {
+    return 'png';
+  }
+};
+
+const cacheSplashAsset = async (
   url: string,
   extension: string,
-  LAST_HASH_KEY: string,
+  mmkvKey: string,
   forceDownload: boolean
 ): Promise<string | null> => {
   if (!url?.trim()) return null;
 
-  const sanitizedExtension = extension.replace(/^\./, '').trim() || 'mp4';
-  const currentHash = CryptoJS.MD5(`${url}|${LAST_HASH_KEY}|${sanitizedExtension}`).toString();
-  const filePath = `${RNFS.CachesDirectoryPath}/splash_${currentHash}.${sanitizedExtension}`;
+  const ext = extension.replace(/^\./, '').trim() || 'mp4';
+  const hash = CryptoJS.MD5(`${url}|${mmkvKey}|${ext}`).toString();
+  const localPath = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
 
-  if (downloadPromises.has(currentHash)) {
-    return downloadPromises.get(currentHash)!;
+  if (inFlightDownloadsMap.has(hash)) {
+    return inFlightDownloadsMap.get(hash)!;
   }
 
-  const downloadOperation = (async () => {
-    const lastUsedHash = mmkv.getString(LAST_HASH_KEY); // Updated to use MMKV getString
+  const downloadTask = (async () => {
+    try {
+      const previousHash = mmkvStorage.getString(mmkvKey);
 
-    if (lastUsedHash && lastUsedHash !== currentHash) {
-      const oldFilePath = `${RNFS.CachesDirectoryPath}/splash_${lastUsedHash}.${sanitizedExtension}`;
-      const existsOld = await RNFS.exists(oldFilePath);
-      if (existsOld) await RNFS.unlink(oldFilePath).catch(() => {});
-    }
+      if (previousHash && previousHash !== hash) {
+        const oldPath = `${RNFS.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
+        const exists = await RNFS.exists(oldPath);
+        if (exists) {
+          await RNFS.unlink(oldPath).catch(() => {});
+        }
+      }
 
-    if (!forceDownload) {
-      const exists = await RNFS.exists(filePath);
-      if (exists && lastUsedHash === currentHash) {
-        return filePath;
+      if (!forceDownload) {
+        const exists = await RNFS.exists(localPath);
+        if (exists && previousHash === hash) {
+          return localPath;
+        }
       }
-    }
 
-    const result = await RNFS.downloadFile({
-      fromUrl: url,
-      toFile: filePath,
-      cacheable: true,
-      readTimeout: 15000,
-      connectionTimeout: 10000
-    }).promise;
-
-    if (result.statusCode === 200) {
-      mmkv.set(LAST_HASH_KEY, currentHash); // Updated to use MMKV set
-      return filePath;
-    }
+      const { statusCode } = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localPath,
+        cacheable: true,
+        readTimeout: 15000,
+        connectionTimeout: 10000
+      }).promise;
+
+      if (statusCode === 200) {
+        mmkvStorage.set(mmkvKey, hash);
+        return localPath;
+      }
+    } catch {}
 
     return null;
   })();
 
-  downloadPromises.set(currentHash, downloadOperation);
-  return downloadOperation;
+  inFlightDownloadsMap.set(hash, downloadTask);
+  return downloadTask;
 };
 
 type UseSplashCacheSyncOptions = {
@@ -70,90 +86,61 @@ type UseSplashCacheSyncOptions = {
   forceDownload?: boolean;
 };
 
-// Helper to extract extension from URL
-const SUPPORTED_EXTENSIONS = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
-
-const extractExtensionFromUrl = (url: string): string => {
-  try {
-    const cleanUrl = url.split('?')[0];
-    const ext =
-      cleanUrl
-        ?.substring(cleanUrl.lastIndexOf('.') + 1)
-        .trim()
-        .toLowerCase() || '';
-
-    return SUPPORTED_EXTENSIONS.includes(ext as any) ? ext : 'png';
-  } catch {
-    return 'png';
-  }
-};
-
 export const useInitSplashCacheSync = ({
   logoUrl,
   backgroundUrl,
   forceDownload = false
-}: UseSplashCacheSyncOptions): {
-  state: { isReady: boolean; error: Error | null };
-  isLoading: boolean;
-  data: {
-    localPathLogo: string | null;
-    localPathBackground: string | null;
-  };
-} => {
-  const [state, setState] = useState({
+}: UseSplashCacheSyncOptions) => {
+  const [splashSyncState, setSplashSyncState] = useState({
     isReady: false,
     error: null as Error | null
   });
 
-  const setLocalPathLogo = useSplashStore((s) => s.setLogoPath);
-  const setLocalPathBackground = useSplashStore((s) => s.setBackdropPath);
+  const setSplashLogoPath = useSplashStore((s) => s.setLogoPath);
+  const setSplashBackgroundPath = useSplashStore((s) => s.setBackdropPath);
 
   useEffect(() => {
     let isMounted = true;
 
-    const syncCache = async () => {
+    const syncSplashAssets = async () => {
       try {
-        const [logoPath, bgPath] = await Promise.all([
+        const [logoPath, backgroundPath] = await Promise.all([
           logoUrl
-            ? getSplashLocalPath(logoUrl, extractExtensionFromUrl(logoUrl), 'logo', forceDownload)
+            ? cacheSplashAsset(logoUrl, extractFileExtension(logoUrl), 'splash_logo', forceDownload)
             : Promise.resolve(null),
           backgroundUrl
-            ? getSplashLocalPath(
-                backgroundUrl,
-                extractExtensionFromUrl(backgroundUrl),
-                'backgroundImage',
-                forceDownload
-              )
+            ? cacheSplashAsset(backgroundUrl, extractFileExtension(backgroundUrl), 'splash_background', forceDownload)
             : Promise.resolve(null)
         ]);
 
         if (!isMounted) return;
 
-        if (logoPath) setLocalPathLogo?.(`file://${logoPath}`);
-        if (bgPath) setLocalPathBackground?.(`file://${bgPath}`);
+        if (logoPath) setSplashLogoPath?.(logoPath);
+        if (backgroundPath) setSplashBackgroundPath?.(backgroundPath);
 
-        setState({ isReady: true, error: null });
+        setSplashSyncState({ isReady: true, error: null });
       } catch (err) {
         if (isMounted) {
-          setState({ isReady: true, error: err as Error });
+          setSplashSyncState({ isReady: true, error: err as Error });
         }
       }
     };
 
-    syncCache();
-
+    syncSplashAssets();
     return () => {
       isMounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setLocalPathLogo, setLocalPathBackground]);
-  const localPathLogo = useSplashStore((s) => s.logo.localPath);
-  const localPathBackground = useSplashStore((s) => s.backdrop.localPath);
+  }, [logoUrl, backgroundUrl, forceDownload, setSplashLogoPath, setSplashBackgroundPath]);
+
+  const splashLogoLocalPath = useSplashStore((s) => s.logo.localPath);
+  const splashBackgroundLocalPath = useSplashStore((s) => s.backdrop.localPath);
+
   return {
-    state,
-    isLoading: !state.isReady && !state.error,
+    state: splashSyncState,
+    isLoading: !splashSyncState.isReady && !splashSyncState.error,
     data: {
-      localPathLogo,
-      localPathBackground
+      localPathLogo: splashLogoLocalPath,
+      localPathBackground: splashBackgroundLocalPath
     }
   };
 };