@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

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

@@ -0,0 +1,470 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  Platform,
+  Keyboard,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Input } from '../../../Input/Input';
+import { Button } from '../../../Button';
+import { Logo } from '../../../Logo/Logo';
+import TextButton from '../../../Button/TextButton';
+import { useTheme } from '../../../../theme';
+import { useKeyboard } from '../../../../hooks/useKeyboard';
+import HideKeyboard from '../../../Keyboard/HideKeyboard';
+import BackBtn from '../../../Button/BackBtn';
+import { Text } from '../../../Text';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { getResponsiveBottomSpacing } from '../../../../utils/Spacing';
+import { BackgroundLayout } from '../../../BackgroundLayout';
+
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
+
+export interface SignupProps {
+  title: string;
+  onSubmit?: (values: FormValues) => void;
+  onLogin?: () => void;
+  onTopBackBtnPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  formStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  topBackBtnStyle?: StyleProp<ViewStyle>;
+  minPasswordLength?: number;
+  backgroundImage?: {
+    source?: string | null;
+  };
+  logoUri?: string;
+  theme?: ThemeOverride;
+  loadingSubmitBtn?: boolean;
+  text?: {
+    usernameLabel?: string;
+    usernamePlaceholder?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    loadingSubmitBtnText?: string;
+    passwordPlaceholder?: string;
+    confirmPasswordLabel?: string;
+    confirmPasswordPlaceholder?: string;
+    loginPrompt?: string;
+    loginLink?: string;
+    signupButton?: string;
+  };
+  loginTextProps?: TextStyle;
+  loginLinkTextProps?: TextStyle;
+  renderLogo?: () => React.ReactNode;
+  renderSingUpHeader?: () => React.ReactNode;
+  renderLoginPrompt?: () => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
+  renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
+}
+
+const Signup: React.FC<SignupProps> = React.memo(
+  ({
+    title = 'Sign Up',
+    onSubmit,
+    onLogin,
+    onTopBackBtnPress,
+    containerStyle,
+    titleStyle,
+    formStyle,
+    inputStyle,
+    inputContainerStyle,
+    topBackBtnStyle,
+    minPasswordLength = 6,
+    loadingSubmitBtn,
+    backgroundImage,
+    logoUri,
+    theme: overrideTheme,
+    text,
+    loginTextProps,
+    loginLinkTextProps,
+    renderLogo,
+    renderSingUpHeader,
+    renderLoginPrompt,
+    renderSubmitButton,
+    renderTopBackBtn,
+  }) => {
+    const {
+      control,
+      handleSubmit,
+      formState: { errors, isValid, touchedFields },
+      getValues,
+    } = useForm<FormValues>({
+      defaultValues: {
+        username: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+      },
+      mode: 'onChange',
+    });
+    const { theme: resolvedTheme } = useTheme(overrideTheme);
+    const { isKeyboardOpen } = useKeyboard();
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const handleFormSubmit = useCallback(
+      async (data: FormValues) => {
+        if (!onSubmit) return;
+        setIsLoading(true);
+        try {
+          await onSubmit(data);
+        } catch (error) {
+          console.error('Form submission error:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [onSubmit]
+    );
+
+    const shouldRender = useMemo(
+      () =>
+        (condition?: boolean | unknown): boolean =>
+          typeof condition === 'function' || !!condition,
+      []
+    );
+
+    // Memoize gradient split background
+    const gradientSplitBackground = useMemo(
+      () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
+      [isKeyboardOpen]
+    );
+
+    // Memoize disabled state
+    const isDisabled = useMemo(
+      () => loadingSubmitBtn || isLoading,
+      [loadingSubmitBtn, isLoading]
+    );
+
+    return (
+      <BackgroundLayout.One
+        theme={overrideTheme}
+        backgroundImage={backgroundImage?.source}
+        gradientSplitBackground={gradientSplitBackground}
+      >
+        <SafeAreaView style={styles.safeArea}>
+          {/* Top Back Button */}
+          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+            <View style={styles.topBackBtnWrapper}>
+              {renderTopBackBtn ? (
+                renderTopBackBtn({
+                  onPress: onTopBackBtnPress ?? (() => {}),
+                })
+              ) : (
+                <BackBtn
+                  theme={overrideTheme}
+                  style={topBackBtnStyle}
+                  onPress={onTopBackBtnPress}
+                />
+              )}
+            </View>
+          )}
+          <View style={[styles.container, containerStyle]}>
+            <HideKeyboard
+              keyboardVerticalOffset={
+                Platform.OS === 'ios' ? scale(50) : scale(-50)
+              }
+            >
+              <View style={styles.centerContent}>
+                {/* Logo */}
+                {renderLogo ? (
+                  renderLogo()
+                ) : logoUri ? (
+                  <Logo logoUri={logoUri} width={100} height={100} />
+                ) : null}
+
+                {/* Title */}
+                {renderSingUpHeader ? (
+                  renderSingUpHeader()
+                ) : (
+                  <Text style={[styles.title, titleStyle]}>{title}</Text>
+                )}
+
+                {/* Form */}
+                <View style={[styles.form, formStyle]}>
+                  {/* Username */}
+                  <Controller
+                    control={control}
+                    name="username"
+                    rules={{
+                      required: 'Username is required',
+                      minLength: { value: 3, message: 'At least 3 characters' },
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input.One
+                        placeholder={text?.usernamePlaceholder || 'Username'}
+                        label={text?.usernameLabel || 'Username'}
+                        value={value}
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        disabled={isDisabled}
+                        error={!!touchedFields.username && !!errors.username}
+                        errorMessage={errors.username?.message}
+                        inputStyle={inputStyle}
+                        containerStyle={inputContainerStyle}
+                        theme={overrideTheme}
+                      />
+                    )}
+                  />
+
+                  {/* Email */}
+                  <Controller
+                    control={control}
+                    name="email"
+                    rules={{
+                      required: 'Email is required',
+                      pattern: {
+                        value: /^\S+@\S+\.\S+$/,
+                        message: 'Enter a valid email address',
+                      },
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input.One
+                        placeholder={text?.emailPlaceholder || 'Email'}
+                        label={text?.emailLabel || 'Email'}
+                        value={value}
+                        onChangeText={(inputText) => {
+                          const sanitized = inputText.replace(
+                            /[^\w@.\-+]/g,
+                            ''
+                          );
+                          onChange(sanitized);
+                        }}
+                        onBlur={onBlur}
+                        disabled={isDisabled}
+                        error={!!touchedFields.email && !!errors.email}
+                        errorMessage={errors.email?.message}
+                        inputStyle={inputStyle}
+                        containerStyle={inputContainerStyle}
+                        theme={overrideTheme}
+                        textContentType="emailAddress"
+                        autoCapitalize="none"
+                        keyboardType="email-address"
+                        autoCorrect={false}
+                      />
+                    )}
+                  />
+
+                  {/* Password */}
+                  <Controller
+                    control={control}
+                    name="password"
+                    rules={{
+                      required: 'Password is required',
+                      minLength: {
+                        value: minPasswordLength,
+                        message: `Minimum ${minPasswordLength} characters`,
+                      },
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input.One
+                        placeholder={text?.passwordPlaceholder || 'Password'}
+                        label={text?.passwordLabel || 'Password'}
+                        value={value}
+                        secureTextEntry
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        disabled={isDisabled}
+                        inputStyle={inputStyle}
+                        error={!!touchedFields.password && !!errors.password}
+                        errorMessage={errors.password?.message}
+                        containerStyle={inputContainerStyle}
+                        textContentType="none"
+                        autoCapitalize="none"
+                        spellCheck={false}
+                        autoCorrect={false}
+                        autoComplete="off"
+                        theme={overrideTheme}
+                      />
+                    )}
+                  />
+
+                  {/* Confirm Password */}
+                  <Controller
+                    control={control}
+                    name="confirmPassword"
+                    rules={{
+                      required: 'Confirm password is required',
+                      validate: (value) =>
+                        value === getValues('password') ||
+                        'Passwords do not match',
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <Input.One
+                        placeholder={
+                          text?.confirmPasswordPlaceholder || 'Confirm Password'
+                        }
+                        label={text?.confirmPasswordLabel || 'Confirm Password'}
+                        value={value}
+                        secureTextEntry
+                        onChangeText={onChange}
+                        onBlur={onBlur}
+                        error={
+                          !!touchedFields.confirmPassword &&
+                          !!errors.confirmPassword
+                        }
+                        disabled={isDisabled}
+                        errorMessage={errors.confirmPassword?.message}
+                        inputStyle={inputStyle}
+                        containerStyle={inputContainerStyle}
+                        theme={overrideTheme}
+                        textContentType="none"
+                        autoCapitalize="none"
+                        spellCheck={false}
+                        autoCorrect={false}
+                        autoComplete="off"
+                      />
+                    )}
+                  />
+
+                  {/* Submit Button */}
+                  {!isKeyboardOpen &&
+                    (renderSubmitButton ? (
+                      renderSubmitButton({
+                        onPress: handleSubmit(handleFormSubmit),
+                        disabled: !isValid || isDisabled,
+                        loading: isDisabled,
+                      })
+                    ) : (
+                      <Button.Primary
+                        title={text?.signupButton || 'Sign up'}
+                        disabled={!isValid || isDisabled}
+                        theme={overrideTheme}
+                        loading={isDisabled}
+                        loadingText={
+                          text?.loadingSubmitBtnText || 'Signing up...'
+                        }
+                        onPress={handleSubmit(handleFormSubmit)}
+                      />
+                    ))}
+                </View>
+              </View>
+
+              {/* Login Prompt */}
+              {!isKeyboardOpen &&
+                shouldRender(renderLoginPrompt || onLogin) &&
+                (renderLoginPrompt ? (
+                  renderLoginPrompt()
+                ) : (
+                  <View
+                    style={[
+                      styles.loginContainerWrapper,
+                      {
+                        bottom: getResponsiveBottomSpacing(35),
+                      },
+                    ]}
+                  >
+                    <View style={styles.loginContainer}>
+                      <View style={styles.loginRow}>
+                        <Text
+                          style={[styles.loginPrompt, loginTextProps]}
+                          color={resolvedTheme?.colors?.textPrimary}
+                        >
+                          {text?.loginPrompt || `Already have an account?`}
+                        </Text>
+                        <TextButton
+                          title={text?.loginLink || 'Login'}
+                          onPress={() => {
+                            Keyboard.dismiss();
+                            requestAnimationFrame(() => {
+                              onLogin?.();
+                            });
+                          }}
+                          bold
+                          underline
+                          color={resolvedTheme?.colors?.button}
+                          style={loginLinkTextProps}
+                        />
+                      </View>
+                    </View>
+                  </View>
+                ))}
+            </HideKeyboard>
+          </View>
+        </SafeAreaView>
+      </BackgroundLayout.One>
+    );
+  }
+);
+
+export default Signup;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: verticalScale(12),
+  },
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(16),
+    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: RFValue(21),
+    fontWeight: '700',
+    marginTop: verticalScale(5),
+    marginBottom: verticalScale(20),
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(6),
+  },
+  loginContainerWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  loginRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  loginPrompt: {
+    textAlign: 'center',
+    marginRight: 4,
+  },
+  loginContainer: {
+    alignItems: 'center',
+  },
+});

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

@@ -0,0 +1,229 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useEffect, useMemo, useCallback, useRef } from 'react';
+import { View, type ViewStyle, type StyleProp, StyleSheet } from 'react-native';
+import SplashImage from './components/SplashImage/SplashImage';
+import SplashVideo from './components/SplashVideo/SplashVideo';
+import SplashLottie from './components/SplashLottie/SplashLottie';
+
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useTheme } from '../../../../theme';
+import { useSplashCache } from '../../../../hooks/useSplashCache';
+import { AppStatusBar } from '../../../common/AppStatusBar';
+import { BackgroundLayout } from '../../../BackgroundLayout';
+
+type SplashType = 'image' | 'video' | 'lottie-animation';
+
+type SplashScreenConfig = {
+  source: string;
+  type?: SplashType;
+  width: number;
+  height: number;
+  isStatic?: boolean;
+  screenTime?: number;
+  fullscreen?: boolean;
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
+  backgroundColor?: string;
+};
+
+type SplashScreenProps = {
+  logoUrl: string;
+  splashScreenConfig: SplashScreenConfig;
+  innerContainerStyle?: StyleProp<ViewStyle>;
+  onRedirect: () => void;
+  theme?: ThemeOverride;
+  backgroundImage?: {
+    source?: string | null;
+    onImageError?: (error: Error) => void;
+    gradientSplitBackground?: number;
+    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
+  };
+};
+
+const DEFAULT_IMAGE_TIMEOUT = 5;
+const FALLBACK_TIMEOUT = 0.5;
+
+// Stable module-level default — prevents a new object reference on every render
+// when the caller omits the backgroundImage prop.
+const DEFAULT_BG_IMAGE: NonNullable<SplashScreenProps['backgroundImage']> = {
+  gradientSplitBackground: 0.4,
+  resizeMode: 'cover',
+};
+
+export const SplashScreen: React.FC<SplashScreenProps> = React.memo(
+  ({
+    splashScreenConfig,
+    innerContainerStyle,
+    backgroundImage = DEFAULT_BG_IMAGE,
+    onRedirect,
+    theme: overrideTheme,
+  }) => {
+    const { theme } = useTheme(overrideTheme);
+    const hasRedirected = useRef(false);
+
+    const {
+      source: splashSource = '',
+      type: splashType = 'image',
+      width,
+      height,
+      isStatic = false,
+      screenTime,
+      fullscreen = false,
+      resizeMode = 'contain',
+      backgroundColor: splashBgColor,
+    } = splashScreenConfig || ({} as SplashScreenConfig);
+
+    const isImageSplash = splashType === 'image';
+    const isRemote = splashSource?.startsWith('http') ?? false;
+
+    // Direct scalar derivation (slower to useMemo this than just to compute it)
+    const resolvedBgColor =
+      splashBgColor ||
+      (splashType === 'video' || splashType === 'lottie-animation'
+        ? '#000000'
+        : theme.colors.background);
+
+    const backgroundImageUrl =
+      isImageSplash && backgroundImage?.source?.startsWith('http')
+        ? backgroundImage.source
+        : undefined;
+
+    const { data } = useSplashCache({
+      logoUrl: isRemote ? splashSource : undefined,
+      backgroundUrl: backgroundImageUrl,
+    });
+
+    const resolvedSplashUri =
+      isRemote && data.logoPath
+        ? data.logoPath.startsWith('file://')
+          ? data.logoPath
+          : `file://${data.logoPath}`
+        : splashSource || '';
+
+    const displayTimeout =
+      typeof screenTime === 'number' && screenTime > 0
+        ? screenTime
+        : isImageSplash || isStatic
+          ? DEFAULT_IMAGE_TIMEOUT
+          : 0;
+
+    const handleRedirect = useCallback(() => {
+      if (hasRedirected.current) return;
+      hasRedirected.current = true;
+      try {
+        onRedirect();
+      } catch (err) {
+        console.error('[SplashScreen] Redirect error:', err);
+      }
+    }, [onRedirect]);
+
+    useEffect(() => {
+      const ms =
+        (displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT) * 1000;
+      const timer = setTimeout(handleRedirect, ms);
+      return () => clearTimeout(timer);
+    }, [displayTimeout, handleRedirect]);
+
+    const videoOnEnd = displayTimeout ? undefined : handleRedirect;
+    const lottieOnAnimationFinish = displayTimeout ? undefined : handleRedirect;
+
+    // Stability for the theme object passed as a single prop
+    const appStatusBarTheme = useMemo(() => {
+      if (!overrideTheme) {
+        return {
+          dark: { background: resolvedBgColor },
+          light: { background: resolvedBgColor },
+        };
+      }
+      if ('colors' in overrideTheme) {
+        return {
+          dark: { background: resolvedBgColor },
+          light: { background: resolvedBgColor },
+        };
+      }
+      return {
+        ...overrideTheme,
+        dark: { ...overrideTheme.dark, background: resolvedBgColor },
+        light: { ...overrideTheme.light, background: resolvedBgColor },
+      };
+    }, [overrideTheme, resolvedBgColor]);
+
+    return (
+      <BackgroundLayout.One
+        backgroundImage={isImageSplash ? backgroundImage.source : undefined}
+        backgroundColor={resolvedBgColor}
+        resizeMode={
+          (backgroundImage.resizeMode ?? 'cover') as
+            'cover' | 'contain' | 'stretch' | 'repeat'
+        }
+        innerContainerStyle={innerContainerStyle}
+        onImageError={backgroundImage.onImageError}
+        theme={overrideTheme}
+        gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
+      >
+        <AppStatusBar theme={appStatusBarTheme} />
+
+        <View style={styles.container}>
+          {splashType === 'video' && resolvedSplashUri ? (
+            <SplashVideo
+              source={resolvedSplashUri}
+              width={width}
+              height={height}
+              fullscreen={fullscreen}
+              resizeMode={
+                resizeMode === 'center' || resizeMode === 'repeat'
+                  ? 'none'
+                  : resizeMode
+              }
+              backgroundColor={resolvedBgColor}
+              onEnd={videoOnEnd}
+            />
+          ) : splashType === 'lottie-animation' && resolvedSplashUri ? (
+            <SplashLottie
+              source={resolvedSplashUri}
+              width={width}
+              height={height}
+              fullscreen={fullscreen}
+              resizeMode={
+                resizeMode === 'stretch' || resizeMode === 'repeat'
+                  ? 'cover'
+                  : (resizeMode as 'cover' | 'contain' | 'center')
+              }
+              onAnimationFinish={lottieOnAnimationFinish}
+            />
+          ) : splashType === 'image' || !resolvedSplashUri ? (
+            <SplashImage
+              source={resolvedSplashUri}
+              width={width}
+              height={height}
+              fullscreen={fullscreen}
+              resizeMode={
+                resizeMode === 'center' || resizeMode === 'repeat'
+                  ? 'contain'
+                  : resizeMode
+              }
+              theme={overrideTheme}
+            />
+          ) : null}
+        </View>
+      </BackgroundLayout.One>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+namespace SplashScreen {
+  export type Config = SplashScreenConfig;
+  export type Props = SplashScreenProps;
+}