@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

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

@@ -0,0 +1,248 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 17 Oct 2025 at 09:51 PM
+ */
+
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { type ViewStyle } 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 { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+
+import { BackgroundLayout } from '../../../BackgroundLayout/BackgroundLayout';
+import { useSplashCache } from '../../../../hooks/useSplashCache';
+import { AppStatusBar } from '../../../common/AppStatusBar';
+
+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?: 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;
+
+// Move extension arrays outside component to prevent recreation
+const VIDEO_EXTENSIONS = ['.mp4', '.mov', '.mkv', '.webm', '.avi', '.3gp'];
+const LOTTIE_EXTENSIONS = ['.json', '.lottie'];
+
+export const SplashScreen: React.FC<SplashScreenProps> = React.memo(
+  ({
+    splashScreenConfig,
+    innerContainerStyle,
+    backgroundImage = {
+      gradientSplitBackground: 0.4,
+      resizeMode: 'cover',
+    },
+    onRedirect,
+    theme: overrideTheme,
+  }) => {
+    useInternalTheme(overrideTheme);
+
+    const {
+      source: splashSource = '',
+      type: splashType = 'image',
+      width,
+      height,
+      isStatic = false,
+      screenTime,
+      fullscreen = false,
+      resizeMode = 'contain',
+      backgroundColor: splashBgColor,
+    } = splashScreenConfig;
+
+    // Memoize computed values
+    const isRemote = useMemo(
+      () => splashSource?.startsWith('http') ?? false,
+      [splashSource]
+    );
+
+    const isImageSplash = useMemo(() => splashType === 'image', [splashType]);
+
+    const backgroundImageUrl = useMemo(
+      () =>
+        isImageSplash && backgroundImage.source?.startsWith('http')
+          ? backgroundImage.source
+          : undefined,
+      [isImageSplash, backgroundImage.source]
+    );
+
+    const { data } = useSplashCache({
+      logoUrl: isRemote ? splashSource : undefined,
+      backgroundUrl: backgroundImageUrl,
+    });
+
+    const resolvedSplashUri = useMemo(
+      () => (isRemote && data.logoPath ? data.logoPath : splashSource) || '',
+      [isRemote, data.logoPath, splashSource]
+    );
+
+    const displayTimeout = useMemo(() => {
+      if (typeof screenTime === 'number' && screenTime > 0) return screenTime;
+      if (isImageSplash || isStatic) return DEFAULT_IMAGE_TIMEOUT;
+      return 0;
+    }, [screenTime, isImageSplash, isStatic]);
+
+    const handleRedirect = useCallback(() => {
+      try {
+        onRedirect();
+      } catch (err) {
+        console.error('[SplashScreen] Redirect error:', err);
+      }
+    }, [onRedirect]);
+
+    useEffect(() => {
+      const timeoutSec = displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT;
+      const timer = setTimeout(handleRedirect, timeoutSec * 1000);
+      return () => clearTimeout(timer);
+    }, [displayTimeout, handleRedirect]);
+
+    const splashProps = useMemo(
+      () => ({
+        source: resolvedSplashUri,
+        width,
+        height,
+        fullscreen,
+        resizeMode: resizeMode as any,
+      }),
+      [resolvedSplashUri, width, height, fullscreen, resizeMode]
+    );
+
+    // Memoize file type checks
+    const isVideoFile = useMemo(
+      () =>
+        VIDEO_EXTENSIONS.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
+        ),
+      [resolvedSplashUri]
+    );
+
+    const isLottieFile = useMemo(
+      () =>
+        LOTTIE_EXTENSIONS.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
+        ),
+      [resolvedSplashUri]
+    );
+
+    // Memoize video onEnd handler
+    const videoOnEnd = useMemo(
+      () => (displayTimeout ? undefined : handleRedirect),
+      [displayTimeout, handleRedirect]
+    );
+
+    // Memoize lottie onAnimationFinish handler
+    const lottieOnAnimationFinish = useMemo(
+      () => (displayTimeout ? undefined : handleRedirect),
+      [displayTimeout, handleRedirect]
+    );
+
+    // Memoize BackgroundLayout props
+    const backgroundLayoutProps = useMemo(
+      () => ({
+        backgroundImage: isImageSplash ? backgroundImage.source : undefined,
+        backgroundColor: splashBgColor,
+        resizeMode: (backgroundImage.resizeMode ?? 'cover') as
+          | 'cover'
+          | 'contain'
+          | 'stretch'
+          | 'repeat',
+        innerContainerStyle,
+        onImageError: backgroundImage.onImageError,
+        theme: overrideTheme,
+        gradientSplitBackground: backgroundImage.gradientSplitBackground ?? 0.4,
+      }),
+      [
+        isImageSplash,
+        backgroundImage.source,
+        backgroundImage.resizeMode,
+        backgroundImage.onImageError,
+        backgroundImage.gradientSplitBackground,
+        splashBgColor,
+        innerContainerStyle,
+        overrideTheme,
+      ]
+    );
+
+    // Memoize AppStatusBar theme
+    const appStatusBarTheme = useMemo(
+      () => ({
+        ...overrideTheme,
+        dark: {
+          ...overrideTheme?.dark,
+          background: splashBgColor,
+        },
+        light: {
+          ...overrideTheme?.light,
+          background: splashBgColor,
+        },
+      }),
+      [overrideTheme, splashBgColor]
+    );
+
+    const renderSplashContent = useCallback(() => {
+      switch (splashType) {
+        case 'video':
+          return isVideoFile ? (
+            <SplashVideo {...splashProps} onEnd={videoOnEnd} />
+          ) : null;
+
+        case 'lottie-animation':
+          return isLottieFile ? (
+            <SplashLottie
+              {...splashProps}
+              onAnimationFinish={lottieOnAnimationFinish}
+            />
+          ) : null;
+
+        case 'image':
+        default:
+          return <SplashImage {...splashProps} />;
+      }
+    }, [
+      splashType,
+      isVideoFile,
+      splashProps,
+      videoOnEnd,
+      isLottieFile,
+      lottieOnAnimationFinish,
+    ]);
+
+    return (
+      <BackgroundLayout {...backgroundLayoutProps}>
+        <AppStatusBar theme={appStatusBarTheme} />
+        {renderSplashContent()}
+      </BackgroundLayout>
+    );
+  }
+);
+
+namespace SplashScreen {
+  export type Config = SplashScreenConfig;
+  export type Props = SplashScreenProps;
+}

package/src/components/Auth/{SplashScreen → Two/SplashScreen}/components/SplashImage/SplashImage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import FastImage from 'react-native-fast-image';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
-import Display from '../../../../../utils/Display';
+import Display from '../../../../../../utils/Display';
 
 type SplashImageProps = {
   source: string;

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

@@ -0,0 +1,77 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 12 Jun 2025 at 09:22 AM
+ */
+import React, { useMemo, useCallback } from 'react';
+import LottieView from 'lottie-react-native';
+import { StyleSheet } from 'react-native';
+import Display from '../../../../../../utils/Display';
+
+type ResizeMode = 'cover' | 'contain' | 'center';
+
+interface IProps {
+  source: string;
+  width: number;
+  height: number;
+  fullscreen: boolean;
+  resizeMode?: ResizeMode;
+  onAnimationFinish?: () => void;
+}
+
+const SplashLottie: React.FC<IProps> = ({
+  fullscreen,
+  height,
+  source,
+  resizeMode = 'contain',
+  width,
+  onAnimationFinish,
+}) => {
+  // Memoize the style object
+  const lottieStyle = useMemo(
+    () => ({
+      ...styles.base,
+      width: fullscreen ? Display.fullWidth : width,
+      height: fullscreen ? Display.fullHeight : height,
+      ...(fullscreen ? styles.fullscreen : {}),
+    }),
+    [fullscreen, width, height]
+  );
+
+  // Memoize Lottie source
+  const lottieSource = useMemo(() => ({ uri: source }), [source]);
+
+  // Memoize error handler
+  const handleAnimationFailure = useCallback((error: any) => {
+    console.error('Lottie animation failed to load:', error);
+  }, []);
+
+  // Early return if invalid source
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <LottieView
+      source={lottieSource}
+      autoPlay
+      loop={false}
+      onAnimationFinish={onAnimationFinish}
+      style={lottieStyle}
+      resizeMode={resizeMode}
+      onAnimationFailure={handleAnimationFailure}
+      hardwareAccelerationAndroid
+      cacheComposition
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: 'center',
+  },
+  fullscreen: {
+    flex: 1,
+  },
+});
+
+export default React.memo(SplashLottie);

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

@@ -0,0 +1,178 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 25 Oct 2025
+ */
+
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
+import { StyleSheet, Animated, useWindowDimensions } from 'react-native';
+import Video, {
+  type OnLoadData,
+  type OnVideoErrorData,
+} from 'react-native-video';
+import Display from '../../../../../../utils/Display';
+import { View } from '../../../../../View';
+
+interface IProps {
+  width?: number;
+  height?: number;
+  source: string;
+  fullscreen?: boolean;
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
+  onEnd?: () => void;
+  onLoadStart?: () => void;
+  onLoaded?: (data: OnLoadData) => void;
+  onError?: (error: string) => void;
+}
+
+const SplashVideo: React.FC<IProps> = ({
+  fullscreen = true,
+  width,
+  height,
+  source,
+  resizeMode = 'cover',
+  onEnd,
+  onLoadStart,
+  onLoaded,
+  onError,
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+
+  /** 🎨 Compute video dimensions – fullscreen uses 100% for all devices; otherwise use window dimensions */
+  const videoStyle = useMemo(() => {
+    if (fullscreen) {
+      return { width: '100%' as const, height: '100%' as const };
+    }
+    const w = width ?? windowWidth ?? Display.fullWidth;
+    const h = height ?? windowHeight ?? Display.fullHeight;
+    return { width: w, height: h };
+  }, [fullscreen, width, height, windowWidth, windowHeight]);
+
+  /** 🎨 Fullscreen wrapper fills container so video covers entire screen on any device */
+  const wrapperStyle = useMemo(
+    () =>
+      fullscreen
+        ? [StyleSheet.absoluteFillObject, { opacity: fadeAnim }]
+        : [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
+    [fullscreen, videoStyle, fadeAnim]
+  );
+
+  /** 🌀 Fade-in animation */
+  const animateIn = useCallback(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  /** 📦 Resolve video URI */
+  const resolveUri = useCallback((src: string): string => {
+    if (!src) return '';
+    if (/^(https?|file):\/\//.test(src)) return src;
+    return `file://${src}`;
+  }, []);
+
+  /** 🔄 Video lifecycle handlers */
+  const handleLoadStart = useCallback(() => {
+    fadeAnim.setValue(0);
+    onLoadStart?.();
+  }, [fadeAnim, onLoadStart]);
+
+  const handleLoad = useCallback(
+    (data: OnLoadData) => {
+      animateIn();
+      onLoaded?.(data);
+    },
+    [animateIn, onLoaded]
+  );
+
+  const handleError = useCallback(
+    (err: OnVideoErrorData | any) => {
+      const errorMsg =
+        err?.error?.message ||
+        err?.message ||
+        JSON.stringify(err) ||
+        'Unknown video error';
+      onError?.(errorMsg);
+    },
+    [onError]
+  );
+
+  /** 🧹 Cleanup animation */
+  useEffect(() => {
+    return () => fadeAnim.stopAnimation();
+  }, [fadeAnim]);
+
+  // Memoize resolved URI
+  const resolvedUri = useMemo(() => resolveUri(source), [source, resolveUri]);
+
+  // Memoize video source
+  const videoSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
+
+  // Memoize controls styles
+  const controlsStyles = useMemo(
+    () => ({
+      hideForward: true,
+      hideDuration: true,
+      hideFullscreen: true,
+      hidePlayPause: true,
+      hideNavigationBarOnFullScreenMode: true,
+      hideNotificationBarOnFullScreenMode: true,
+      hideNext: true,
+      hidePosition: true,
+      hidePrevious: true,
+      hideRewind: true,
+      hideSeekBar: true,
+      hideSettingButton: true,
+    }),
+    []
+  );
+
+  /** 🧱 Render */
+  if (!source || !resolvedUri) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Video Layer – fills container for fullscreen on all devices */}
+      <Animated.View style={wrapperStyle}>
+        <Video
+          source={videoSource}
+          style={styles.video}
+          resizeMode={resizeMode}
+          paused={false}
+          onLoadStart={handleLoadStart}
+          onLoad={handleLoad}
+          onError={handleError}
+          onEnd={onEnd}
+          controlsStyles={controlsStyles}
+          ignoreSilentSwitch="obey"
+          playInBackground={false}
+          playWhenInactive={false}
+          allowsExternalPlayback={false}
+          automaticallyWaitsToMinimizeStalling
+          controls={false}
+          repeat={false}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    alignSelf: 'stretch',
+  },
+  video: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default React.memo(SplashVideo);

package/src/components/Auth/Two/index.ts

@@ -0,0 +1,28 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 11:11 AM
+ */
+
+import AuthHeader from './AuthHeader/AuthHeader';
+import ForgotPassword from './ForgotPassword/ForgotPassword';
+import AuthLoginShell from './Login/AuthLoginShell';
+import LoginWithEmail from './Login/LoginWithEmail';
+import LoginWithPhone from './Login/LoginWithPhone';
+import OTP from './OTP/OTP';
+import QrLogin from './QrLogin/QrLogin';
+import SignUp from './SignUp/SignUp';
+import { SplashScreen } from './SplashScreen/SplashScreen';
+
+const AuthTwo = {
+  AuthHeader,
+  LoginWithEmail,
+  LoginWithPhone,
+  SignUp,
+  OTP,
+  ForgotPassword,
+  SplashScreen,
+  QrLogin,
+  AuthLoginShell,
+};
+
+export default AuthTwo;

package/src/components/Auth/index.ts

@@ -1,26 +1,11 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:11 AM
- */
-
+import AuthOne from './One';
+import AuthTwo from './Two';
 import AuthProvider from './AuthProvider/AuthProvider';
-import ForgotPassword from './ForgotPassword/ForgotPassword';
-import LoginWithEmail from './Login/LoginWithEmail';
-import LoginWithPhone from './Login/LoginWithPhone';
-import OTP from './OTP/OTP';
-import QrLogin from './QrLogin/QrLogin';
-import SignUp from './SignUp/SignUp';
-import { SplashScreen } from './SplashScreen/SplashScreen';
 
-const Auth = {
-  AuthProvider,
-  LoginWithEmail,
-  LoginWithPhone,
-  SignUp,
-  OTP,
-  ForgotPassword,
-  SplashScreen,
-  QrLogin,
+export const Auth = {
+  One: AuthOne,
+  Two: AuthTwo,
+  AuthProvider: AuthProvider,
 };
 
-export { Auth };
+export { AuthOne, AuthTwo, AuthProvider };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -10,6 +10,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import type { ThemeOverride } from '../../theme/themes';
 import { useSplashCache } from '../../hooks/useSplashCache';
 import { useInternalTheme } from '../../theme/hook';
+import { AppStatusBar } from '../common/AppStatusBar';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
@@ -114,6 +115,7 @@ const BackgroundLayoutComponent: React.FC<BackgroundLayoutProps> = (props) => {
   if (showBackground) {
     return (
       <View style={containerStyle}>
+        <AppStatusBar theme={themeOverride} transparent />
         <ImageBackground
           source={{ uri: resolvedImageUri }}
           resizeMode={resizeMode}

package/src/components/BackgroundLayout/BackgroundLayoutOne.tsx

@@ -0,0 +1,56 @@
+import React, { memo, useRef, useEffect } from 'react';
+import { View, StyleSheet, Animated, ImageBackground } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+const IMAGE_URL =
+  'https://res.cloudinary.com/dm4uaqlio/image/upload/v1704380994/869671_zohjp9.png';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const BackgroundLayoutOne: React.FC<IProps> = ({ children }) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <View style={styles.root}>
+      <ImageBackground
+        source={{ uri: IMAGE_URL }}
+        resizeMode="cover"
+        style={StyleSheet.absoluteFillObject}
+      />
+
+      <Animated.View
+        style={[StyleSheet.absoluteFillObject, { opacity: fadeAnim }]}
+      >
+        <LinearGradient
+          colors={['rgba(0,0,0,0.85)', 'rgba(0,0,0,0.6)', 'rgba(0,0,0,0.85)']}
+          style={StyleSheet.absoluteFillObject}
+        />
+
+        <View style={styles.content}>{children}</View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default memo(BackgroundLayoutOne);
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+  },
+});

package/src/components/BottomSheet/BottomSheet.tsx

@@ -91,20 +91,25 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     <Modal
       isVisible={visible}
       onBackdropPress={handleClosePress}
+      onBackButtonPress={handleClosePress}
       onSwipeComplete={handleClosePress}
       style={styles.modal}
       backdropOpacity={0.45}
-      // swipeDirection="down"
+      swipeDirection="down"
       animationIn="slideInUp"
       animationOut="slideOutDown"
       animationInTiming={260}
       animationOutTiming={220}
+      backdropTransitionInTiming={200}
+      backdropTransitionOutTiming={180}
       useNativeDriver
       useNativeDriverForBackdrop
       propagateSwipe
       avoidKeyboard
       statusBarTranslucent={false}
       hardwareAccelerated
+      hideModalContentWhileAnimating={false}
+      deviceHeight={SCREEN_HEIGHT}
     >
       <Animated.View
         style={[