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

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

@@ -1,8 +1,3 @@
-/**
- * @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';
@@ -17,22 +12,36 @@ type SplashImageProps = {
   backgroundColor?: string;
 };
 
-const SplashImage: React.FC<SplashImageProps> = ({ fullscreen, height, resizeMode = 'contain', source, width }) => {
+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
+      flex: 1,
     }),
     [fullscreen, width, height]
   );
 
-  const handleLoadEnd = useMemo(() => (source ? () => setIsLoading(false) : undefined), [source]);
+  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;
+    if (
+      src.startsWith('http') ||
+      src.startsWith('https') ||
+      src.startsWith('file://')
+    )
+      return src;
     return `file://${src}`;
   };
 
@@ -56,11 +65,11 @@ const styles = StyleSheet.create({
     width: Display.fullWidth,
     height: Display.fullHeight,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   loader: {
-    position: 'absolute'
-  }
+    position: 'absolute',
+  },
 });
 
 export default React.memo(SplashImage);

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

@@ -24,7 +24,7 @@ const SplashLottie: React.FC<IProps> = ({
   source,
   resizeMode = 'contain',
   width,
-  onAnimationFinish
+  onAnimationFinish,
 }) => {
   // Memoize the style object
   const lottieStyle = useMemo(
@@ -32,7 +32,7 @@ const SplashLottie: React.FC<IProps> = ({
       ...styles.base,
       width: fullscreen ? Display.fullWidth : width,
       height: fullscreen ? Display.fullHeight : height,
-      ...(fullscreen ? styles.fullscreen : {})
+      ...(fullscreen ? styles.fullscreen : {}),
     }),
     [fullscreen, width, height]
   );
@@ -61,11 +61,11 @@ const SplashLottie: React.FC<IProps> = ({
 
 const styles = StyleSheet.create({
   base: {
-    alignSelf: 'center'
+    alignSelf: 'center',
   },
   fullscreen: {
-    flex: 1
-  }
+    flex: 1,
+  },
 });
 
 export default React.memo(SplashLottie);

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

@@ -27,7 +27,7 @@ const SplashVideo: React.FC<IProps> = ({
   onEnd,
   onLoadStart,
   onLoaded,
-  onError
+  onError,
 }) => {
   const videoRef = useRef<VideoRef>(null);
 
@@ -35,7 +35,7 @@ const SplashVideo: React.FC<IProps> = ({
   const videoStyle = useMemo(
     () => ({
       width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height
+      height: fullscreen ? Display.fullHeight : height,
     }),
     [fullscreen, width, height]
   );
@@ -55,7 +55,12 @@ const SplashVideo: React.FC<IProps> = ({
   const handleError = useCallback(
     (e: any) => {
       // More robust error handling
-      const error = e?.error?.message || e?.message || e?.error || e || 'Unknown video error';
+      const error =
+        e?.error?.message ||
+        e?.message ||
+        e?.error ||
+        e ||
+        'Unknown video error';
       console.error('Video playback error:', error);
       onError?.(error);
     },
@@ -63,7 +68,12 @@ const SplashVideo: React.FC<IProps> = ({
   );
   const resolveUri = (src?: string): string => {
     if (!src) return '';
-    if (src.startsWith('http') || src.startsWith('https') || src.startsWith('file://')) return src;
+    if (
+      src.startsWith('http') ||
+      src.startsWith('https') ||
+      src.startsWith('file://')
+    )
+      return src;
     return `file://${src}`;
   };
   return (
@@ -89,7 +99,7 @@ const SplashVideo: React.FC<IProps> = ({
         hidePrevious: true,
         hideRewind: true,
         hideSeekBar: true,
-        hideSettingButton: true
+        hideSettingButton: true,
       }}
       ignoreSilentSwitch="obey"
       playInBackground={false}

package/src/components/Auth/index.ts

@@ -16,7 +16,7 @@ const Auth = {
   SignUp,
   OTP,
   ForgotPassword,
-  SplashScreen
+  SplashScreen,
 };
 
 export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -1,5 +1,11 @@
 import React, { useMemo, useCallback } from 'react';
-import { View, StyleSheet, ImageBackground, type ViewStyle, type ImageStyle } 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 type { ITheme } from '../../theme/themes';
@@ -24,30 +30,37 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     resizeMode = 'cover',
     innerContainerStyle,
     onImageError,
-    theme
+    theme,
   } = props;
 
   const {
-    data: { localPathBackground }
+    data: { localPathBackground },
   } = useInitSplashCacheSync({
-    backgroundUrl: backgroundImageUri || undefined
+    backgroundUrl: backgroundImageUri || undefined,
   });
 
   const resolvedImageUri = useMemo(() => {
     if (!backgroundImageUri) return undefined;
     const rawPath = localPathBackground || backgroundImageUri;
-    const isRemoteUrl = rawPath.startsWith('http://') || rawPath.startsWith('https://');
+    const isRemoteUrl =
+      rawPath.startsWith('http://') || rawPath.startsWith('https://');
     return isRemoteUrl ? rawPath : `file://${rawPath}`;
   }, [backgroundImageUri, localPathBackground]);
 
   const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor: bgColor ?? theme.colors.background }],
+    () => [
+      styles.container,
+      { backgroundColor: bgColor ?? theme.colors.background },
+    ],
     [bgColor, theme.colors.background]
   );
 
   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]
@@ -57,7 +70,10 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     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))];
+    const locations = [
+      0,
+      ...baseSteps.map((step) => Math.min(1, gradientSplitBackground + step)),
+    ];
 
     if (locations.length > count) {
       return locations.slice(0, count);
@@ -71,7 +87,13 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
   }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
 
   const renderChildren = (
-    <View style={[styles.innerContainer, innerContainerStyle, bgColor ? { backgroundColor: bgColor } : null]}>
+    <View
+      style={[
+        styles.innerContainer,
+        innerContainerStyle,
+        bgColor ? { backgroundColor: bgColor } : null,
+      ]}
+    >
       {children}
     </View>
   );
@@ -85,8 +107,14 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
         <ImageBackground
           source={{ uri: resolvedImageUri }}
           resizeMode={resizeMode}
-          style={[styles.imageContainer, { backgroundColor: theme.colors.background }]}
-          imageStyle={[styles.imageStyle, { backgroundColor: theme.colors.background }]}
+          style={[
+            styles.imageContainer,
+            { backgroundColor: theme.colors.background },
+          ]}
+          imageStyle={[
+            styles.imageStyle,
+            { backgroundColor: theme.colors.background },
+          ]}
           onError={handleImageLoadError}
         >
           {showGradient && (
@@ -111,26 +139,26 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: '100%',
-    height: '100%'
+    height: '100%',
   },
   imageContainer: {
     flex: 1,
     width: '100%',
-    height: '100%'
+    height: '100%',
   },
   imageStyle: {
     height: '60%',
     width: '100%',
-    alignSelf: 'flex-start'
+    alignSelf: 'flex-start',
   } as ImageStyle,
   gradientOverlay: {
     ...StyleSheet.absoluteFillObject,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
   innerContainer: {
     flex: 1,
     width: '100%',
     justifyContent: 'center',
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });

package/src/components/BlogView/BlogView.tsx

@@ -1,17 +1,18 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 11:30 AM
- */
-
 import React from 'react';
-import { ScrollView, StyleSheet, View, type TextStyle, type ViewStyle } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  View,
+  type TextStyle,
+  type ViewStyle,
+  ActivityIndicator,
+} from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { Text } from '../Text';
 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 = {
@@ -48,7 +49,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
   renderHeader,
   renderContent,
   renderEmpty,
-  isLoading = false
+  isLoading = false,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -64,7 +65,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
         theme={appliedTheme}
         titleStyle={{
           ...styles.headerTitle,
-          color: appliedTheme.colors.onBackground
+          color: appliedTheme.colors.onBackground,
         }}
       />
     );
@@ -81,32 +82,49 @@ export const BlogView: React.FC<BlogViewProps> = ({
 
     if (renderContent) return renderContent();
     if (content) {
-      return <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>;
+      return (
+        <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>
+      );
     }
 
     if (renderEmpty) return renderEmpty();
 
     return (
       <View style={styles.center}>
-        <Text style={[styles.emptyText, { color: appliedTheme.colors.onSurfaceVariant }]}>{emptyText}</Text>
+        <Text
+          style={[
+            styles.emptyText,
+            { color: appliedTheme.colors.onSurfaceVariant },
+          ]}
+        >
+          {emptyText}
+        </Text>
       </View>
     );
   };
 
   return (
-    <View style={[styles.flex, { backgroundColor: appliedTheme.colors.background }]}>
+    <View
+      style={[styles.flex, { backgroundColor: appliedTheme.colors.background }]}
+    >
       {renderFinalHeader()}
       {scrollable ? (
         <ScrollView
           style={styles.flex}
-          contentContainerStyle={[styles.container, containerStyle, { paddingBottom: scale(40), flexGrow: 1 }]}
+          contentContainerStyle={[
+            styles.container,
+            containerStyle,
+            { paddingBottom: scale(40), flexGrow: 1 },
+          ]}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
           {renderFinalContent()}
         </ScrollView>
       ) : (
-        <View style={[styles.container, containerStyle]}>{renderFinalContent()}</View>
+        <View style={[styles.container, containerStyle]}>
+          {renderFinalContent()}
+        </View>
       )}
     </View>
   );
@@ -123,19 +141,19 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
       fontSize: RFValue(21),
       fontWeight: 'bold',
       color: baseColor,
-      marginBottom: scale(12)
+      marginBottom: scale(12),
     },
     heading2: {
       fontSize: RFValue(19),
       fontWeight: 'bold',
       color: baseColor,
-      marginBottom: scale(10)
+      marginBottom: scale(10),
     },
     heading3: {
       fontSize: RFValue(17),
       fontWeight: 'bold',
       color: baseColor,
-      marginBottom: scale(8)
+      marginBottom: scale(8),
     },
     strong: { fontWeight: 'bold', color: baseColor },
     listItem: { color: baseColor, marginBottom: scale(6) },
@@ -143,7 +161,9 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
     ordered_list: { color: baseColor },
     link: { color: theme.colors.primary },
     blockquote: {
-      backgroundColor: theme.dark ? theme.colors.surfaceVariant : theme.colors.surface,
+      backgroundColor: theme.dark
+        ? theme.colors.surfaceVariant
+        : theme.colors.surface,
       color: theme.colors.onSurface,
       borderLeftWidth: scale(1.5),
       borderLeftColor: theme.colors.primary,
@@ -151,14 +171,14 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
       borderRadius: scale(4),
       marginVertical: scale(10),
       fontStyle: 'italic',
-      fontSize: RFValue(15)
+      fontSize: RFValue(15),
     },
     code_inline: {
       backgroundColor: theme.colors.surfaceVariant,
       color: baseColor,
       fontFamily: 'monospace',
       paddingHorizontal: scale(4),
-      borderRadius: scale(4)
+      borderRadius: scale(4),
     },
 
     code_block: {
@@ -166,47 +186,47 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
       color: baseColor,
       fontFamily: 'monospace',
       padding: scale(8),
-      borderRadius: scale(6)
+      borderRadius: scale(6),
     },
     fence: {
       backgroundColor: theme.colors.surfaceVariant,
-      color: baseColor
+      color: baseColor,
     },
     hr: {
       borderBottomColor: theme.colors.outline,
       borderBottomWidth: StyleSheet.hairlineWidth,
-      marginVertical: scale(16)
-    }
+      marginVertical: scale(16),
+    },
   };
 };
 
 const styles = StyleSheet.create({
   flex: {
-    flex: 1
+    flex: 1,
   },
   container: {
-    padding: scale(16)
+    padding: scale(16),
   },
   center: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
   },
   fullCenter: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: scale(16)
+    paddingHorizontal: scale(16),
   },
   emptyText: {
     textAlign: 'center',
-    fontSize: RFValue(13)
+    fontSize: RFValue(13),
   },
   headerTitle: {
     fontSize: RFValue(15),
-    fontWeight: '600'
-  }
+    fontWeight: '600',
+  },
 });
 
 export namespace BlogView {

package/src/components/Button/BackBtn.tsx

@@ -3,7 +3,14 @@
  * @lastModified Wed 02 Jul 2025 at 09:30 AM
  */
 import React from 'react';
-import { TouchableOpacity, StyleSheet, Alert, Platform, type ViewStyle, type StyleProp } from 'react-native';
+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/hook/useTheme';
@@ -20,7 +27,14 @@ type BackBtnProps = {
   enableBlur?: boolean;
 };
 
-const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, style, theme, enableBlur = false }) => {
+const BackBtn: React.FC<BackBtnProps> = ({
+  size = scale(24),
+  color,
+  onPress,
+  style,
+  theme,
+  enableBlur = false,
+}) => {
   const insets = useSafeAreaInsets();
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -28,7 +42,10 @@ const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, sty
     if (onPress) {
       onPress();
     } else {
-      Alert.alert('Back Action Not Provided', 'Please define the back action using onPress prop.');
+      Alert.alert(
+        'Back Action Not Provided',
+        'Please define the back action using onPress prop.'
+      );
     }
   };
 
@@ -37,7 +54,7 @@ const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, sty
   const calculatedTop = Platform.select({
     ios: insets.top > 20 ? insets.top - verticalScale(5) : insets.top,
     android: insets.top + verticalScale(5),
-    default: insets.top
+    default: insets.top,
   });
 
   const flattenedStyle = StyleSheet.flatten(style) || {};
@@ -48,7 +65,11 @@ const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, sty
   return (
     <TouchableOpacity
       activeOpacity={0.8}
-      style={[styles.container, !hasTopInStyle && { top: calculatedTop }, style]}
+      style={[
+        styles.container,
+        !hasTopInStyle && { top: calculatedTop },
+        style,
+      ]}
       onPress={handlePress}
     >
       {shouldRenderBlur && (
@@ -57,8 +78,9 @@ const BackBtn: React.FC<BackBtnProps> = ({ size = scale(24), color, onPress, sty
           blurType="light"
           blurAmount={10}
           reducedTransparencyFallbackColor={
-            (typeof flattenedStyle.backgroundColor === 'string' ? flattenedStyle.backgroundColor : undefined) ||
-            String(appliedTheme.colors.backdrop)
+            (typeof flattenedStyle.backgroundColor === 'string'
+              ? flattenedStyle.backgroundColor
+              : undefined) || String(appliedTheme.colors.backdrop)
           }
         />
       )}
@@ -78,6 +100,6 @@ const styles = StyleSheet.create({
     borderRadius: scale(100),
     justifyContent: 'center',
     alignItems: 'center',
-    overflow: 'hidden'
-  }
+    overflow: 'hidden',
+  },
 });