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

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

@@ -0,0 +1,66 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 30 Jul 2025 at 02:56 PM
+ */
+
+import React, { useState, useMemo } from 'react';
+import FastImage from 'react-native-fast-image';
+import { ActivityIndicator, View, StyleSheet } from 'react-native';
+import Display from '../../../../../utils/Display';
+
+type SplashImageProps = {
+  source: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+  backgroundColor?: string;
+};
+
+const SplashImage: React.FC<SplashImageProps> = ({ fullscreen, height, resizeMode = 'contain', source, width }) => {
+  const [isLoading, setIsLoading] = useState(!!source);
+
+  const imageStyles = useMemo(
+    () => ({
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      flex: 1
+    }),
+    [fullscreen, width, height]
+  );
+
+  const handleLoadEnd = useMemo(() => (source ? () => setIsLoading(false) : undefined), [source]);
+  const resolveUri = (src?: string): string => {
+    if (!src) return '';
+    if (src.startsWith('http') || src.startsWith('https') || src.startsWith('file://')) return src;
+    return `file://${src}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      {isLoading && <ActivityIndicator size="large" style={styles.loader} />}
+      <FastImage
+        source={{ uri: resolveUri(source) }}
+        onLoadEnd={handleLoadEnd}
+        style={imageStyles}
+        resizeMode={resizeMode}
+        onError={() => setIsLoading(false)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: Display.fullWidth,
+    height: Display.fullHeight,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});
+
+export default React.memo(SplashImage);

package/src/components/{SplashScreen → Auth/SplashScreen}/components/SplashLottie/SplashLottie.tsx

@@ -5,13 +5,12 @@
 import React, { useMemo } from 'react';
 import LottieView from 'lottie-react-native';
 import { StyleSheet } from 'react-native';
-import Display from '../../../../utils/Display';
-import PlatformSelector from '../../../../utils/PlatformSelector';
+import Display from '../../../../../utils/Display';
 
 type ResizeMode = 'cover' | 'contain' | 'center';
 
 interface IProps {
-  localSource: string;
+  source: string;
   width: number;
   height: number;
   fullscreen: boolean;
@@ -22,25 +21,11 @@ interface IProps {
 const SplashLottie: React.FC<IProps> = ({
   fullscreen,
   height,
-  localSource,
+  source,
   resizeMode = 'contain',
   width,
   onAnimationFinish
 }) => {
-  // Memoize the source configuration
-  const source = useMemo(() => {
-    if (!localSource) {
-      console.warn('SplashLottie: localSource is empty');
-      return null;
-    }
-
-    return PlatformSelector.isAndroid()
-      ? { uri: localSource }
-      : {
-          uri: localSource.startsWith('file://') ? localSource : `file://${localSource}`
-        };
-  }, [localSource]);
-
   // Memoize the style object
   const lottieStyle = useMemo(
     () => ({
@@ -59,12 +44,15 @@ const SplashLottie: React.FC<IProps> = ({
 
   return (
     <LottieView
-      source={source}
+      source={{ uri: source }}
       autoPlay
       loop={false}
       onAnimationFinish={onAnimationFinish}
       style={lottieStyle}
       resizeMode={resizeMode}
+      onAnimationFailure={(error) => {
+        console.error('Lottie animation failed to load:', error);
+      }}
       hardwareAccelerationAndroid
       cacheComposition
     />

package/src/components/{SplashScreen → Auth/SplashScreen}/components/SplashVideo/SplashVideo.tsx

@@ -4,12 +4,12 @@
  */
 import React, { useRef, useMemo, useCallback } from 'react';
 import Video, { type VideoRef } from 'react-native-video';
-import Display from '../../../../utils/Display';
+import Display from '../../../../../utils/Display';
 
 interface IProps {
-  localSource: string;
   width: number;
   height: number;
+  source: string;
   fullscreen: boolean;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
   onEnd?: () => void;
@@ -21,7 +21,7 @@ interface IProps {
 const SplashVideo: React.FC<IProps> = ({
   fullscreen,
   height,
-  localSource,
+  source,
   resizeMode = 'cover',
   width,
   onEnd,
@@ -40,14 +40,6 @@ const SplashVideo: React.FC<IProps> = ({
     [fullscreen, width, height]
   );
 
-  // Memoize video source to prevent unnecessary recreations
-  const videoSource = useMemo(
-    () => ({
-      uri: `file://${localSource}`
-    }),
-    [localSource]
-  );
-
   // Optimize event handlers with useCallback
   const handleLoadStart = useCallback(() => {
     onLoadStart?.();
@@ -69,11 +61,15 @@ const SplashVideo: React.FC<IProps> = ({
     },
     [onError]
   );
-
+  const resolveUri = (src?: string): string => {
+    if (!src) return '';
+    if (src.startsWith('http') || src.startsWith('https') || src.startsWith('file://')) return src;
+    return `file://${src}`;
+  };
   return (
     <Video
       ref={videoRef}
-      source={videoSource}
+      source={{ uri: resolveUri(source) }}
       style={videoStyle}
       resizeMode={resizeMode}
       paused={false}
@@ -81,7 +77,20 @@ const SplashVideo: React.FC<IProps> = ({
       onLoad={handleLoad}
       onError={handleError}
       onEnd={onEnd}
-      // Additional performance optimizations
+      controlsStyles={{
+        hideForward: true,
+        hideDuration: true,
+        hideFullscreen: true,
+        hidePlayPause: true,
+        hideNavigationBarOnFullScreenMode: true,
+        hideNotificationBarOnFullScreenMode: true,
+        hideNext: true,
+        hidePosition: true,
+        hidePrevious: true,
+        hideRewind: true,
+        hideSeekBar: true,
+        hideSettingButton: true
+      }}
       ignoreSilentSwitch="obey"
       playInBackground={false}
       playWhenInactive={false}

package/src/components/Auth/index.ts

@@ -8,13 +8,15 @@ import LoginWithEmail from './Login/LoginWithEmail';
 import LoginWithPhone from './Login/LoginWithPhone';
 import OTP from './OTP/OTP';
 import SignUp from './SignUp/SignUp';
+import { SplashScreen } from './SplashScreen/SplashScreen';
 
 const Auth = {
   LoginWithEmail,
   LoginWithPhone,
   SignUp,
   OTP,
-  ForgotPassword
+  ForgotPassword,
+  SplashScreen
 };
 
 export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -1,93 +1,110 @@
 import React, { useMemo, useCallback } from 'react';
-import { View, StyleSheet, ImageBackground, type ViewStyle } from 'react-native';
+import { View, StyleSheet, ImageBackground, type ViewStyle, type ImageStyle } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
-import { useTheme } from '../../theme/ThemeProvider';
+import type { ITheme } from '../../theme/themes';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
-  backgroundImage?: string;
-  backgroundColor?: string;
-  gradientEnabled?: boolean;
-  gradientSplit?: number;
+  backgroundImage?: string | null;
+  backgroundColor?: string | null;
+  gradientSplitBackground?: number;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
   innerContainerStyle?: ViewStyle;
+  theme: ITheme;
   onImageError?: (error: Error) => void;
 }
 
-export const BackgroundLayout: React.FC<BackgroundLayoutProps> = ({
-  children,
-  backgroundImage,
-  backgroundColor,
-  gradientEnabled = false,
-  gradientSplit = 0.3, // default: 30% transparent
-  resizeMode = 'cover',
-  innerContainerStyle,
-  onImageError
-}) => {
-  const { theme } = useTheme();
+export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
+  const {
+    children,
+    backgroundImage: backgroundImageUri,
+    backgroundColor: bgColor,
+    gradientSplitBackground = 0.4,
+    resizeMode = 'cover',
+    innerContainerStyle,
+    onImageError,
+    theme
+  } = props;
+
   const {
     data: { localPathBackground }
   } = useInitSplashCacheSync({
-    backgroundUrl: backgroundImage
+    backgroundUrl: backgroundImageUri || undefined
   });
 
-  const bgImageSource = localPathBackground || backgroundImage;
+  const resolvedImageUri = useMemo(() => {
+    if (!backgroundImageUri) return undefined;
+    const rawPath = localPathBackground || backgroundImageUri;
+    const isRemoteUrl = rawPath.startsWith('http://') || rawPath.startsWith('https://');
+    return isRemoteUrl ? rawPath : `file://${rawPath}`;
+  }, [backgroundImageUri, localPathBackground]);
 
   const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor: backgroundColor ?? theme?.colors?.background }],
-    [backgroundColor, theme]
+    () => [styles.container, { backgroundColor: bgColor ?? theme.colors.background }],
+    [bgColor, theme.colors.background]
   );
 
-  const handleImageError = useCallback(
+  const handleImageLoadError = useCallback(
     (e: any) => {
-      console.warn('[BackgroundLayout] Image load failed:', e.nativeEvent.error);
+      console.warn('[BackgroundLayout] Image load failed:', e?.nativeEvent?.error);
       onImageError?.(new Error('Background image failed to load'));
     },
     [onImageError]
   );
+
   const gradientLocations = useMemo(() => {
-    const colors = theme.colors.backgroundLayoutGradient;
-    const colorCount = colors?.length ?? 0;
-    const baseSteps = [0, 0.5, 0.7, 0.9, 1];
-    const locations = [0, ...baseSteps.map((step) => Math.min(1, gradientSplit + step))];
+    const gradientColors = theme.colors.backgroundLayoutGradient;
+    const count = gradientColors?.length ?? 0;
+    const baseSteps = [0, 0.3, 0.4, 1, 1];
+    const locations = [0, ...baseSteps.map((step) => Math.min(1, gradientSplitBackground + step))];
 
-    if (locations.length > colorCount) {
-      return locations.slice(0, colorCount);
-    } else if (locations.length < colorCount) {
+    if (locations.length > count) {
+      return locations.slice(0, count);
+    }
+    if (locations.length < count) {
       const last = locations[locations.length - 1] ?? 1;
-      return [...locations, ...Array(colorCount - locations.length).fill(last)];
+      return [...locations, ...Array(count - locations.length).fill(last)];
     }
+
     return locations;
-  }, [theme.colors.backgroundLayoutGradient, gradientSplit]);
+  }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
+
+  const renderChildren = (
+    <View style={[styles.innerContainer, innerContainerStyle, bgColor ? { backgroundColor: bgColor } : null]}>
+      {children}
+    </View>
+  );
+
+  const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
+  const showGradient = showBackground;
 
-  return (
-    <View style={containerStyle}>
-      {backgroundImage && bgImageSource ? (
+  if (showBackground) {
+    return (
+      <View style={containerStyle}>
         <ImageBackground
-          source={{
-            uri: bgImageSource.startsWith('http') ? bgImageSource : `file://${bgImageSource}`
-          }}
+          source={{ uri: resolvedImageUri }}
           resizeMode={resizeMode}
-          style={styles.flex}
-          onError={handleImageError}
+          style={[styles.imageContainer, { backgroundColor: theme.colors.background }]}
+          imageStyle={[styles.imageStyle, { backgroundColor: theme.colors.background }]}
+          onError={handleImageLoadError}
         >
-          {gradientEnabled && (
+          {showGradient && (
             <LinearGradient
               colors={theme.colors.backgroundLayoutGradient}
               locations={gradientLocations}
               start={{ x: 0.5, y: 0 }}
               end={{ x: 0.5, y: 1 }}
-              style={styles.gradient}
+              style={styles.gradientOverlay}
             />
           )}
-          <View style={[styles.innerContainer, innerContainerStyle]}>{children}</View>
+          {renderChildren}
         </ImageBackground>
-      ) : (
-        <View style={[styles.innerContainer, innerContainerStyle]}>{children}</View>
-      )}
-    </View>
-  );
+      </View>
+    );
+  }
+
+  return <View style={containerStyle}>{renderChildren}</View>;
 };
 
 const styles = StyleSheet.create({
@@ -96,12 +113,17 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%'
   },
-  flex: {
+  imageContainer: {
     flex: 1,
     width: '100%',
     height: '100%'
   },
-  gradient: {
+  imageStyle: {
+    height: '60%',
+    width: '100%',
+    alignSelf: 'flex-start'
+  } as ImageStyle,
+  gradientOverlay: {
     ...StyleSheet.absoluteFillObject,
     pointerEvents: 'none'
   },

package/src/components/BlogView/BlogView.tsx

@@ -7,10 +7,12 @@ import React from 'react';
 import { ScrollView, StyleSheet, View, type TextStyle, type ViewStyle } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { Text } from '../Text';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import AppHeader from '../Headers/AppHeader';
 import { scale, moderateScale } from 'react-native-size-matters';
 import type { AppTheme, ITheme } from '../../theme/themes';
+import { ActivityIndicator } from 'react-native-paper';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type BlogViewProps = {
   content: string;
@@ -29,6 +31,8 @@ type BlogViewProps = {
   // Custom content
   renderContent?: () => React.ReactNode;
   renderEmpty?: () => React.ReactNode;
+
+  isLoading?: boolean;
 };
 
 export const BlogView: React.FC<BlogViewProps> = ({
@@ -43,7 +47,8 @@ export const BlogView: React.FC<BlogViewProps> = ({
   headerComponent,
   renderHeader,
   renderContent,
-  renderEmpty
+  renderEmpty,
+  isLoading = false
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -66,6 +71,14 @@ export const BlogView: React.FC<BlogViewProps> = ({
   };
 
   const renderFinalContent = () => {
+    if (isLoading) {
+      return (
+        <View style={styles.fullCenter}>
+          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
+        </View>
+      );
+    }
+
     if (renderContent) return renderContent();
     if (content) {
       return <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>;
@@ -86,7 +99,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
       {scrollable ? (
         <ScrollView
           style={styles.flex}
-          contentContainerStyle={[styles.container, containerStyle, { paddingBottom: scale(40) }]}
+          contentContainerStyle={[styles.container, containerStyle, { paddingBottom: scale(40), flexGrow: 1 }]}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
@@ -107,19 +120,19 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
     text: { color: baseColor },
     paragraph: { color: baseColor, marginBottom: scale(8) },
     heading1: {
-      fontSize: scale(22),
+      fontSize: RFValue(21),
       fontWeight: 'bold',
       color: baseColor,
       marginBottom: scale(12)
     },
     heading2: {
-      fontSize: scale(20),
+      fontSize: RFValue(19),
       fontWeight: 'bold',
       color: baseColor,
       marginBottom: scale(10)
     },
     heading3: {
-      fontSize: scale(18),
+      fontSize: RFValue(17),
       fontWeight: 'bold',
       color: baseColor,
       marginBottom: scale(8)
@@ -138,7 +151,7 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
       borderRadius: scale(4),
       marginVertical: scale(10),
       fontStyle: 'italic',
-      fontSize: moderateScale(16)
+      fontSize: RFValue(15)
     },
     code_inline: {
       backgroundColor: theme.colors.surfaceVariant,
@@ -147,6 +160,7 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
       paddingHorizontal: scale(4),
       borderRadius: scale(4)
     },
+
     code_block: {
       backgroundColor: theme.colors.surfaceVariant,
       color: baseColor,
@@ -179,12 +193,18 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: scale(16)
   },
+  fullCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(16)
+  },
   emptyText: {
     textAlign: 'center',
-    fontSize: moderateScale(14)
+    fontSize: RFValue(13)
   },
   headerTitle: {
-    fontSize: moderateScale(16),
+    fontSize: RFValue(15),
     fontWeight: '600'
   }
 });

package/src/components/Button/BackBtn.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { TouchableOpacity, StyleSheet, Alert, Platform, type ViewStyle, type StyleProp } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
 import type { AppTheme } from '../../theme/themes';

package/src/components/Button/MenuBtn.tsx

@@ -21,15 +21,11 @@ import {
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BlurView } from '@react-native-community/blur';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { AppTheme } from '../../theme/themes';
-
-type MenuAction = {
-  label: string;
-  icon: React.ComponentType<{ size?: number; color?: string }>;
-  onPress: () => void;
-};
+import type { MenuAction } from '../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type MenuBtnProps = {
   actions: MenuAction[];
@@ -127,6 +123,7 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                     console.error('Action failed:', error);
                   }
                 }}
+                disabled={action.isLoading || false}
                 style={({ pressed }) => [
                   styles.menuItem,
                   {
@@ -134,7 +131,7 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                   }
                 ]}
               >
-                {action.icon && (
+                {action?.icon && (
                   <View style={styles.iconBox}>
                     <action.icon size={scale(18)} color={appliedTheme.colors.textPrimary} />
                   </View>
@@ -187,7 +184,7 @@ const styles = StyleSheet.create({
     marginRight: scale(8)
   },
   label: {
-    fontSize: scale(13),
+    fontSize: RFValue(12),
     includeFontPadding: false
   }
 });

package/src/components/Button/PrimaryBtn.tsx

@@ -14,9 +14,10 @@ import {
   type TextStyle
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import { Text } from '../Text';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type PrimaryBtnProps = {
   title: string;
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
   },
   text: {
     textAlign: 'center',
-    fontSize: scale(16),
+    fontSize: RFValue(13),
     fontWeight: '600'
   },
   row: {

package/src/components/Button/TextButton.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { StyleSheet, Pressable, View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type TextButtonProps = {
   title: string;
@@ -89,7 +90,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: scale(6)
   },
   text: {
-    fontSize: scale(12)
+    fontSize: RFValue(10)
   },
   row: {
     flexDirection: 'row',

package/src/components/Content/Card/Category/Category.tsx

@@ -15,10 +15,11 @@ import {
   type ListRenderItemInfo
 } from 'react-native';
 import { Text } from '../../../Text';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import type { AppTheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ICategory = {
   _id: string;
@@ -246,7 +247,7 @@ const styles = StyleSheet.create({
     paddingVertical: verticalScale(6)
   },
   tabText: {
-    fontSize: scale(11),
+    fontSize: RFValue(10),
     textTransform: 'capitalize',
     fontWeight: '500',
     lineHeight: scale(13)