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

package/src/components/Reels/utils/Controls/overlayUtils.ts

@@ -0,0 +1,35 @@
+import { useMemo, useCallback } from 'react';
+import { Dimensions } from 'react-native';
+import {
+  OVERLAY_RIGHT_OFFSET,
+  OVERLAY_BOTTOM_OFFSET,
+} from './videoControlsConstants';
+
+const { width } = Dimensions.get('window');
+
+/**
+ * Calculate overlay thresholds
+ */
+export const useOverlayThresholds = (videoHeight: number) => {
+  const rightThreshold = useMemo(() => width - OVERLAY_RIGHT_OFFSET, []);
+
+  const bottomThreshold = useMemo(
+    () => videoHeight - OVERLAY_BOTTOM_OFFSET,
+    [videoHeight]
+  );
+
+  return { rightThreshold, bottomThreshold };
+};
+
+/**
+ * Check if coordinates are in overlay area
+ */
+export const useIsInOverlay = (
+  rightThreshold: number,
+  bottomThreshold: number
+) => {
+  return useCallback(
+    (x: number, y: number) => x > rightThreshold || y > bottomThreshold,
+    [rightThreshold, bottomThreshold]
+  );
+};

package/src/components/Reels/utils/Controls/videoControlsConstants.ts

@@ -0,0 +1,25 @@
+/**
+ * Video Controls Constants
+ */
+
+export const GESTURE_MAX_DURATION = 300;
+export const PAUSE_ICON_TIMEOUT = 800;
+export const LIKE_ANIM_TIMEOUT = 1200;
+export const UNLOCK_MODAL_DELAY = 500;
+export const OVERLAY_RIGHT_OFFSET = 80;
+export const OVERLAY_BOTTOM_OFFSET = 150;
+
+export const videoControlsStyles = {
+  hideForward: true,
+  hideDuration: true,
+  hideFullscreen: true,
+  hidePlayPause: true,
+  hideNavigationBarOnFullScreenMode: true,
+  hideNotificationBarOnFullScreenMode: true,
+  hideNext: true,
+  hidePosition: true,
+  hidePrevious: true,
+  hideRewind: true,
+  hideSeekBar: true,
+  hideSettingButton: true,
+};

package/src/components/Reels/utils/Controls/videoRef.ts

@@ -0,0 +1,4 @@
+import { createRef } from 'react';
+import type { VideoRef } from 'react-native-video';
+
+export const videoRef = createRef<VideoRef>();

package/src/components/Reels/utils/index.ts

@@ -0,0 +1 @@
+export * from './timeoutUtils';

package/src/components/Reels/utils/timeoutUtils.ts

@@ -0,0 +1,29 @@
+import { type MutableRefObject } from 'react';
+
+/**
+ * Safely clears a timeout stored in a ref
+ * @param ref - React ref containing the timeout
+ */
+export const clearTimeoutSafely = (
+  ref: MutableRefObject<NodeJS.Timeout | null>
+): void => {
+  if (ref.current) {
+    clearTimeout(ref.current);
+    ref.current = null;
+  }
+};
+
+/**
+ * Safely sets a timeout and stores it in a ref, clearing any existing timeout first
+ * @param ref - React ref to store the timeout
+ * @param callback - Function to execute after delay
+ * @param delay - Delay in milliseconds
+ */
+export const setTimeoutSafely = (
+  ref: MutableRefObject<NodeJS.Timeout | null>,
+  callback: () => void,
+  delay: number
+): void => {
+  clearTimeoutSafely(ref);
+  ref.current = setTimeout(callback, delay);
+};

package/src/components/Search/One.tsx

@@ -22,6 +22,7 @@ import SearchCard, {
   type SearchCardSkeletonConfig,
 } from './components/SearchCard';
 import { useDebounce } from '../../hooks/useDebounce';
+import { useSkeletonItems } from '../../hooks/useSkeletonItems';
 import type { IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
 import type { ThemeOverride } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
@@ -118,10 +119,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
     [events]
   );
 
-  const skeletonItems = useMemo(
-    () => Array(skeletonCardCount).fill({}),
-    [skeletonCardCount]
-  );
+  const skeletonItems = useSkeletonItems(skeletonCardCount);
 
   const showRecent =
     !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;

package/src/components/Search/components/SearchCard.tsx

@@ -15,6 +15,8 @@ import type { ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { Text } from '../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
 
 /**
  * Configuration for SearchCard skeleton rendering.
@@ -64,6 +66,11 @@ const SearchCard: React.FC<SearchCardProps> = ({
   const { items = 5, textWidths = ['80%', '100%', '70%', '50%', '40%'] } =
     skeletonConfig ?? {};
 
+  const skeletonItems = useSkeletonItems(items);
+
+  // Memoize handlePress before any early returns
+  const handlePress = useSafePressHandler(onPress);
+
   const renderSkeleton = () => (
     <SkeletonPlaceholder
       backgroundColor={skeletonBaseColor}
@@ -86,7 +93,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
             },
           ]}
         >
-          {Array.from({ length: items }).map((_, lineIdx) => {
+          {skeletonItems.map((_, lineIdx) => {
             const rawWidth = textWidths[lineIdx] ?? '90%';
             const resolvedWidth =
               typeof rawWidth === 'string'
@@ -108,12 +115,19 @@ const SearchCard: React.FC<SearchCardProps> = ({
     </SkeletonPlaceholder>
   );
 
+  const pressableStyle = ({ pressed }: { pressed: boolean }) => [
+    styles.card,
+    {
+      opacity: pressed ? 0.9 : 1,
+    },
+  ];
+
   if (isLoading) return renderSkeleton();
 
   return (
     <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [styles.card, { opacity: pressed ? 0.9 : 1 }]}
+      onPress={handlePress}
+      style={pressableStyle}
       accessibilityRole="button"
       accessibilityLabel={title}
       disabled={!onPress}
@@ -124,7 +138,6 @@ const SearchCard: React.FC<SearchCardProps> = ({
           theme={appliedTheme}
           borderRadius={scale(8)}
           resizeMode={FastImage.resizeMode.cover}
-          wrapperStyle={styles.thumbnail}
           isLoading={false}
         />
       </View>
@@ -158,7 +171,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
   );
 };
 
-export default SearchCard;
+export default React.memo(SearchCard);
 
 const styles = StyleSheet.create({
   card: {
@@ -174,14 +187,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  thumbnail: {
-    width: '100%',
-    height: '100%',
-    borderRadius: scale(8),
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  },
+
   textContainer: {
     flex: 1,
     height: verticalScale(80),

package/src/components/Settings/AppSettings.tsx

@@ -5,6 +5,9 @@
 
 import React, {
   useState,
+  useMemo,
+  useCallback,
+  memo,
   isValidElement,
   cloneElement,
   type FC,
@@ -85,8 +88,19 @@ const isToggleMenuItem = (item: MenuItem): item is ToggleMenuItem => {
   return item.isToggle === true;
 };
 
+// ✅ Helper function - moved outside component to avoid recreation
+const renderIconWithColor = (
+  icon: React.ReactNode,
+  color: string
+): React.ReactNode => {
+  if (isValidElement(icon)) {
+    return cloneElement(icon as ReactElement<any>, { color });
+  }
+  return icon;
+};
+
 // ✅ Main Component
-export const AppSettings: FC<AppSettingsProps> = ({
+const AppSettingsComponent: FC<AppSettingsProps> = ({
   title,
   titleAlign = 'center',
   userInfo,
@@ -108,150 +122,230 @@ export const AppSettings: FC<AppSettingsProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const insets = useSafeAreaInsets();
+
+  // ✅ Memoize initial toggle states
+  const initialToggleStates = useMemo(
+    () =>
+      menuItems.reduce<Record<string, boolean>>((acc, item) => {
+        if (isToggleMenuItem(item)) {
+          acc[item.key] = item.toggleValue ?? false;
+        }
+        return acc;
+      }, {}),
+    [menuItems]
+  );
+
   // ✅ State for toggle values
-  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
-    menuItems.reduce<Record<string, boolean>>((acc, item) => {
-      if (isToggleMenuItem(item)) {
-        acc[item.key] = item.toggleValue ?? false;
-      }
-      return acc;
-    }, {})
+  const [toggleStates, setToggleStates] =
+    useState<Record<string, boolean>>(initialToggleStates);
+
+  // ✅ Memoize menu items map for quick lookup
+  const menuItemsMap = useMemo(
+    () =>
+      menuItems.reduce<Record<string, MenuItem>>((acc, item) => {
+        acc[item.key] = item;
+        return acc;
+      }, {}),
+    [menuItems]
   );
 
-  // ✅ Handle toggle change
-  const handleToggleChange = (key: string, value: boolean) => {
-    setToggleStates((prev) => ({ ...prev, [key]: value }));
-    const item = menuItems.find((i) => i.key === key) as
-      | ToggleMenuItem
-      | undefined;
-    item?.onToggleChange?.(value);
-  };
-  const renderIconWithColor = (
-    icon: React.ReactNode,
-    color: string
-  ): React.ReactNode => {
-    if (isValidElement(icon)) {
-      return cloneElement(icon as ReactElement<any>, { color });
-    }
-    return icon;
-  };
-  const renderToggleMenuItem = (item: ToggleMenuItem) => {
-    return (
-      <View
-        key={item.key}
-        style={[
-          styles.menuItem,
-          {
-            backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border,
-          },
-          menuItemStyle.container,
-        ]}
-      >
-        <View style={styles.menuItemContent}>
+  // ✅ Handle toggle change - memoized
+  const handleToggleChange = useCallback(
+    (key: string, value: boolean) => {
+      setToggleStates((prev) => ({ ...prev, [key]: value }));
+      const item = menuItemsMap[key] as ToggleMenuItem | undefined;
+      item?.onToggleChange?.(value);
+    },
+    [menuItemsMap]
+  );
+  // ✅ Memoize style objects
+  const menuItemBaseStyle = useMemo(
+    () => [
+      styles.menuItem,
+      {
+        backgroundColor: appliedTheme.colors.surfaceDisabled,
+        borderColor: appliedTheme.colors.border,
+      },
+      menuItemStyle.container,
+    ],
+    [
+      appliedTheme.colors.surfaceDisabled,
+      appliedTheme.colors.border,
+      menuItemStyle.container,
+    ]
+  );
+
+  const menuLabelStyle = useMemo(
+    () => [
+      styles.menuLabel,
+      { color: appliedTheme.colors.onBackground },
+      menuItemStyle.label,
+    ],
+    [appliedTheme.colors.onBackground, menuItemStyle.label]
+  );
+
+  const menuIconStyle = useMemo(
+    () => [styles.menuIcon, menuItemStyle.icon],
+    [menuItemStyle.icon]
+  );
+
+  const switchTrackColor = useMemo(
+    () => ({
+      false: appliedTheme.colors.switchTrackColorDisabled,
+      true: appliedTheme.colors.switchTrackColor,
+    }),
+    [
+      appliedTheme.colors.switchTrackColorDisabled,
+      appliedTheme.colors.switchTrackColor,
+    ]
+  );
+
+  const textPrimaryColor = useMemo(
+    () => appliedTheme.colors.textPrimary,
+    [appliedTheme.colors.textPrimary]
+  );
+
+  // ✅ Memoized render functions
+  const renderToggleMenuItem = useCallback(
+    (item: ToggleMenuItem) => {
+      const toggleValue = toggleStates[item.key] ?? false;
+      const thumbColor = toggleValue
+        ? appliedTheme.colors.switchThumbColor
+        : appliedTheme.colors.switchThumbColorDisabled;
+
+      return (
+        <View key={item.key} style={menuItemBaseStyle}>
+          <View style={styles.menuItemContent}>
+            {item.icon && (
+              <View style={menuIconStyle}>
+                {renderIconWithColor(item.icon, textPrimaryColor)}
+              </View>
+            )}
+            <Text numberOfLines={1} style={menuLabelStyle}>
+              {item.label}
+            </Text>
+          </View>
+          <Switch
+            trackColor={switchTrackColor}
+            thumbColor={thumbColor}
+            value={toggleValue}
+            onValueChange={(value) => handleToggleChange(item.key, value)}
+            style={styles.switchStyle}
+          />
+        </View>
+      );
+    },
+    [
+      toggleStates,
+      menuItemBaseStyle,
+      menuIconStyle,
+      menuLabelStyle,
+      textPrimaryColor,
+      switchTrackColor,
+      appliedTheme.colors.switchThumbColor,
+      appliedTheme.colors.switchThumbColorDisabled,
+      handleToggleChange,
+    ]
+  );
+
+  const handleMenuItemPress = useCallback(
+    (item: PressableMenuItem) => {
+      item.onPress?.();
+      onMenuItemPress?.(item);
+    },
+    [onMenuItemPress]
+  );
+
+  const renderPressableMenuItem = useCallback(
+    (item: PressableMenuItem) => {
+      return (
+        <TouchableOpacity
+          key={item.key}
+          activeOpacity={0.6}
+          onPress={() => handleMenuItemPress(item)}
+          style={menuItemBaseStyle}
+        >
           {item.icon && (
-            <View style={[styles.menuIcon, menuItemStyle.icon]}>
-              {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+            <View style={menuIconStyle}>
+              {renderIconWithColor(item.icon, textPrimaryColor)}
             </View>
           )}
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.menuLabel,
-              { color: appliedTheme.colors.onBackground },
-              menuItemStyle.label,
-            ]}
-          >
+          <Text numberOfLines={1} style={menuLabelStyle}>
             {item.label}
           </Text>
-        </View>
-        <Switch
-          trackColor={{
-            false: appliedTheme.colors.switchTrackColorDisabled,
-            true: appliedTheme.colors.switchTrackColor,
-          }}
-          thumbColor={
-            toggleStates[item.key]
-              ? appliedTheme.colors.switchThumbColor
-              : appliedTheme.colors.switchThumbColorDisabled
-          }
-          value={toggleStates[item.key]}
-          onValueChange={(value) => handleToggleChange(item.key, value)}
-          style={styles.switchStyle}
-        />
-      </View>
-    );
-  };
+        </TouchableOpacity>
+      );
+    },
+    [
+      menuItemBaseStyle,
+      menuIconStyle,
+      menuLabelStyle,
+      textPrimaryColor,
+      handleMenuItemPress,
+    ]
+  );
 
-  const renderPressableMenuItem = (item: PressableMenuItem) => {
-    return (
-      <TouchableOpacity
-        key={item.key}
-        activeOpacity={0.6}
-        onPress={() => {
-          item.onPress?.();
-          onMenuItemPress?.(item);
-        }}
-        style={[
-          styles.menuItem,
-          {
-            backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border,
-          },
-          menuItemStyle.container,
-        ]}
-      >
-        {item.icon && (
-          <View style={[styles.menuIcon, menuItemStyle.icon]}>
-            {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
-          </View>
-        )}
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.menuLabel,
-            { color: appliedTheme.colors.onBackground },
-            menuItemStyle.label,
-          ]}
-        >
-          {item.label}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
+  const renderMenuItemDefault = useCallback(
+    (item: MenuItem) => {
+      return isToggleMenuItem(item)
+        ? renderToggleMenuItem(item)
+        : renderPressableMenuItem(item);
+    },
+    [renderToggleMenuItem, renderPressableMenuItem]
+  );
+
+  // ✅ Memoize container style
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { backgroundColor: appliedTheme.colors.background },
+    ],
+    [appliedTheme.colors.background]
+  );
 
-  const renderMenuItemDefault = (item: MenuItem) => {
-    return isToggleMenuItem(item)
-      ? renderToggleMenuItem(item)
-      : renderPressableMenuItem(item);
-  };
+  // ✅ Memoize scroll content style
+  const scrollContentStyle = useMemo(
+    () => [
+      styles.scrollContent,
+      { paddingBottom: verticalScale(100) + insets.bottom },
+    ],
+    [insets.bottom]
+  );
+
+  // ✅ Memoize version text style
+  const versionTextStyle = useMemo(
+    () => [styles.versionText, { color: appliedTheme.colors.onSurface }],
+    [appliedTheme.colors.onSurface]
+  );
+
+  // ✅ Memoize header title
+  const headerTitle = useMemo(() => title || 'Settings', [title]);
+
+  // ✅ Memoize should show header
+  const shouldShowHeader = useMemo(
+    () => !!(renderHeader || title || onBackPress),
+    [renderHeader, title, onBackPress]
+  );
 
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: appliedTheme.colors.background },
-      ]}
-    >
-      {(renderHeader || title || onBackPress) &&
+    <View style={containerStyle}>
+      {shouldShowHeader &&
         (renderHeader ? (
           renderHeader()
         ) : (
           <AppHeader
             style={headerStyle}
-            title={title || 'Settings'}
+            title={headerTitle}
             titleAlign={titleAlign}
             onBackPress={onBackPress}
             theme={theme}
           />
         ))}
       <ScrollView
-        contentContainerStyle={[
-          styles.scrollContent,
-          { paddingBottom: verticalScale(100) + insets.bottom },
-        ]}
+        contentContainerStyle={scrollContentStyle}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        removeClippedSubviews={true}
       >
         {userInfo && (
           <UserSection
@@ -277,20 +371,15 @@ export const AppSettings: FC<AppSettingsProps> = ({
         </View>
         {renderFooter?.()}
         <View style={styles.versionContainer}>
-          <Text
-            style={[
-              styles.versionText,
-              { color: appliedTheme.colors.onSurface },
-            ]}
-          >
-            {versionText}
-          </Text>
+          <Text style={versionTextStyle}>{versionText}</Text>
         </View>
       </ScrollView>
     </View>
   );
 };
 
+export const AppSettings = memo(AppSettingsComponent);
+
 // ✅ Styles
 const styles = StyleSheet.create({
   container: { flex: 1 },