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

package/src/components/Auth/OTP/OTP.tsx

@@ -1,6 +1,18 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
-import { View, type ViewStyle, type TextStyle, type KeyboardTypeOptions, StyleSheet, Platform } from 'react-native';
-import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
+import {
+  View,
+  type ViewStyle,
+  type TextStyle,
+  type KeyboardTypeOptions,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
 import { scale, verticalScale } from 'react-native-size-matters';
 
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
@@ -46,12 +58,19 @@ type OTPProps = {
   };
   // Resend
   onResendOtp?: () => void;
-  renderResendButton?: (props: { onPress: () => void; disabled: boolean }) => React.ReactNode;
+  renderResendButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+  }) => React.ReactNode;
   resendDisabledTime?: number;
 
   // Render Props
   renderLogo?: () => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
   renderBackButton?: (props: { onPress: () => void }) => React.ReactNode;
   renderOtpHeader?: () => React.ReactNode;
   renderOtpInput?: (props: {
@@ -73,7 +92,7 @@ const DEFAULT_TEXT = {
   loadingSubmitBtnText: 'Verifying...',
   otpSentText: 'A One-Time OTP has been sent to',
   resendOtpText: 'Resend OTP',
-  resendOtpCountdownText: 'Resend OTP in'
+  resendOtpCountdownText: 'Resend OTP in',
 };
 
 const OTP: React.FC<OTPProps> = ({
@@ -102,7 +121,7 @@ const OTP: React.FC<OTPProps> = ({
   renderOtpInput,
   renderPhoneText,
   cellStyle,
-  focusCellStyle
+  focusCellStyle,
 }) => {
   const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
@@ -113,7 +132,7 @@ const OTP: React.FC<OTPProps> = ({
   const ref = useBlurOnFulfill({ value: otp, cellCount: otpDigitCount });
   const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
     value: otp,
-    setValue: setOtp
+    setValue: setOtp,
   });
 
   const styles = useMemo(
@@ -124,13 +143,13 @@ const OTP: React.FC<OTPProps> = ({
           width: '100%',
           paddingHorizontal: scale(16),
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         },
         topBackBtnWrapper: {
           position: 'absolute',
           top: verticalScale(6),
           left: 0,
-          zIndex: 10
+          zIndex: 10,
         },
 
         centerContent: {
@@ -139,35 +158,35 @@ const OTP: React.FC<OTPProps> = ({
           maxWidth: scale(400),
           alignItems: 'center',
           justifyContent: 'center',
-          gap: verticalScale(4)
+          gap: verticalScale(4),
         },
         title: {
           fontSize: RFValue(21),
           fontWeight: '700',
           marginTop: verticalScale(8),
           color: resolvedTheme.colors.textPrimary,
-          textAlign: 'center'
+          textAlign: 'center',
         },
         sentText: {
           fontSize: RFValue(12),
           color: resolvedTheme.colors.onSurfaceVariant,
           textAlign: 'center',
-          lineHeight: scale(18)
+          lineHeight: scale(18),
         },
         sentNumberContainer: {
           marginTop: verticalScale(8),
-          alignItems: 'center'
+          alignItems: 'center',
         },
         form: {
           width: '100%',
           gap: verticalScale(20),
           alignItems: 'center',
           marginTop: verticalScale(24),
-          marginBottom: isKeyboardOpen ? verticalScale(20) : 0
+          marginBottom: isKeyboardOpen ? verticalScale(20) : 0,
         },
         codeFieldRoot: {
           width: Display.setWidth(80),
-          marginTop: scale(10)
+          marginTop: scale(10),
         },
         cell: {
           width: scale(55),
@@ -183,12 +202,12 @@ const OTP: React.FC<OTPProps> = ({
           alignSelf: 'center',
           overflow: 'hidden',
           color: resolvedTheme.colors.textPrimary,
-          borderColor: resolvedTheme.colors.outline
+          borderColor: resolvedTheme.colors.outline,
         },
         focusCell: {
           borderColor: resolvedTheme.colors.primary,
-          backgroundColor: resolvedTheme.colors.surfaceVariant
-        }
+          backgroundColor: resolvedTheme.colors.surfaceVariant,
+        },
       }),
     [
       isKeyboardOpen,
@@ -196,7 +215,7 @@ const OTP: React.FC<OTPProps> = ({
       resolvedTheme.colors.outline,
       resolvedTheme.colors.primary,
       resolvedTheme.colors.surfaceVariant,
-      resolvedTheme.colors.textPrimary
+      resolvedTheme.colors.textPrimary,
     ]
   );
 
@@ -229,7 +248,8 @@ const OTP: React.FC<OTPProps> = ({
 
   const isLoading = loading || isSubmitting;
   const isSubmitDisabled = otp.length !== otpDigitCount || isLoading;
-  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+  const shouldRender = (condition?: boolean | unknown): boolean =>
+    typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
       theme={resolvedTheme}
@@ -242,18 +262,30 @@ const OTP: React.FC<OTPProps> = ({
           <View style={styles.topBackBtnWrapper}>
             {renderBackButton ? (
               renderBackButton({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={backBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={backBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
-            {renderOtpHeader ? renderOtpHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+            {renderOtpHeader ? (
+              renderOtpHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            )}
 
             {phoneNumber &&
               (renderPhoneText ? (
@@ -266,7 +298,7 @@ const OTP: React.FC<OTPProps> = ({
                       fontWeight: '700',
                       fontSize: RFValue(13),
                       marginTop: verticalScale(4),
-                      color: resolvedTheme.colors.primary
+                      color: resolvedTheme.colors.primary,
                     }}
                   >
                     {phoneNumber}
@@ -279,7 +311,10 @@ const OTP: React.FC<OTPProps> = ({
                 renderOtpInput({
                   value: otp,
                   onChange: (val) => setOtp(val.replace(/\D/g, '')),
-                  isFocused: Array.from({ length: otpDigitCount }, (_, i) => otp.length === i)
+                  isFocused: Array.from(
+                    { length: otpDigitCount },
+                    (_, i) => otp.length === i
+                  ),
                 })
               ) : (
                 <CodeField
@@ -294,7 +329,12 @@ const OTP: React.FC<OTPProps> = ({
                   renderCell={({ index, symbol, isFocused }) => (
                     <Text
                       key={index}
-                      style={[styles.cell, cellStyle, isFocused && styles.focusCell, isFocused && focusCellStyle]}
+                      style={[
+                        styles.cell,
+                        cellStyle,
+                        isFocused && styles.focusCell,
+                        isFocused && focusCellStyle,
+                      ]}
                       onLayout={getCellOnLayoutHandler(index)}
                     >
                       {symbol || (isFocused ? <Cursor /> : null)}
@@ -307,7 +347,7 @@ const OTP: React.FC<OTPProps> = ({
                 renderSubmitButton({
                   onPress: handleSubmit,
                   disabled: isSubmitDisabled,
-                  loading: isLoading
+                  loading: isLoading,
                 })
               ) : (
                 <Button.Primary
@@ -324,19 +364,24 @@ const OTP: React.FC<OTPProps> = ({
               {/* Resend OTP Section */}
 
               {!isKeyboardOpen && (
-                <View style={{ alignItems: 'center', marginTop: verticalScale(10) }}>
+                <View
+                  style={{ alignItems: 'center', marginTop: verticalScale(10) }}
+                >
                   {renderResendButton ? (
                     renderResendButton({
                       onPress: handleResendOtp,
-                      disabled: resendTimer > 0
+                      disabled: resendTimer > 0,
                     })
                   ) : (
                     <Text
                       onPress={resendTimer <= 0 ? handleResendOtp : undefined}
                       style={{
                         fontSize: RFValue(12),
-                        color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.primary,
-                        textAlign: 'center'
+                        color:
+                          resendTimer > 0
+                            ? resolvedTheme.colors.onSurfaceVariant
+                            : resolvedTheme.colors.primary,
+                        textAlign: 'center',
                       }}
                     >
                       {resendTimer > 0

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>