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

package/src/components/Content/Card/Category/Category.tsx

@@ -9,7 +9,6 @@ import React, {
   useCallback,
   useMemo,
   useState,
-  useEffect,
 } from 'react';
 import {
   View,
@@ -51,13 +50,8 @@ const ITEM_WIDTH = scale(80);
 const CONTAINER_PADDING = scale(14);
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
-function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>(undefined);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 
 const CategoryCard = React.memo(
   ({
@@ -72,6 +66,19 @@ const CategoryCard = React.memo(
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
 
+    // Memoize theme colors
+    const themeColors = useMemo(
+      () => ({
+        primary: appliedTheme.colors.primary,
+        outline: appliedTheme.colors.outline,
+        buttonText: appliedTheme.colors.buttonText,
+        textPrimary: appliedTheme.colors.textPrimary,
+        skeletonBaseColor: appliedTheme.colors.skeletonBaseColor,
+        skeletonHighlightColor: appliedTheme.colors.skeletonHighlightColor,
+      }),
+      [appliedTheme.colors]
+    );
+
     const selectedCategory = useMemo(
       () => activeCategory || category?.[0] || null,
       [activeCategory, category]
@@ -79,6 +86,26 @@ const CategoryCard = React.memo(
 
     const prevCategoryId = usePrevious(selectedCategory?._id);
 
+    // Memoize skeleton items
+    const skeletonItems = useSkeletonItems(5);
+
+    // Memoize skeleton item style
+    const skeletonItemStyle = useMemo(
+      () => ({
+        width: ITEM_WIDTH - scale(20),
+        height: verticalScale(26),
+        borderRadius: scale(8),
+        marginRight: scale(8),
+      }),
+      []
+    );
+
+    // Memoize list container style with flexDirection
+    const listContainerStyle = useMemo(
+      () => [styles.listContainer, { flexDirection: 'row' as const }],
+      []
+    );
+
     const scrollToCategory = useCallback(
       (index: number, animated: boolean) => {
         if (!flatListRef.current || index < 0 || index >= category.length)
@@ -141,6 +168,34 @@ const CategoryCard = React.memo(
       [category, onPressCategory, scrollToCategory]
     );
 
+    // Memoize filled mode selected style
+    const filledSelectedStyle = useMemo(
+      () => ({
+        borderRadius: scale(8),
+        borderWidth: scale(1),
+        borderColor: themeColors.primary,
+        backgroundColor: themeColors.primary,
+      }),
+      [themeColors.primary]
+    );
+
+    // Memoize filled mode unselected style
+    const filledUnselectedStyle = useMemo(
+      () => ({
+        borderRadius: scale(8),
+        borderWidth: scale(1),
+        borderColor: themeColors.outline,
+        backgroundColor: 'transparent',
+      }),
+      [themeColors.outline]
+    );
+
+    // Memoize underline style
+    const underlineStyle = useMemo(
+      () => [styles.underline, { backgroundColor: themeColors.primary }],
+      [themeColors.primary]
+    );
+
     const renderItem = useCallback(
       ({ item, index }: ListRenderItemInfo<ICategory>) => {
         const isSelected = item._id === selectedCategory?._id;
@@ -148,25 +203,19 @@ const CategoryCard = React.memo(
 
         const containerStyle = [
           styles.tabContainer,
-          isFilledMode && {
-            borderRadius: scale(8),
-            borderWidth: scale(1),
-            borderColor: isSelected
-              ? appliedTheme.colors.primary
-              : appliedTheme.colors.outline,
-            backgroundColor: isSelected
-              ? appliedTheme.colors.primary
-              : 'transparent',
-          },
+          isFilledMode &&
+            (isSelected ? filledSelectedStyle : filledUnselectedStyle),
         ];
 
         const textColor = isFilledMode
           ? isSelected
-            ? appliedTheme.colors.buttonText
-            : appliedTheme.colors.textPrimary
+            ? themeColors.buttonText
+            : themeColors.textPrimary
           : isSelected
-            ? appliedTheme.colors.primary
-            : appliedTheme.colors.textPrimary;
+            ? themeColors.primary
+            : themeColors.textPrimary;
+
+        const textStyle = [styles.tabText, { color: textColor }];
 
         return (
           <TouchableOpacity
@@ -176,52 +225,37 @@ const CategoryCard = React.memo(
             onLayout={(event) => onItemLayout(event, index)}
             accessibilityLabel={`Select category ${item.name}`}
           >
-            <Text
-              style={[
-                styles.tabText,
-                {
-                  color: textColor,
-                },
-              ]}
-            >
-              {item.name}
-            </Text>
-            {mode === 'text' && isSelected && (
-              <View
-                style={[
-                  styles.underline,
-                  { backgroundColor: appliedTheme.colors.primary },
-                ]}
-              />
-            )}
+            <Text style={textStyle}>{item.name}</Text>
+            {mode === 'text' && isSelected && <View style={underlineStyle} />}
           </TouchableOpacity>
         );
       },
-      [selectedCategory, mode, appliedTheme, handlePress, onItemLayout]
+      [
+        selectedCategory,
+        mode,
+        themeColors,
+        handlePress,
+        onItemLayout,
+        filledSelectedStyle,
+        filledUnselectedStyle,
+        underlineStyle,
+      ]
     );
 
     const renderSkeleton = useCallback(
       () => (
         <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={themeColors.skeletonBaseColor}
+          highlightColor={themeColors.skeletonHighlightColor}
         >
-          <View style={[styles.listContainer, { flexDirection: 'row' }]}>
-            {[...Array(5)].map((_, index) => (
-              <View
-                key={index}
-                style={{
-                  width: ITEM_WIDTH - scale(20),
-                  height: verticalScale(26),
-                  borderRadius: scale(8),
-                  marginRight: scale(8),
-                }}
-              />
+          <View style={listContainerStyle}>
+            {skeletonItems.map((_, index) => (
+              <View key={index} style={skeletonItemStyle} />
             ))}
           </View>
         </SkeletonPlaceholder>
       ),
-      [appliedTheme]
+      [themeColors, listContainerStyle, skeletonItems, skeletonItemStyle]
     );
 
     const getItemLayout = useCallback(
@@ -235,6 +269,9 @@ const CategoryCard = React.memo(
       [itemWidths]
     );
 
+    // Memoize keyExtractor
+    const keyExtractor = useCallback((item: ICategory) => item._id, []);
+
     return (
       <View style={styles.container}>
         {isLoading ? (
@@ -243,7 +280,7 @@ const CategoryCard = React.memo(
           <FlatList
             ref={flatListRef}
             data={category}
-            keyExtractor={(item) => item._id}
+            keyExtractor={keyExtractor}
             horizontal
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.listContainer}
@@ -256,6 +293,7 @@ const CategoryCard = React.memo(
             initialNumToRender={10}
             maxToRenderPerBatch={12}
             windowSize={5}
+            removeClippedSubviews
           />
         )}
       </View>

package/src/components/Content/Card/Sliders/Styles/One.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useSkeletonItems } from '../../../../../hooks/useSkeletonItems';
 import {
   View,
   TouchableOpacity,
@@ -22,6 +23,7 @@ import type { ISectionContent } from '../../../../../types';
 import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { ThemeOverride } from '../../../../../theme/themes';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
@@ -48,19 +50,18 @@ type ImageTouchableProps = {
   onImagePress?: () => void;
 };
 
-const ImageTouchable: React.FC<ImageTouchableProps> = ({
-  children,
-  onImagePress,
-}) => (
-  <TouchableOpacity
-    activeOpacity={0.8}
-    style={styles.imageWrapper}
-    onPress={onImagePress}
-    accessibilityRole="button"
-    accessibilityLabel="View content"
-  >
-    {children}
-  </TouchableOpacity>
+const ImageTouchable = memo<ImageTouchableProps>(
+  ({ children, onImagePress }) => (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={styles.imageWrapper}
+      onPress={onImagePress}
+      accessibilityRole="button"
+      accessibilityLabel="View content"
+    >
+      {children}
+    </TouchableOpacity>
+  )
 );
 
 // Main component
@@ -86,6 +87,27 @@ const SliderOne: React.FC<SliderOneProps> = ({
 
   const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
 
+  // Memoize skeleton items
+  const skeletonItems = useSkeletonItems(skeletonCount);
+
+  // Memoize indicator array
+  const indicatorArray = useMemo(
+    () => Array.from({ length: contentData.length }, (_, i) => i),
+    [contentData.length]
+  );
+
+  // Memoize play icon style
+  const playIconStyle = useMemo(
+    () => [styles.playIcon, { backgroundColor: appliedTheme.colors.button }],
+    [appliedTheme.colors.button]
+  );
+
+  // Memoize play text style
+  const playTextStyle = useMemo(
+    () => [styles.playText, { color: appliedTheme.colors.white }],
+    [appliedTheme.colors.white]
+  );
+
   // Render carousel item
   const renderCarouselItem = useCallback(
     ({ item }: { item: IContentData }) => (
@@ -95,15 +117,14 @@ const SliderOne: React.FC<SliderOneProps> = ({
             theme={appliedTheme}
             content_offering_type={item.content_offering_type}
           />
-          <FastImage
-            source={{
-              uri: item.thumbnail,
-              priority: FastImage.priority.normal,
-              cache: FastImage.cacheControl.immutable,
-            }}
-            style={styles.sliderImage}
+          <ThumbnailCard
+            thumbnailUri={item.thumbnail}
+            theme={appliedTheme}
+            isLoading={false}
+            borderRadius={BORDER_RADIUS}
+            wrapperStyle={styles.imageWrapper}
+            imageStyle={styles.sliderImage}
             resizeMode={FastImage.resizeMode.cover}
-            accessibilityLabel={`Image of ${item.name || 'content'}`}
           />
           {showPlayIcon && (
             <LinearGradient
@@ -113,10 +134,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
               <View style={styles.playOverlay}>
                 <TouchableOpacity
                   onPress={() => onPressItem?.(item)}
-                  style={[
-                    styles.playIcon,
-                    { backgroundColor: appliedTheme.colors.button },
-                  ]}
+                  style={playIconStyle}
                   activeOpacity={0.8}
                   accessibilityRole="button"
                   accessibilityLabel="Play content"
@@ -128,10 +146,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
                   />
                 </TouchableOpacity>
                 <Text
-                  style={[
-                    styles.playText,
-                    { color: appliedTheme.colors.white },
-                  ]}
+                  style={playTextStyle}
                   numberOfLines={1}
                   accessibilityLabel={item.name}
                 >
@@ -143,7 +158,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
         </ImageTouchable>
       </View>
     ),
-    [appliedTheme, showPlayIcon, onPressItem]
+    [appliedTheme, showPlayIcon, onPressItem, playIconStyle, playTextStyle]
   );
 
   // Render skeleton item
@@ -209,16 +224,19 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ]
   );
 
-  // Common carousel props
-  const carouselProps = {
-    width: CAROUSEL_WIDTH,
-    height: CAROUSEL_HEIGHT,
-    autoPlay: !isLoading && contentData.length > 1,
-    loop: true,
-    scrollAnimationDuration: 1000,
-    autoPlayInterval: 2500,
-    style: styles.carousel,
-  };
+  // Common carousel props - memoized
+  const carouselProps = useMemo(
+    () => ({
+      width: CAROUSEL_WIDTH,
+      height: CAROUSEL_HEIGHT,
+      autoPlay: !isLoading && contentData.length > 1,
+      loop: true,
+      scrollAnimationDuration: 1000,
+      autoPlayInterval: 2500,
+      style: styles.carousel,
+    }),
+    [isLoading, contentData.length]
+  );
   if (!data) {
     return null;
   }
@@ -231,7 +249,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
       >
         <Carousel
           {...carouselProps}
-          data={Array.from({ length: skeletonCount })}
+          data={skeletonItems}
           renderItem={renderSkeletonItem}
           mode="parallax"
           modeConfig={{
@@ -244,10 +262,9 @@ const SliderOne: React.FC<SliderOneProps> = ({
         />
         <View style={styles.indicatorContainer}>
           <View style={styles.indicator}>
-            {Array.from(
-              { length: isLoading ? skeletonCount : contentData.length },
-              renderIndicator
-            )}
+            {isLoading
+              ? skeletonItems.map((_, i) => renderIndicator(0, i))
+              : indicatorArray.map((i) => renderIndicator(0, i))}
           </View>
         </View>
       </View>
@@ -279,7 +296,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
       {index === 0 && (
         <View style={styles.indicatorContainer}>
           <View style={styles.indicator}>
-            {Array.from({ length: contentData.length }, renderIndicator)}
+            {indicatorArray.map((i) => renderIndicator(0, i))}
           </View>
         </View>
       )}
@@ -312,7 +329,6 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 16 / 9,
     borderRadius: BORDER_RADIUS,
-    backgroundColor: '#444',
   },
   gradientOverlay: {
     ...StyleSheet.absoluteFillObject,

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -2,7 +2,9 @@
  * @author Naresh Dhamu
  * @LastModified Mon 30 Jun 2025 at 11:30 PM
  */
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState, useRef } from 'react';
+import { InteractionManager } from 'react-native';
+import { useSkeletonItems } from '../../../../../hooks/useSkeletonItems';
 import {
   View,
   TouchableOpacity,
@@ -27,6 +29,48 @@ import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
 
+// Memoized carousel item component for better performance
+type CarouselItemProps = {
+  item: IContentData;
+  onPressItem?: (item: IContentData) => void;
+  appliedTheme: any;
+  gradientConfig: {
+    colors: [string, string];
+    start: { x: number; y: number };
+    end: { x: number; y: number };
+  };
+};
+
+const CarouselItem = memo<CarouselItemProps>(
+  ({ item, onPressItem, appliedTheme, gradientConfig }) => (
+    <TouchableOpacity
+      activeOpacity={0.85}
+      onPress={() => onPressItem?.(item)}
+      style={styles.itemWrapper}
+      accessibilityRole="button"
+      accessibilityLabel={`View ${item.name}`}
+    >
+      <RentOrBuyIcon
+        theme={appliedTheme}
+        content_offering_type={item.content_offering_type}
+      />
+      <ThumbnailCard
+        thumbnailUri={item.thumbnail}
+        theme={appliedTheme}
+        isLoading={false}
+        wrapperStyle={styles.image}
+        resizeMode={FastImage.resizeMode.cover}
+      />
+      <LinearGradient
+        colors={gradientConfig.colors}
+        start={gradientConfig.start}
+        end={gradientConfig.end}
+        style={styles.gradientBottomOverlay}
+      />
+    </TouchableOpacity>
+  )
+);
+
 type SliderTwoProps = {
   data: ISectionContent | null;
   onPressItem?: (item: IContentData) => void;
@@ -51,7 +95,48 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
     () => [appliedTheme.colors.primary, appliedTheme.colors.primary],
     [appliedTheme.colors.primary]
   );
-  const handleSnapToItem = useCallback((i: number) => setActiveIndex(i), []);
+  // Debounce snap handler to prevent stuttering
+  const snapTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const handleSnapToItem = useCallback((i: number) => {
+    if (snapTimeoutRef.current) {
+      clearTimeout(snapTimeoutRef.current);
+    }
+    snapTimeoutRef.current = setTimeout(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setActiveIndex(i);
+      });
+    }, 50);
+  }, []);
+
+  // Memoize skeleton items
+  const skeletonItems = useSkeletonItems(skeletonCount);
+
+  // Memoize indicator array
+  const indicatorArray = useMemo(
+    () => Array.from({ length: contentData.length }, (_, i) => i),
+    [contentData.length]
+  );
+
+  // Memoize carousel data
+  const carouselData = useMemo(
+    () => (isLoading ? skeletonItems : contentData),
+    [isLoading, skeletonItems, contentData]
+  );
+
+  // Memoize gradient configuration
+  const gradientConfig = useMemo(
+    () => ({
+      colors: ['transparent', 'rgba(0,0,0,0.7)'] as [string, string],
+      start: { x: 0.5, y: 0 },
+      end: { x: 0.5, y: 1 },
+    }),
+    []
+  );
+
+  // Memoize pan gesture handler for smooth scrolling
+  const configurePanGesture = useCallback((gesture: any) => {
+    gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5]);
+  }, []);
 
   const renderSkeletonItem = useCallback(
     () => (
@@ -69,33 +154,44 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
 
   const renderCarouselItem = useCallback(
     ({ item }: { item: IContentData }) => (
-      <TouchableOpacity
-        activeOpacity={0.85}
-        onPress={() => onPressItem?.(item)}
-        style={styles.itemWrapper}
-        accessibilityRole="button"
-        accessibilityLabel={`View ${item.name}`}
-      >
-        <RentOrBuyIcon
-          theme={appliedTheme}
-          content_offering_type={item.content_offering_type}
-        />
-        <ThumbnailCard
-          thumbnailUri={item.thumbnail}
-          theme={appliedTheme}
-          isLoading={isLoading}
-          wrapperStyle={styles.image}
-          resizeMode={FastImage.resizeMode.cover}
-        />
-        <LinearGradient
-          colors={['transparent', 'rgba(0,0,0,0.7)']}
-          start={{ x: 0.5, y: 0 }}
-          end={{ x: 0.5, y: 1 }}
-          style={styles.gradientBottomOverlay}
-        />
-      </TouchableOpacity>
+      <CarouselItem
+        item={item}
+        onPressItem={onPressItem}
+        appliedTheme={appliedTheme}
+        gradientConfig={gradientConfig}
+      />
     ),
-    [appliedTheme, isLoading, onPressItem]
+    [appliedTheme, onPressItem, gradientConfig]
+  );
+
+  // Memoize renderItem to prevent switching functions
+  const renderItem = useMemo(
+    () => (isLoading ? renderSkeletonItem : renderCarouselItem),
+    [isLoading, renderSkeletonItem, renderCarouselItem]
+  );
+
+  // Memoize carousel props for smooth scrolling
+  const carouselProps = useMemo(
+    () => ({
+      width: FULL_WIDTH,
+      height: FULL_HEIGHT,
+      autoPlay: !isLoading && contentData.length > 1,
+      loop: !isLoading && contentData.length > 1,
+      scrollAnimationDuration: 300, // Reduced for smoother scrolling
+      autoPlayInterval: 3000,
+      windowSize: 2, // Reduced window size for better performance
+      enabled: true,
+    }),
+    [isLoading, contentData.length]
+  );
+
+  // Memoize inactive indicator style
+  const inactiveIndicatorStyle = useMemo(
+    () => [
+      styles.inactiveIndicator,
+      { backgroundColor: appliedTheme.colors.onSurface },
+    ],
+    [appliedTheme.colors.onSurface]
   );
 
   const renderIndicator = useCallback(
@@ -121,12 +217,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
             style={styles.activeIndicator}
           />
         ) : (
-          <View
-            style={[
-              styles.inactiveIndicator,
-              { backgroundColor: appliedTheme.colors.onSurface },
-            ]}
-          />
+          <View style={inactiveIndicatorStyle} />
         )}
       </View>
     ),
@@ -134,7 +225,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
       isLoading,
       appliedTheme.colors.skeletonBaseColor,
       appliedTheme.colors.skeletonHighlightColor,
-      appliedTheme.colors.onSurface,
+      inactiveIndicatorStyle,
       activeIndex,
       gradientColors,
     ]
@@ -155,26 +246,15 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
       accessibilityHint={accessibilityHint}
     >
       <Carousel
-        width={FULL_WIDTH}
-        height={FULL_HEIGHT}
-        autoPlay={!isLoading && contentData.length > 1}
-        loop={!isLoading && contentData.length > 1}
-        scrollAnimationDuration={1000}
-        autoPlayInterval={3000}
-        data={
-          isLoading
-            ? (Array.from({ length: skeletonCount }) as IContentData[])
-            : contentData
-        }
-        renderItem={isLoading ? renderSkeletonItem : renderCarouselItem}
+        {...carouselProps}
+        data={carouselData}
+        renderItem={renderItem}
         onSnapToItem={handleSnapToItem}
-        onConfigurePanGesture={(gesture: any) =>
-          gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5])
-        }
+        onConfigurePanGesture={configurePanGesture}
       />
       <View style={styles.indicatorContainer}>
         <View style={styles.indicator}>
-          {Array.from({ length: contentData.length }, renderIndicator)}
+          {indicatorArray.map((i) => renderIndicator(0, i))}
         </View>
       </View>
     </View>