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

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

@@ -0,0 +1,213 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+  Dimensions,
+  Platform,
+} 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';
+
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
+
+type QrViewAreaProps = {
+  scanBoxWidth?: number;
+  layout?: 'one' | 'two';
+  headerHeight?: number;
+  theme?: AppTheme;
+};
+
+const QrViewArea: React.FC<QrViewAreaProps> = ({
+  scanBoxWidth,
+  layout = 'one',
+  headerHeight = 60,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const anim = useRef(new Animated.Value(0)).current;
+
+  const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
+  const boxW = defaultBoxW * 0.9;
+  const boxH = boxW;
+
+  const availableHeight = SCREEN_H - headerHeight;
+  const boxTop = Math.floor(
+    headerHeight + (availableHeight - boxH) / 2 - scale(40)
+  );
+
+  const topOverlayHeight = Math.floor(boxTop - headerHeight);
+  const bottomOverlayHeight = Math.floor(SCREEN_H - (boxTop + boxH));
+  const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+
+  const margin = scale(12);
+  const lineTravel = boxH - margin * 2 - scale(3);
+
+  const translateY = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, lineTravel],
+  });
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: 2000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+        Animated.timing(anim, {
+          toValue: 0,
+          duration: 2000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+
+  return (
+    <>
+      <View
+        style={[
+          styles.overlayTB,
+          {
+            top: headerHeight,
+            height: topOverlayHeight,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayTB,
+          {
+            top: boxTop + boxH,
+            height: bottomOverlayHeight,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayLR,
+          {
+            top: boxTop,
+            height: boxH,
+            width: sideOverlayWidth,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayLR,
+          {
+            top: boxTop,
+            right: 0,
+            height: boxH,
+            width: sideOverlayWidth,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+
+      <View
+        style={[
+          styles.scanBox,
+          { top: boxTop, width: boxW, height: boxH, left: sideOverlayWidth },
+        ]}
+      >
+        {layout === 'two' ? (
+          <Svg width={boxW} height={boxH}>
+            <Rect
+              width={boxW}
+              height={boxH}
+              ry={scale(8)}
+              stroke={colors.button}
+              strokeWidth={scale(5)}
+              strokeDasharray={[scale(12), scale(6)]}
+              fill="none"
+            />
+          </Svg>
+        ) : (
+          ['tl', 'tr', 'bl', 'br'].map((c) => (
+            <View
+              key={c}
+              style={[
+                styles.corner,
+                styles[`corner_${c}` as keyof typeof styles],
+                {
+                  borderColor: colors.button,
+                  width: scale(18),
+                  height: scale(18),
+                  borderTopWidth: c.startsWith('t') ? scale(3) : 0,
+                  borderBottomWidth: c.startsWith('b') ? scale(3) : 0,
+                  borderLeftWidth: c.endsWith('l') ? scale(3) : 0,
+                  borderRightWidth: c.endsWith('r') ? scale(3) : 0,
+                },
+              ]}
+            />
+          ))
+        )}
+
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: margin,
+            left: margin,
+            right: margin,
+            height: scale(3),
+            borderRadius: scale(1.5),
+            backgroundColor: colors.button,
+            transform: [{ translateY }],
+            shadowColor: colors.shadow,
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 5,
+            elevation: Platform.OS === 'android' ? 4 : 0,
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayTB: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  overlayLR: {
+    position: 'absolute',
+  },
+  scanBox: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 10,
+  },
+  corner: {
+    position: 'absolute',
+  },
+  corner_tl: { top: 0, left: 0 },
+  corner_tr: { top: 0, right: 0 },
+  corner_bl: { bottom: 0, left: 0 },
+  corner_br: { bottom: 0, right: 0 },
+});
+
+export default QrViewArea;

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

@@ -3,7 +3,14 @@
  * @lastModified Mon 16 Jun 2025 at 03:05 PM
  */
 import React, { useCallback } from 'react';
-import { StyleSheet, View, Platform, Keyboard, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Platform,
+  Keyboard,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Input } from '../../Input/Input';
@@ -66,7 +73,11 @@ export interface SignupProps {
   renderLogo?: () => React.ReactNode;
   renderSingUpHeader?: () => React.ReactNode;
   renderLoginPrompt?: () => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
 }
 
@@ -93,21 +104,21 @@ const Signup: React.FC<SignupProps> = ({
   renderSingUpHeader,
   renderLoginPrompt,
   renderSubmitButton,
-  renderTopBackBtn
+  renderTopBackBtn,
 }) => {
   const {
     control,
     handleSubmit,
     formState: { errors, isValid, touchedFields },
-    getValues
+    getValues,
   } = useForm<FormValues>({
     defaultValues: {
       username: '',
       email: '',
       password: '',
-      confirmPassword: ''
+      confirmPassword: '',
     },
-    mode: 'onChange'
+    mode: 'onChange',
   });
   const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
@@ -128,13 +139,16 @@ const Signup: React.FC<SignupProps> = ({
     [onSubmit]
   );
 
-  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+  const shouldRender = (condition?: boolean | unknown): boolean =>
+    typeof condition === 'function' || !!condition;
 
   return (
     <BackgroundLayout
       theme={resolvedTheme}
       backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+      gradientSplitBackground={
+        isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
+      }
     >
       <View style={[styles.container, containerStyle]}>
         {/* Top Back Button */}
@@ -142,20 +156,32 @@ const Signup: React.FC<SignupProps> = ({
           <View style={styles.topBackBtnWrapper}>
             {renderTopBackBtn ? (
               renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={topBackBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard keyboardVerticalOffset={scale(-50)}>
           <View style={styles.centerContent}>
             {/* Logo */}
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
             {/* Title */}
-            {renderSingUpHeader ? renderSingUpHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+            {renderSingUpHeader ? (
+              renderSingUpHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            )}
 
             {/* Form */}
             <View style={[styles.form, formStyle]}>
@@ -165,7 +191,7 @@ const Signup: React.FC<SignupProps> = ({
                 name="username"
                 rules={{
                   required: 'Username is required',
-                  minLength: { value: 3, message: 'At least 3 characters' }
+                  minLength: { value: 3, message: 'At least 3 characters' },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
@@ -192,8 +218,8 @@ const Signup: React.FC<SignupProps> = ({
                   required: 'Email is required',
                   pattern: {
                     value: /^\S+@\S+\.\S+$/,
-                    message: 'Enter a valid email address'
-                  }
+                    message: 'Enter a valid email address',
+                  },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
@@ -227,8 +253,8 @@ const Signup: React.FC<SignupProps> = ({
                   required: 'Password is required',
                   minLength: {
                     value: minPasswordLength,
-                    message: `Minimum ${minPasswordLength} characters`
-                  }
+                    message: `Minimum ${minPasswordLength} characters`,
+                  },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
@@ -262,11 +288,14 @@ const Signup: React.FC<SignupProps> = ({
                 name="confirmPassword"
                 rules={{
                   required: 'Confirm password is required',
-                  validate: (value) => value === getValues('password') || 'Passwords do not match'
+                  validate: (value) =>
+                    value === getValues('password') || 'Passwords do not match',
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
-                    placeholder={text?.confirmPasswordPlaceholder || 'Confirm Password'}
+                    placeholder={
+                      text?.confirmPasswordPlaceholder || 'Confirm Password'
+                    }
                     label={text?.confirmPasswordLabel || 'Confirm Password'}
                     value={value}
                     secureTextEntry
@@ -275,7 +304,10 @@ const Signup: React.FC<SignupProps> = ({
                       onChange(sanitized);
                     }}
                     onBlur={onBlur}
-                    error={!!touchedFields.confirmPassword && !!errors.confirmPassword}
+                    error={
+                      !!touchedFields.confirmPassword &&
+                      !!errors.confirmPassword
+                    }
                     disabled={loadingSubmitBtn || isLoading}
                     errorMessage={errors.confirmPassword?.message}
                     inputStyle={inputStyle}
@@ -296,7 +328,7 @@ const Signup: React.FC<SignupProps> = ({
                   renderSubmitButton({
                     onPress: handleSubmit(handleFormSubmit),
                     disabled: !isValid || loadingSubmitBtn || isLoading,
-                    loading: loadingSubmitBtn || isLoading
+                    loading: loadingSubmitBtn || isLoading,
                   })
                 ) : (
                   <Button.Primary
@@ -320,7 +352,10 @@ const Signup: React.FC<SignupProps> = ({
               <View style={styles.loginContainerWrapper}>
                 <View style={styles.loginContainer}>
                   <View style={styles.loginRow}>
-                    <Text style={[styles.loginPrompt, loginTextProps]} color={resolvedTheme?.colors?.textPrimary}>
+                    <Text
+                      style={[styles.loginPrompt, loginTextProps]}
+                      color={resolvedTheme?.colors?.textPrimary}
+                    >
                       {text?.loginPrompt || `Already have an account?`}
                     </Text>
                     <TextButton
@@ -354,48 +389,48 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingHorizontal: scale(16),
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   topBackBtnWrapper: {
     position: 'absolute',
     top: verticalScale(6),
     left: 0,
-    zIndex: 10
+    zIndex: 10,
   },
   centerContent: {
     flex: 1,
     width: '100%',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   title: {
     fontSize: RFValue(21),
     fontWeight: '700',
     marginTop: verticalScale(5),
-    marginBottom: verticalScale(20)
+    marginBottom: verticalScale(20),
   },
   form: {
     width: '100%',
-    gap: verticalScale(6)
+    gap: verticalScale(6),
   },
   loginContainerWrapper: {
     position: 'absolute',
     bottom: verticalScale(30),
     left: 0,
     right: 0,
-    alignItems: 'center'
+    alignItems: 'center',
   },
   loginRow: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   loginPrompt: {
     textAlign: 'center',
-    marginRight: 4
+    marginRight: 4,
   },
   loginContainer: {
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });

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

@@ -52,33 +52,41 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     screenTime,
     fullscreen = false,
     resizeMode = 'contain',
-    backgroundColor: splashBackgroundColor
+    backgroundColor: splashBackgroundColor,
   },
   innerContainerStyle,
   backgroundImage = {
     gradientSplitBackground: 0.4,
-    resizeMode: 'cover'
+    resizeMode: 'cover',
   },
   onRedirect,
-  theme: overrideTheme
+  theme: overrideTheme,
 }) => {
-  const isRemoteSource = useMemo(() => splashSource.startsWith('http'), [splashSource]);
+  const isRemoteSource = useMemo(
+    () => splashSource.startsWith('http'),
+    [splashSource]
+  );
   const { theme: resolvedTheme } = useTheme(overrideTheme);
 
   const isImageSplash = splashType === 'image';
   const backgroundImageUri =
-    isImageSplash && backgroundImage.source?.startsWith('http') ? backgroundImage.source : undefined;
+    isImageSplash && backgroundImage.source?.startsWith('http')
+      ? backgroundImage.source
+      : undefined;
 
   const {
-    data: { localPathLogo }
+    data: { localPathLogo },
   } = useInitSplashCacheSync({
     logoUrl: isRemoteSource ? splashSource : undefined,
-    backgroundUrl: backgroundImageUri
+    backgroundUrl: backgroundImageUri,
   });
 
-  const resolvedSplashUri = isRemoteSource && localPathLogo ? localPathLogo : splashSource;
+  const resolvedSplashUri =
+    isRemoteSource && localPathLogo ? localPathLogo : splashSource;
   const effectiveTimeout = useMemo(() => {
-    const timeout = screenTime ?? (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
+    const timeout =
+      screenTime ??
+      (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
     return Number.isFinite(timeout) ? Number(timeout) : 0;
   }, [screenTime, isImageSplash, isStatic]);
 
@@ -107,7 +115,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
       width,
       height,
       fullscreen,
-      resizeMode: resizeMode as any
+      resizeMode: resizeMode as any,
     }),
     [resolvedSplashUri, width, height, fullscreen, resizeMode]
   );
@@ -115,17 +123,28 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   const renderSplashContent = useCallback(() => {
     switch (splashType) {
       case 'video':
-        return <SplashVideo {...splashComponentProps} onEnd={effectiveTimeout ? undefined : handleRedirect} />;
+        return (
+          <SplashVideo
+            {...splashComponentProps}
+            onEnd={effectiveTimeout ? undefined : handleRedirect}
+          />
+        );
       case 'lottie-animation':
         return (
-          <SplashLottie {...splashComponentProps} onAnimationFinish={effectiveTimeout ? undefined : handleRedirect} />
+          <SplashLottie
+            {...splashComponentProps}
+            onAnimationFinish={effectiveTimeout ? undefined : handleRedirect}
+          />
         );
       case 'image':
       default:
         return <SplashImage {...splashComponentProps} />;
     }
   }, [splashType, splashComponentProps, effectiveTimeout, handleRedirect]);
-  const getSafeBackgroundColor = (inputColor: string | undefined, fallbackColor: string): string => {
+  const getSafeBackgroundColor = (
+    inputColor: string | undefined,
+    fallbackColor: string
+  ): string => {
     try {
       if (!inputColor) return fallbackColor;
 
@@ -139,9 +158,14 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
       return fallbackColor;
     }
   };
-  const colorToUse = getSafeBackgroundColor(splashBackgroundColor, resolvedTheme.colors.background);
+  const colorToUse = getSafeBackgroundColor(
+    splashBackgroundColor,
+    resolvedTheme.colors.background
+  );
   const isDark = Color(colorToUse).isDark();
-  const statusBarStyle: 'light-content' | 'dark-content' = isDark ? 'light-content' : 'dark-content';
+  const statusBarStyle: 'light-content' | 'dark-content' = isDark
+    ? 'light-content'
+    : 'dark-content';
 
   return (
     <BackgroundLayout
@@ -153,7 +177,11 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
       theme={resolvedTheme}
       gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
     >
-      <StatusBar translucent backgroundColor="transparent" barStyle={statusBarStyle} />
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={statusBarStyle}
+      />
 
       {renderSplashContent()}
     </BackgroundLayout>

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);