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

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

@@ -46,143 +46,198 @@ type SplashScreenProps = {
 const DEFAULT_IMAGE_TIMEOUT = 5;
 const FALLBACK_TIMEOUT = 0.5;
 
-export const SplashScreen: React.FC<SplashScreenProps> = ({
-  splashScreenConfig,
-  innerContainerStyle,
-  backgroundImage = {
-    gradientSplitBackground: 0.4,
-    resizeMode: 'cover',
-  },
-  onRedirect,
-  theme: overrideTheme,
-}) => {
-  const {
-    source: splashSource,
-    type: splashType = 'image',
-    width,
-    height,
-    isStatic = false,
-    screenTime,
-    fullscreen = false,
-    resizeMode = 'contain',
-    backgroundColor: splashBgColor,
-  } = splashScreenConfig;
-
-  const isRemote = splashSource.startsWith('http');
-  const isImageSplash = splashType === 'image';
-
-  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 : 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,
+// 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,
+  }) => {
+    const {
+      source: splashSource,
+      type: splashType = 'image',
       width,
       height,
-      fullscreen,
-      resizeMode: resizeMode as any,
-    }),
-    [resolvedSplashUri, width, height, fullscreen, resizeMode]
-  );
-
-  const renderSplashContent = useCallback(() => {
-    const videoExtensions = ['.mp4', '.mov', '.mkv', '.webm', '.avi', '.3gp'];
-    const LOTTIE_EXTENSIONS = ['.json', '.lottie'];
-    switch (splashType) {
-      case 'video':
-        const isVideoFile = videoExtensions.some((ext) =>
+      isStatic = false,
+      screenTime,
+      fullscreen = false,
+      resizeMode = 'contain',
+      backgroundColor: splashBgColor,
+    } = splashScreenConfig;
+
+    // Memoize computed values
+    const isRemote = useMemo(
+      () => splashSource.startsWith('http'),
+      [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)
-        );
-
-        return isVideoFile ? (
-          <SplashVideo
-            {...splashProps}
-            onEnd={displayTimeout ? undefined : handleRedirect}
-          />
-        ) : null;
+        ),
+      [resolvedSplashUri]
+    );
 
-      case 'lottie-animation': {
-        const isLottieFile = LOTTIE_EXTENSIONS.some((ext) =>
+    const isLottieFile = useMemo(
+      () =>
+        LOTTIE_EXTENSIONS.some((ext) =>
           resolvedSplashUri.toLowerCase().endsWith(ext)
-        );
-
-        return isLottieFile ? (
-          <SplashLottie
-            {...splashProps}
-            onAnimationFinish={displayTimeout ? undefined : handleRedirect}
-          />
-        ) : null;
+        ),
+      [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} />;
       }
-
-      case 'image':
-      default:
-        return <SplashImage {...splashProps} />;
-    }
-  }, [
-    splashType,
-    resolvedSplashUri,
-    splashProps,
-    displayTimeout,
-    handleRedirect,
-  ]);
-
-  return (
-    <BackgroundLayout
-      backgroundImage={isImageSplash ? backgroundImage.source : undefined}
-      backgroundColor={splashBgColor}
-      resizeMode={backgroundImage.resizeMode ?? 'cover'}
-      innerContainerStyle={innerContainerStyle}
-      onImageError={backgroundImage.onImageError}
-      theme={overrideTheme}
-      gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
-    >
-      <AppStatusBar
-        theme={{
-          ...overrideTheme,
-          dark: {
-            ...overrideTheme?.dark,
-            background: splashBgColor,
-          },
-          light: {
-            ...overrideTheme?.light,
-            background: splashBgColor,
-          },
-        }}
-      />
-      {renderSplashContent()}
-    </BackgroundLayout>
-  );
-};
+    }, [
+      splashType,
+      isVideoFile,
+      isLottieFile,
+      splashProps,
+      videoOnEnd,
+      lottieOnAnimationFinish,
+    ]);
+
+    return (
+      <BackgroundLayout {...backgroundLayoutProps}>
+        <AppStatusBar theme={appStatusBarTheme} />
+        {renderSplashContent()}
+      </BackgroundLayout>
+    );
+  }
+);
 
 namespace SplashScreen {
   export type Config = SplashScreenConfig;

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+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';
@@ -21,6 +21,13 @@ const SplashImage: React.FC<SplashImageProps> = ({
 }) => {
   const [isLoading, setIsLoading] = useState(!!source);
 
+  // Reset loading state when source changes
+  useEffect(() => {
+    if (source) {
+      setIsLoading(true);
+    }
+  }, [source]);
+
   const imageStyles = useMemo(
     () => ({
       width: fullscreen ? Display.fullWidth : width,
@@ -30,30 +37,40 @@ const SplashImage: React.FC<SplashImageProps> = ({
     [fullscreen, width, height]
   );
 
-  const handleLoadEnd = useMemo(
-    () => (source ? () => setIsLoading(false) : undefined),
-    [source]
-  );
-  const resolveUri = (src?: string): string => {
-    if (!src) return '';
+  const handleLoadEnd = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  // Memoize URI resolution
+  const resolvedUri = useMemo(() => {
+    if (!source) return '';
     if (
-      src.startsWith('http') ||
-      src.startsWith('https') ||
-      src.startsWith('file://')
+      source.startsWith('http') ||
+      source.startsWith('https') ||
+      source.startsWith('file://')
     )
-      return src;
-    return `file://${src}`;
-  };
+      return source;
+    return `file://${source}`;
+  }, [source]);
+
+  // Memoize image source
+  const imageSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
+
+  if (!source) return null;
 
   return (
     <View style={styles.container}>
       {isLoading && <ActivityIndicator size="large" style={styles.loader} />}
       <FastImage
-        source={{ uri: resolveUri(source) }}
+        source={imageSource}
         onLoadEnd={handleLoadEnd}
         style={imageStyles}
         resizeMode={resizeMode}
-        onError={() => setIsLoading(false)}
+        onError={handleError}
       />
     </View>
   );

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Thu 12 Jun 2025 at 09:22 AM
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import LottieView from 'lottie-react-native';
 import { StyleSheet } from 'react-native';
 import Display from '../../../../../utils/Display';
@@ -37,6 +37,14 @@ const SplashLottie: React.FC<IProps> = ({
     [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;
@@ -44,15 +52,13 @@ const SplashLottie: React.FC<IProps> = ({
 
   return (
     <LottieView
-      source={{ uri: source }}
+      source={lottieSource}
       autoPlay
       loop={false}
       onAnimationFinish={onAnimationFinish}
       style={lottieStyle}
       resizeMode={resizeMode}
-      onAnimationFailure={(error) => {
-        console.error('Lottie animation failed to load:', error);
-      }}
+      onAnimationFailure={handleAnimationFailure}
       hardwareAccelerationAndroid
       cacheComposition
     />

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

@@ -93,15 +93,44 @@ const SplashVideo: React.FC<IProps> = ({
     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,
+    }),
+    []
+  );
+
+  // Memoize animated view style
+  const animatedViewStyle = useMemo(
+    () => [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
+    [videoStyle, fadeAnim]
+  );
+
   /** 🧱 Render */
   return (
     <View style={styles.container}>
       {/* Video Layer */}
-      <Animated.View
-        style={[videoStyle, { opacity: fadeAnim, position: 'absolute' }]}
-      >
+      <Animated.View style={animatedViewStyle}>
         <Video
-          source={{ uri: resolveUri(source) }}
+          source={videoSource}
           style={videoStyle}
           resizeMode={resizeMode}
           paused={false}
@@ -109,20 +138,7 @@ const SplashVideo: React.FC<IProps> = ({
           onLoad={handleLoad}
           onError={handleError}
           onEnd={onEnd}
-          controlsStyles={{
-            hideForward: true,
-            hideDuration: true,
-            hideFullscreen: true,
-            hidePlayPause: true,
-            hideNavigationBarOnFullScreenMode: true,
-            hideNotificationBarOnFullScreenMode: true,
-            hideNext: true,
-            hidePosition: true,
-            hidePrevious: true,
-            hideRewind: true,
-            hideSeekBar: true,
-            hideSettingButton: true,
-          }}
+          controlsStyles={controlsStyles}
           ignoreSilentSwitch="obey"
           playInBackground={false}
           playWhenInactive={false}

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, memo } from 'react';
 import {
   View,
   StyleSheet,
@@ -22,7 +22,7 @@ interface BackgroundLayoutProps {
   onImageError?: (error: Error) => void;
 }
 
-export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
+const BackgroundLayoutComponent: React.FC<BackgroundLayoutProps> = (props) => {
   const {
     children,
     backgroundImage: backgroundImageUri,
@@ -49,14 +49,16 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     return isRemoteUrl ? rawPath : `file://${rawPath}`;
   }, [backgroundImageUri, localPathBackground]);
 
-  const containerStyle = useMemo(
-    () => [
-      styles.container,
-      { backgroundColor: bgColor ?? theme.colors.background },
-    ],
+  const backgroundColor = useMemo(
+    () => bgColor ?? theme.colors.background,
     [bgColor, theme.colors.background]
   );
 
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor }],
+    [backgroundColor]
+  );
+
   const handleImageLoadError = useCallback(
     (e: any) => {
       console.warn(
@@ -88,20 +90,26 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     return locations;
   }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
 
-  const renderChildren = (
-    <View
-      style={[
-        styles.innerContainer,
-        innerContainerStyle,
-        bgColor ? { backgroundColor: bgColor } : null,
-      ]}
-    >
-      {children}
-    </View>
+  const imageContainerStyle = useMemo(
+    () => [styles.imageContainer, { backgroundColor: theme.colors.background }],
+    [theme.colors.background]
+  );
+
+  const imageStyle = useMemo(
+    () => [styles.imageStyle, { backgroundColor: theme.colors.background }],
+    [theme.colors.background]
+  );
+
+  const innerContainerStyleMemo = useMemo(
+    () => [
+      styles.innerContainer,
+      innerContainerStyle,
+      bgColor ? { backgroundColor: bgColor } : null,
+    ],
+    [innerContainerStyle, bgColor]
   );
 
   const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
-  const showGradient = showBackground;
 
   if (showBackground) {
     return (
@@ -109,34 +117,32 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
         <ImageBackground
           source={{ uri: resolvedImageUri }}
           resizeMode={resizeMode}
-          style={[
-            styles.imageContainer,
-            { backgroundColor: theme.colors.background },
-          ]}
-          imageStyle={[
-            styles.imageStyle,
-            { backgroundColor: theme.colors.background },
-          ]}
+          style={imageContainerStyle}
+          imageStyle={imageStyle}
           onError={handleImageLoadError}
         >
-          {showGradient && (
-            <LinearGradient
-              colors={theme.colors.backgroundLayoutGradient}
-              locations={gradientLocations}
-              start={{ x: 0.5, y: 0 }}
-              end={{ x: 0.5, y: 1 }}
-              style={styles.gradientOverlay}
-            />
-          )}
-          {renderChildren}
+          <LinearGradient
+            colors={theme.colors.backgroundLayoutGradient}
+            locations={gradientLocations}
+            start={{ x: 0.5, y: 0 }}
+            end={{ x: 0.5, y: 1 }}
+            style={styles.gradientOverlay}
+          />
+          <View style={innerContainerStyleMemo}>{children}</View>
         </ImageBackground>
       </View>
     );
   }
 
-  return <View style={containerStyle}>{renderChildren}</View>;
+  return (
+    <View style={containerStyle}>
+      <View style={innerContainerStyleMemo}>{children}</View>
+    </View>
+  );
 };
 
+export const BackgroundLayout = memo(BackgroundLayoutComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,