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

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

@@ -7,26 +7,31 @@ import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import BackBtn from '../../Button/BackBtn';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import { Logo } from '../../Logo/Logo';
 import { Button } from '../../Button';
 import Display from '../../../utils/Display';
 import { Text } from '../../Text';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type OTPProps = {
   title?: string;
   onSubmit?: (values: { otp: string }) => Promise<void> | void;
-  onBackPress?: () => void;
+  onTopBackBtnPress?: () => void;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
   formStyle?: ViewStyle;
   backBtnStyle?: ViewStyle;
-  backgroundImage?: string;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
   loading?: boolean;
   logoUri?: string;
   theme?: AppTheme;
-  gradientEnabled?: boolean;
   otpDigitCount?: number;
   keyboardType?: KeyboardTypeOptions;
   phoneNumber?: string;
@@ -74,7 +79,7 @@ const DEFAULT_TEXT = {
 const OTP: React.FC<OTPProps> = ({
   title,
   onSubmit,
-  onBackPress,
+  onTopBackBtnPress,
   containerStyle,
   titleStyle,
   formStyle,
@@ -82,8 +87,7 @@ const OTP: React.FC<OTPProps> = ({
   backgroundImage,
   loading = false,
   logoUri,
-  theme,
-  gradientEnabled = true,
+  theme: overrideTheme,
   otpDigitCount = 4,
   keyboardType = 'number-pad',
   phoneNumber,
@@ -100,7 +104,7 @@ const OTP: React.FC<OTPProps> = ({
   cellStyle,
   focusCellStyle
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [otp, setOtp] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -122,22 +126,31 @@ const OTP: React.FC<OTPProps> = ({
           justifyContent: 'center',
           alignItems: 'center'
         },
-        content: {
+        topBackBtnWrapper: {
+          position: 'absolute',
+          top: verticalScale(6),
+          left: 0,
+          zIndex: 10
+        },
+
+        centerContent: {
+          flex: 1,
           width: '100%',
           maxWidth: scale(400),
           alignItems: 'center',
-          gap: verticalScale(12)
+          justifyContent: 'center',
+          gap: verticalScale(4)
         },
         title: {
-          fontSize: scale(22),
+          fontSize: RFValue(21),
           fontWeight: '700',
           marginTop: verticalScale(8),
-          color: appliedTheme.colors.textPrimary,
+          color: resolvedTheme.colors.textPrimary,
           textAlign: 'center'
         },
         sentText: {
-          fontSize: scale(14),
-          color: appliedTheme.colors.onSurfaceVariant,
+          fontSize: RFValue(12),
+          color: resolvedTheme.colors.onSurfaceVariant,
           textAlign: 'center',
           lineHeight: scale(18)
         },
@@ -149,7 +162,8 @@ const OTP: React.FC<OTPProps> = ({
           width: '100%',
           gap: verticalScale(20),
           alignItems: 'center',
-          marginTop: verticalScale(24)
+          marginTop: verticalScale(24),
+          marginBottom: isKeyboardOpen ? verticalScale(20) : 0
         },
         codeFieldRoot: {
           width: Display.setWidth(80),
@@ -158,21 +172,32 @@ const OTP: React.FC<OTPProps> = ({
         cell: {
           width: scale(55),
           height: scale(55),
-          fontSize: scale(30),
+          fontSize: RFValue(26),
           fontWeight: '500',
-          paddingTop: Platform.OS === 'ios' ? scale(10) : scale(7),
+          paddingTop: Platform.OS === 'ios' ? scale(9) : scale(7),
           borderWidth: scale(1),
           borderRadius: scale(8),
+          justifyContent: 'center',
+          alignItems: 'center',
           textAlign: 'center',
-          color: appliedTheme.colors.textPrimary,
-          borderColor: appliedTheme.colors.outline
+          alignSelf: 'center',
+          overflow: 'hidden',
+          color: resolvedTheme.colors.textPrimary,
+          borderColor: resolvedTheme.colors.outline
         },
         focusCell: {
-          borderColor: appliedTheme.colors.primary,
-          backgroundColor: appliedTheme.colors.surface
+          borderColor: resolvedTheme.colors.primary,
+          backgroundColor: resolvedTheme.colors.surfaceVariant
         }
       }),
-    [appliedTheme]
+    [
+      isKeyboardOpen,
+      resolvedTheme.colors.onSurfaceVariant,
+      resolvedTheme.colors.outline,
+      resolvedTheme.colors.primary,
+      resolvedTheme.colors.surfaceVariant,
+      resolvedTheme.colors.textPrimary
+    ]
   );
 
   useEffect(() => {
@@ -204,22 +229,28 @@ 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;
   return (
     <BackgroundLayout
-      gradientEnabled={gradientEnabled}
-      backgroundImage={backgroundImage}
-      gradientSplit={isKeyboardOpen ? 0.3 : 0.4}
+      theme={resolvedTheme}
+      backgroundImage={backgroundImage?.source}
+      gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
-      <HideKeyboard keyboardVerticalOffset={verticalScale(-80)}>
-        <View style={[styles.container, containerStyle]}>
-          {renderBackButton ? (
-            renderBackButton({ onPress: onBackPress ?? (() => {}) })
-          ) : onBackPress ? (
-            <BackBtn theme={appliedTheme} style={backBtnStyle} onPress={onBackPress} />
-          ) : null}
-
-          <View style={styles.content}>
+      <View style={[styles.container, containerStyle]}>
+        {/* Top Back Button */}
+        {shouldRender(renderBackButton || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderBackButton ? (
+              renderBackButton({
+                onPress: onTopBackBtnPress ?? (() => {})
+              })
+            ) : (
+              <BackBtn theme={resolvedTheme} style={backBtnStyle} onPress={onTopBackBtnPress} />
+            )}
+          </View>
+        )}
+        <HideKeyboard>
+          <View style={styles.centerContent}>
             {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
 
             {renderOtpHeader ? renderOtpHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
@@ -233,9 +264,9 @@ const OTP: React.FC<OTPProps> = ({
                   <Text
                     style={{
                       fontWeight: '700',
-                      fontSize: scale(15),
+                      fontSize: RFValue(13),
                       marginTop: verticalScale(4),
-                      color: appliedTheme.colors.primary
+                      color: resolvedTheme.colors.primary
                     }}
                   >
                     {phoneNumber}
@@ -281,40 +312,44 @@ const OTP: React.FC<OTPProps> = ({
               ) : (
                 <Button.Primary
                   title={text.submitButton || DEFAULT_TEXT.submitButton}
-                  theme={appliedTheme}
+                  theme={resolvedTheme}
                   onPress={handleSubmit}
                   loadingText={text.loadingSubmitBtnText}
+                  titleStyle={{ fontSize: RFValue(13) }}
                   disabled={isSubmitDisabled}
                   loading={isLoading}
                 />
               )}
 
               {/* Resend OTP Section */}
-              <View style={{ alignItems: 'center', marginTop: verticalScale(10) }}>
-                {renderResendButton ? (
-                  renderResendButton({
-                    onPress: handleResendOtp,
-                    disabled: resendTimer > 0
-                  })
-                ) : (
-                  <Text
-                    onPress={resendTimer <= 0 ? handleResendOtp : undefined}
-                    style={{
-                      fontSize: scale(14),
-                      color: resendTimer > 0 ? appliedTheme.colors.onSurfaceVariant : appliedTheme.colors.primary,
-                      textAlign: 'center'
-                    }}
-                  >
-                    {resendTimer > 0
-                      ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
-                      : text?.resendOtpText || DEFAULT_TEXT.resendOtpText}
-                  </Text>
-                )}
-              </View>
+
+              {!isKeyboardOpen && (
+                <View style={{ alignItems: 'center', marginTop: verticalScale(10) }}>
+                  {renderResendButton ? (
+                    renderResendButton({
+                      onPress: handleResendOtp,
+                      disabled: resendTimer > 0
+                    })
+                  ) : (
+                    <Text
+                      onPress={resendTimer <= 0 ? handleResendOtp : undefined}
+                      style={{
+                        fontSize: RFValue(12),
+                        color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.primary,
+                        textAlign: 'center'
+                      }}
+                    >
+                      {resendTimer > 0
+                        ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
+                        : text?.resendOtpText || DEFAULT_TEXT.resendOtpText}
+                    </Text>
+                  )}
+                </View>
+              )}
             </View>
           </View>
-        </View>
-      </HideKeyboard>
+        </HideKeyboard>
+      </View>
     </BackgroundLayout>
   );
 };

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

@@ -11,12 +11,13 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme';
+import { useTheme } from '../../../theme/hook/useTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
 import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
   username: string;
@@ -37,11 +38,15 @@ export interface SignupProps {
   inputContainerStyle?: ViewStyle;
   topBackBtnStyle?: ViewStyle;
   minPasswordLength?: number;
-  backgroundImage?: string;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
   logoUri?: string;
   theme?: AppTheme;
   loadingSubmitBtn?: boolean;
-  gradientEnabled?: boolean;
   text?: {
     usernameLabel?: string;
     usernamePlaceholder?: string;
@@ -80,8 +85,7 @@ const Signup: React.FC<SignupProps> = ({
   loadingSubmitBtn,
   backgroundImage,
   logoUri,
-  theme,
-  gradientEnabled,
+  theme: overrideTheme,
   text,
   loginTextProps,
   loginLinkTextProps,
@@ -105,8 +109,7 @@ const Signup: React.FC<SignupProps> = ({
     },
     mode: 'onChange'
   });
-
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: resolvedTheme } = useTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -129,20 +132,24 @@ const Signup: React.FC<SignupProps> = ({
 
   return (
     <BackgroundLayout
-      gradientEnabled={gradientEnabled}
-      backgroundImage={backgroundImage}
-      gradientSplit={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+      theme={resolvedTheme}
+      backgroundImage={backgroundImage?.source}
+      gradientSplitBackground={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
     >
-      <HideKeyboard>
-        <View style={[styles.container, containerStyle]}>
-          {/* Top Back Button */}
-          {shouldRender(renderTopBackBtn || onTopBackBtnPress) &&
-            (renderTopBackBtn ? (
-              renderTopBackBtn({ onPress: onTopBackBtnPress ?? (() => {}) })
+      <View style={[styles.container, containerStyle]}>
+        {/* Top Back Button */}
+        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+          <View style={styles.topBackBtnWrapper}>
+            {renderTopBackBtn ? (
+              renderTopBackBtn({
+                onPress: onTopBackBtnPress ?? (() => {})
+              })
             ) : (
-              <BackBtn theme={appliedTheme} 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}
@@ -172,7 +179,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.username?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                   />
                 )}
               />
@@ -203,7 +210,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -239,10 +246,12 @@ const Signup: React.FC<SignupProps> = ({
                     error={!!touchedFields.password && !!errors.password}
                     errorMessage={errors.password?.message}
                     containerStyle={inputContainerStyle}
-                    textContentType="password"
+                    textContentType="none"
                     autoCapitalize="none"
+                    spellCheck={false}
                     autoCorrect={false}
-                    theme={appliedTheme}
+                    autoComplete="off"
+                    theme={resolvedTheme}
                   />
                 )}
               />
@@ -271,10 +280,12 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.confirmPassword?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={appliedTheme}
-                    textContentType="password"
+                    theme={resolvedTheme}
+                    textContentType="none"
                     autoCapitalize="none"
+                    spellCheck={false}
                     autoCorrect={false}
+                    autoComplete="off"
                   />
                 )}
               />
@@ -291,7 +302,7 @@ const Signup: React.FC<SignupProps> = ({
                   <Button.Primary
                     title={text?.signupButton || 'Sign up'}
                     disabled={!isValid}
-                    theme={appliedTheme}
+                    theme={resolvedTheme}
                     loading={loadingSubmitBtn || isLoading}
                     loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
                     onPress={handleSubmit(handleFormSubmit)}
@@ -309,7 +320,7 @@ const Signup: React.FC<SignupProps> = ({
               <View style={styles.loginContainerWrapper}>
                 <View style={styles.loginContainer}>
                   <View style={styles.loginRow}>
-                    <Text style={[styles.loginPrompt, loginTextProps]} color={appliedTheme?.colors?.textPrimary}>
+                    <Text style={[styles.loginPrompt, loginTextProps]} color={resolvedTheme?.colors?.textPrimary}>
                       {text?.loginPrompt || `Already have an account?`}
                     </Text>
                     <TextButton
@@ -322,15 +333,15 @@ const Signup: React.FC<SignupProps> = ({
                       }}
                       bold
                       underline
-                      color={appliedTheme?.colors?.button}
+                      color={resolvedTheme?.colors?.button}
                       style={loginLinkTextProps}
                     />
                   </View>
                 </View>
               </View>
             ))}
-        </View>
-      </HideKeyboard>
+        </HideKeyboard>
+      </View>
     </BackgroundLayout>
   );
 };
@@ -345,13 +356,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  topBackBtnWrapper: {
+    position: 'absolute',
+    top: verticalScale(6),
+    left: 0,
+    zIndex: 10
+  },
   centerContent: {
+    flex: 1,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center'
   },
   title: {
-    fontSize: scale(22),
+    fontSize: RFValue(21),
     fontWeight: '700',
     marginTop: verticalScale(5),
     marginBottom: verticalScale(20)

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

@@ -0,0 +1,166 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 30 Jul 2025 at 03:21 PM
+ */
+
+import React, { useEffect, useMemo, useCallback } from 'react';
+import SplashImage from './components/SplashImage/SplashImage';
+import SplashVideo from './components/SplashVideo/SplashVideo';
+import SplashLottie from './components/SplashLottie/SplashLottie';
+import { StatusBar, type ViewStyle } from 'react-native';
+import type { AppTheme } from '../../../theme/themes';
+import { useTheme } from '../../../theme';
+import { useInitSplashCacheSync } from '../../../hooks/useInitSplashCacheSync';
+import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
+import Color from 'color';
+type SplashSourceType = 'image' | 'video' | 'lottie-animation';
+
+type SplashScreenConfig = {
+  source: string;
+  type?: SplashSourceType;
+  width: number;
+  height: number;
+  isStatic?: boolean;
+  screenTime?: number;
+  fullscreen?: boolean;
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
+  backgroundColor?: string;
+};
+
+type SplashScreenProps = {
+  splashScreenConfig: SplashScreenConfig;
+  innerContainerStyle?: ViewStyle;
+  onRedirect: () => void;
+  theme?: AppTheme;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+};
+
+const DEFAULT_IMAGE_TIMEOUT_SECONDS = 5;
+
+export const SplashScreen: React.FC<SplashScreenProps> = ({
+  splashScreenConfig: {
+    source: splashSource,
+    type: splashType = 'image',
+    width,
+    height,
+    isStatic = false,
+    screenTime,
+    fullscreen = false,
+    resizeMode = 'contain',
+    backgroundColor: splashBackgroundColor
+  },
+  innerContainerStyle,
+  backgroundImage = {
+    gradientSplitBackground: 0.4,
+    resizeMode: 'cover'
+  },
+  onRedirect,
+  theme: overrideTheme
+}) => {
+  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;
+
+  const {
+    data: { localPathLogo }
+  } = useInitSplashCacheSync({
+    logoUrl: isRemoteSource ? splashSource : undefined,
+    backgroundUrl: backgroundImageUri
+  });
+
+  const resolvedSplashUri = isRemoteSource && localPathLogo ? localPathLogo : splashSource;
+  const effectiveTimeout = useMemo(() => {
+    const timeout = screenTime ?? (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
+    return Number.isFinite(timeout) ? Number(timeout) : 0;
+  }, [screenTime, isImageSplash, isStatic]);
+
+  const handleRedirect = useCallback(() => {
+    try {
+      onRedirect();
+    } catch (err) {
+      console.error('[SplashScreen] Redirect error:', err);
+    }
+  }, [onRedirect]);
+
+  useEffect(() => {
+    const fallbackTimeout = 0.5; // fallback to 0.5s even if 0
+    const timeout = effectiveTimeout > 0 ? effectiveTimeout : fallbackTimeout;
+    const timer = setTimeout(() => {
+      handleRedirect();
+    }, timeout * 1000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [effectiveTimeout, handleRedirect]);
+
+  const splashComponentProps = useMemo(
+    () => ({
+      source: resolvedSplashUri,
+      width,
+      height,
+      fullscreen,
+      resizeMode: resizeMode as any
+    }),
+    [resolvedSplashUri, width, height, fullscreen, resizeMode]
+  );
+
+  const renderSplashContent = useCallback(() => {
+    switch (splashType) {
+      case 'video':
+        return <SplashVideo {...splashComponentProps} onEnd={effectiveTimeout ? undefined : handleRedirect} />;
+      case 'lottie-animation':
+        return (
+          <SplashLottie {...splashComponentProps} onAnimationFinish={effectiveTimeout ? undefined : handleRedirect} />
+        );
+      case 'image':
+      default:
+        return <SplashImage {...splashComponentProps} />;
+    }
+  }, [splashType, splashComponentProps, effectiveTimeout, handleRedirect]);
+  const getSafeBackgroundColor = (inputColor: string | undefined, fallbackColor: string): string => {
+    try {
+      if (!inputColor) return fallbackColor;
+
+      const parsedColor = Color(inputColor);
+      const alpha = parsedColor.alpha(); // 0 to 1
+
+      if (alpha < 0.8) return fallbackColor; // ✅ your condition
+
+      return parsedColor.hex(); // Always convert to solid hex
+    } catch (e) {
+      return fallbackColor;
+    }
+  };
+  const colorToUse = getSafeBackgroundColor(splashBackgroundColor, resolvedTheme.colors.background);
+  const isDark = Color(colorToUse).isDark();
+  const statusBarStyle: 'light-content' | 'dark-content' = isDark ? 'light-content' : 'dark-content';
+
+  return (
+    <BackgroundLayout
+      backgroundImage={isImageSplash ? backgroundImage.source : undefined}
+      backgroundColor={splashBackgroundColor}
+      resizeMode={backgroundImage.resizeMode ?? 'cover'}
+      innerContainerStyle={innerContainerStyle}
+      onImageError={backgroundImage.onImageError}
+      theme={resolvedTheme}
+      gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
+    >
+      <StatusBar translucent backgroundColor="transparent" barStyle={statusBarStyle} />
+
+      {renderSplashContent()}
+    </BackgroundLayout>
+  );
+};
+
+namespace SplashScreen {
+  export type Config = SplashScreenConfig;
+  export type Props = SplashScreenProps;
+}