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

package/src/hooks/useNavigationMode.ts

@@ -3,7 +3,7 @@
  * @lastModified Thu 06 Nov 2025 at 11:52 AM
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import NavigationMode from 'react-native-navigation-mode';
 
 /**
@@ -16,20 +16,31 @@ export const useNavigationMode = () => {
   const [isThreeButtonNav, setIsThreeButtonNav] = useState(false);
 
   useEffect(() => {
+    let mounted = true;
+
     (async () => {
       try {
         const navMode = (await NavigationMode.getNavigationMode()) as any;
         const isThreeButton =
           navMode?.navigationMode === 'THREE_BUTTON' ||
           navMode?.mode === 'THREE_BUTTON';
-        setIsThreeButtonNav(isThreeButton);
+        if (mounted) {
+          setIsThreeButtonNav(isThreeButton);
+        }
       } catch (err) {
         console.log('Navigation mode detect error:', err);
       }
     })();
+
+    return () => {
+      mounted = false;
+    };
   }, []);
 
-  return {
-    isGestureNav: !isThreeButtonNav,
-  };
+  return useMemo(
+    () => ({
+      isGestureNav: !isThreeButtonNav,
+    }),
+    [isThreeButtonNav]
+  );
 };

package/src/hooks/usePaginatedSection.ts

@@ -26,7 +26,7 @@ export function usePaginatedSection<T>(
     if (!isLoading && initialData.length) {
       setData(initialData);
     }
-  }, [isLoading, initialData]);
+  }, [isLoading, initialData.length, initialData]);
 
   const loadMoreData = useCallback(
     async (page: number | null) => {

package/src/hooks/usePrevious.ts

@@ -0,0 +1,28 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useRef } from 'react';
+
+/**
+ * Hook to get the previous value of a prop or state
+ * Optimized to avoid useEffect overhead
+ * @param value - The value to track
+ * @returns The previous value
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<{ value: T; previous: T | undefined }>({
+    value,
+    previous: undefined,
+  });
+
+  // Update ref synchronously during render
+  const current = ref.current;
+  if (current.value !== value) {
+    current.previous = current.value;
+    current.value = value;
+  }
+
+  return current.previous;
+}

package/src/hooks/useSafeCallback.ts

@@ -0,0 +1,43 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+
+/**
+ * Creates a safe callback that checks if the function exists before calling
+ * Prevents unnecessary re-renders by memoizing the callback
+ */
+export function useSafeCallback<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+  deps: React.DependencyList = []
+): T {
+  return useCallback(
+    (...args: Parameters<T>) => {
+      callback?.(...args);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [callback, ...deps]
+  ) as T;
+}
+
+/**
+ * Creates a safe press handler that checks disabled state
+ */
+export function useSafePressHandler(
+  onPress: ((event: GestureResponderEvent) => void) | undefined,
+  disabled: boolean = false,
+  deps: React.DependencyList = []
+) {
+  return useCallback(
+    (event: GestureResponderEvent) => {
+      if (!disabled && onPress) {
+        onPress(event);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disabled, onPress, ...deps]
+  );
+}

package/src/hooks/useSkeletonItems.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useMemo, useRef } from 'react';
+
+/**
+ * Hook to create skeleton items array
+ * Memoized to prevent unnecessary recreations
+ * Generator function is stored in ref to avoid dependency issues
+ */
+export function useSkeletonItems<T = any>(
+  count: number,
+  generator?: (index: number) => T
+): T[] {
+  const generatorRef = useRef(generator);
+  generatorRef.current = generator;
+
+  return useMemo(() => {
+    if (count <= 0) return [];
+    if (generatorRef.current) {
+      return Array.from({ length: count }, (_, i) => generatorRef.current!(i));
+    }
+    return Array.from({ length: count }, (_, i) => ({
+      _id: `skeleton-${i}`,
+      isSkeleton: true,
+    })) as T[];
+  }, [count]);
+}

package/src/hooks/useSplashCache.ts

@@ -150,7 +150,8 @@ export const useSplashCache = ({
     return () => {
       mounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setLogo, setBackground]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [logoUrl, backgroundUrl, forceDownload]);
 
   const logoPath = useSplashStore((s) => s.logo.localPath);
   const bgPath = useSplashStore((s) => s.backdrop.localPath);

package/src/hooks/useThemeColors.ts

@@ -0,0 +1,51 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useMemo } from 'react';
+import type { ITheme } from '../theme/themes';
+
+/**
+ * Hook to extract and memoize theme colors
+ * Reduces repeated color extraction patterns
+ */
+export function useThemeColors(theme: ITheme) {
+  const colors = theme.colors;
+  return useMemo(
+    () => ({
+      textPrimary: colors.textPrimary,
+      textSecondary: colors.textSecondary,
+      background: colors.background,
+      surface: colors.surface,
+      surfaceVariant: colors.surfaceVariant,
+      primary: colors.primary,
+      error: colors.error,
+      errorContainer: colors.errorContainer,
+      skeletonBaseColor: colors.skeletonBaseColor,
+      skeletonHighlightColor: colors.skeletonHighlightColor,
+      border: colors.border,
+      onBackground: colors.onBackground,
+      onPrimary: colors.onPrimary,
+      onSurface: colors.onSurface,
+      outline: colors.outline,
+    }),
+    [
+      colors.textPrimary,
+      colors.textSecondary,
+      colors.background,
+      colors.surface,
+      colors.surfaceVariant,
+      colors.primary,
+      colors.error,
+      colors.errorContainer,
+      colors.skeletonBaseColor,
+      colors.skeletonHighlightColor,
+      colors.border,
+      colors.onBackground,
+      colors.onPrimary,
+      colors.onSurface,
+      colors.outline,
+    ]
+  );
+}

package/src/theme/ThemeProvider.tsx

@@ -3,7 +3,12 @@
  * @lastModified Wed 22 Oct 2025 at 11:29 AM
  */
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
   SafeAreaProvider,
@@ -58,18 +63,29 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
     themeFull,
   } = useInternalTheme(overrideTheme, isDark);
 
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo(
+    () => ({
+      theme: themeFull,
+      isDarkMode,
+      setTheme,
+      finalTheme,
+    }),
+    [themeFull, isDarkMode, setTheme, finalTheme]
+  );
+
+  // Memoize container style
+  const containerStyle = useMemo(
+    () => ({ flex: 1, backgroundColor: finalTheme.colors.background }),
+    [finalTheme.colors.background]
+  );
+
   return (
     <GestureHandlerRootView style={styles.container}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <ThemeContext.Provider
-          value={{ theme: themeFull, isDarkMode, setTheme, finalTheme }}
-        >
+        <ThemeContext.Provider value={contextValue}>
           <AppStatusBar theme={overrideTheme} />
-          <View
-            style={{ flex: 1, backgroundColor: finalTheme.colors.background }}
-          >
-            {children}
-          </View>
+          <View style={containerStyle}>{children}</View>
         </ThemeContext.Provider>
       </SafeAreaProvider>
     </GestureHandlerRootView>

package/src/theme/hook/useInternalTheme.ts

@@ -1,10 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 /**
  * @author Naresh Dhamu
  * @lastModified Fri 24 Oct 2025 at 10:45 AM
  */
 
-import React from 'react';
+import { useMemo, useEffect } from 'react';
 import {
   DarkTheme,
   LightTheme,
@@ -28,13 +27,13 @@ export const useInternalTheme = (
 
   const isDarkMode = isDark ?? storeDarkMode;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isDark !== undefined) {
       setTheme(isDark ? 'dark' : 'light');
     }
   }, [isDark, setTheme]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (themeMode !== 'system') return;
     const subscription = Appearance.addChangeListener(({ colorScheme }) => {
       if (colorScheme === 'dark' || colorScheme === 'light') {
@@ -43,16 +42,22 @@ export const useInternalTheme = (
     });
 
     return () => subscription.remove();
-  }, []);
+  }, [themeMode, setIsDarkMode]);
 
-  const overrideColors = React.useMemo(
-    () => (isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {})),
-    [override, isDarkMode]
+  // Memoize base theme selection
+  const baseTheme = useMemo(
+    () => (isDarkMode ? DarkTheme : LightTheme),
+    [isDarkMode]
   );
 
-  const baseTheme = isDarkMode ? DarkTheme : LightTheme;
+  // Memoize override colors
+  const overrideColors = useMemo(
+    () => (isDarkMode ? (override?.dark ?? {}) : (override?.light ?? {})),
+    [override?.dark, override?.light, isDarkMode]
+  );
 
-  const finalTheme = React.useMemo<ITheme>(
+  // Memoize final theme with proper dependencies
+  const finalTheme = useMemo<ITheme>(
     () => ({
       ...baseTheme,
       colors: {
@@ -63,15 +68,16 @@ export const useInternalTheme = (
     [baseTheme, overrideColors]
   );
 
-  const themeFull = React.useMemo(
+  // Memoize themeFull with proper dependencies
+  const themeFull = useMemo(
     () => ({
       light: (override?.light as ITheme['colors']) ?? LightTheme.colors,
       dark: (override?.dark as ITheme['colors']) ?? DarkTheme.colors,
     }),
-    [override]
+    [override?.light, override?.dark]
   );
 
-  return React.useMemo(
+  return useMemo(
     () => ({
       theme: finalTheme,
       isDarkMode,

package/src/theme/hook/useThemeStatusBar.ts

@@ -5,7 +5,7 @@
 /**
  * Automatically syncs StatusBar color & style with current theme.
  */
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
 import Color from 'color';
 import type { ITheme } from '../themes';
@@ -21,13 +21,22 @@ export const useThemeStatusBar = ({
   backgroundColor,
   barStyle,
 }: UseThemeStatusBarOptions) => {
+  // Memoize background color
+  const bgColor = useMemo(
+    () => backgroundColor ?? theme.colors.background,
+    [backgroundColor, theme.colors.background]
+  );
+
+  // Memoize content style calculation
+  const contentStyle = useMemo<StatusBarStyle>(() => {
+    if (barStyle) return barStyle;
+    return Color(bgColor).isDark() ? 'light-content' : 'dark-content';
+  }, [barStyle, bgColor]);
+
   useEffect(() => {
-    const bgColor = backgroundColor ?? theme.colors.background;
-    const contentStyle: StatusBarStyle =
-      barStyle ?? (Color(bgColor).isDark() ? 'light-content' : 'dark-content');
     StatusBar.setBarStyle(contentStyle, true);
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor(bgColor, true);
     }
-  }, [theme, backgroundColor, barStyle]);
+  }, [bgColor, contentStyle]);
 };