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

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

@@ -7,6 +7,7 @@ import ForgotPassword from './ForgotPassword/ForgotPassword';
 import LoginWithEmail from './Login/LoginWithEmail';
 import LoginWithPhone from './Login/LoginWithPhone';
 import OTP from './OTP/OTP';
+import QrLogin from './QrLogin/QrLogin';
 import SignUp from './SignUp/SignUp';
 import { SplashScreen } from './SplashScreen/SplashScreen';
 
@@ -16,7 +17,8 @@ const Auth = {
   SignUp,
   OTP,
   ForgotPassword,
-  SplashScreen
+  SplashScreen,
+  QrLogin,
 };
 
 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',
+  },
 });

package/src/components/Button/MenuBtn.tsx

@@ -16,7 +16,7 @@ import {
   UIManager,
   StatusBar,
   type StyleProp,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -34,15 +34,26 @@ type MenuBtnProps = {
   enableBlur?: boolean;
 };
 
-const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = false }) => {
+const MenuBtn: React.FC<MenuBtnProps> = ({
+  actions,
+  theme,
+  style,
+  enableBlur = false,
+}) => {
   const insets = useSafeAreaInsets();
   const { theme: appliedTheme } = useTheme(theme);
   const [visible, setVisible] = useState(false);
-  const [menuPosition, setMenuPosition] = useState<{ top: number; right: number }>({ top: 0, right: scale(13) });
+  const [menuPosition, setMenuPosition] = useState<{
+    top: number;
+    right: number;
+  }>({ top: 0, right: scale(13) });
 
   const btnRef = useRef(null);
 
-  const flattenedStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
+  const flattenedStyle = useMemo(
+    () => StyleSheet.flatten(style) || {},
+    [style]
+  );
   const shouldRenderBlur = useMemo(
     () => enableBlur && !!flattenedStyle.backgroundColor,
     [enableBlur, flattenedStyle.backgroundColor]
@@ -52,8 +63,14 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
     const handle = findNodeHandle(btnRef.current);
     if (handle) {
       UIManager.measureInWindow(handle, (_x, y, _w, _h) => {
-        const extraOffset = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) - verticalScale(2) : 0;
-        setMenuPosition({ top: y + verticalScale(32) + extraOffset, right: scale(13) });
+        const extraOffset =
+          Platform.OS === 'android'
+            ? (StatusBar.currentHeight ?? 0) - verticalScale(2)
+            : 0;
+        setMenuPosition({
+          top: y + verticalScale(32) + extraOffset,
+          right: scale(13),
+        });
         setVisible(true);
       });
     } else {
@@ -69,7 +86,11 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
       <TouchableOpacity
         ref={btnRef}
         activeOpacity={0.7}
-        style={[styles.container, { top: insets.top + verticalScale(5) }, style]}
+        style={[
+          styles.container,
+          { top: insets.top + verticalScale(5) },
+          style,
+        ]}
         onPress={openMenu}
       >
         {shouldRenderBlur && Platform.OS === 'ios' ? (
@@ -77,13 +98,19 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
             style={StyleSheet.absoluteFill}
             blurType="light"
             blurAmount={10}
-            reducedTransparencyFallbackColor={String(flattenedStyle.backgroundColor || appliedTheme.colors.backdrop)}
+            reducedTransparencyFallbackColor={String(
+              flattenedStyle.backgroundColor || appliedTheme.colors.backdrop
+            )}
           />
         ) : (
           <View
             style={[
               StyleSheet.absoluteFill,
-              { backgroundColor: flattenedStyle.backgroundColor || appliedTheme.colors.backdrop }
+              {
+                backgroundColor:
+                  flattenedStyle.backgroundColor ||
+                  appliedTheme.colors.backdrop,
+              },
             ]}
           />
         )}
@@ -108,8 +135,8 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                 position: 'absolute',
                 top: menuPosition.top,
                 right: menuPosition.right,
-                backgroundColor: appliedTheme.colors.surface
-              }
+                backgroundColor: appliedTheme.colors.surface,
+              },
             ]}
           >
             {memoizedActions.map((action, index) => (
@@ -127,16 +154,28 @@ const MenuBtn: React.FC<MenuBtnProps> = ({ actions, theme, style, enableBlur = f
                 style={({ pressed }) => [
                   styles.menuItem,
                   {
-                    backgroundColor: pressed ? appliedTheme.colors.surfaceVariant : 'transparent'
-                  }
+                    backgroundColor: pressed
+                      ? appliedTheme.colors.surfaceVariant
+                      : 'transparent',
+                  },
                 ]}
               >
                 {action?.icon && (
                   <View style={styles.iconBox}>
-                    <action.icon size={scale(18)} color={appliedTheme.colors.textPrimary} />
+                    <action.icon
+                      size={scale(18)}
+                      color={appliedTheme.colors.textPrimary}
+                    />
                   </View>
                 )}
-                <Text style={[styles.label, { color: appliedTheme.colors.textPrimary }]}>{action.label}</Text>
+                <Text
+                  style={[
+                    styles.label,
+                    { color: appliedTheme.colors.textPrimary },
+                  ]}
+                >
+                  {action.label}
+                </Text>
               </Pressable>
             ))}
           </Pressable>
@@ -157,11 +196,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
-    zIndex: 4
+    zIndex: 4,
   },
   modalRoot: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.2)'
+    backgroundColor: 'rgba(0,0,0,0.2)',
   },
   menuBox: {
     borderRadius: scale(6),
@@ -171,20 +210,20 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     shadowRadius: 4,
     minWidth: scale(150),
-    paddingVertical: verticalScale(2)
+    paddingVertical: verticalScale(2),
   },
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: verticalScale(8),
     paddingHorizontal: scale(10),
-    borderRadius: scale(5)
+    borderRadius: scale(5),
   },
   iconBox: {
-    marginRight: scale(8)
+    marginRight: scale(8),
   },
   label: {
     fontSize: RFValue(12),
-    includeFontPadding: false
-  }
+    includeFontPadding: false,
+  },
 });