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

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>

package/src/components/Content/Card/Styles/RotateInOut.tsx

@@ -24,6 +24,7 @@ import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 import type {
   IGetSectionData,
   ISectionContent,
@@ -149,13 +150,11 @@ const RotateCarousel: React.FC<Props> = ({
   );
 
   // Memoized skeleton items
-  const skeletonItems = useMemo(() => {
-    const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
-    return Array.from({ length: count }, (_, i) => ({
-      _id: `skeleton-${i}`,
-      isSkeleton: true,
-    }));
-  }, [isLoading, isPaginating, skeletonCount]);
+  const skeletonCountMemo = useMemo(
+    () => (isLoading ? skeletonCount : isPaginating ? 1 : 0),
+    [isLoading, isPaginating, skeletonCount]
+  );
+  const skeletonItems = useSkeletonItems(skeletonCountMemo);
 
   // Optimized finalData to avoid unnecessary spread
   const finalData = useMemo(
@@ -167,7 +166,6 @@ const RotateCarousel: React.FC<Props> = ({
           : data,
     [isLoading, data, skeletonItems]
   );
-
   // Debounced loadMoreData to prevent excessive calls
   const debouncedLoadMore = useMemo(
     () =>
@@ -297,7 +295,7 @@ const RotateCarousel: React.FC<Props> = ({
         data={finalData as any}
         vertical={false}
         renderItem={renderItem}
-        firstItem={1}
+        firstItem={2}
         inactiveSlideOpacity={0.6}
         inactiveSlideScale={0.9}
         sliderWidth={width}

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

@@ -3,7 +3,7 @@
  * @lastModified Sat 25 Oct 2025 at 04:01 PM
  */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
   type ResizeMode,
@@ -17,6 +17,9 @@ import type { ITheme } from '../../../../theme/themes';
 import RentOrBuyIcon from './RentOrBuyIcon';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
+// Module-level cache to track successfully loaded images
+const loadedImageCache = new Set<string>();
+
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
   posterUri: string;
@@ -50,19 +53,51 @@ const CardPoster: React.FC<CardPosterProps> = ({
     );
   }, [posterUri]);
 
+  // Reset image loading state when isLoading prop changes
   useEffect(() => {
-    if (hasValidPoster) {
+    if (isLoading) {
       setImageLoading(true);
       setImageError(false);
-      FastImage.preload([{ uri: posterUri }]);
+    }
+  }, [isLoading]);
+
+  useEffect(() => {
+    if (hasValidPoster) {
+      // Check if this image was already loaded successfully before
+      const isAlreadyLoaded = loadedImageCache.has(posterUri);
+
+      if (isAlreadyLoaded) {
+        // Image was loaded before, skip loading state
+        setImageLoading(false);
+        setImageError(false);
+      } else {
+        // Image not loaded before, show loading
+        setImageLoading(true);
+        setImageError(false);
+        FastImage.preload([{ uri: posterUri }]);
+      }
     } else {
       setImageLoading(false);
       setImageError(true);
     }
   }, [posterUri, hasValidPoster]);
 
-  const showSkeleton =
-    isLoading || (imageLoading && !imageError && hasValidPoster);
+  const showSkeleton = useMemo(
+    () => isLoading || (imageLoading && !imageError && hasValidPoster),
+    [isLoading, imageLoading, imageError, hasValidPoster]
+  );
+
+  // Memoize theme colors
+  const themeColors = useMemo(
+    () => ({
+      background: theme.colors.background,
+      skeletonBaseColor: theme.colors.skeletonBaseColor,
+      skeletonHighlightColor: theme.colors.skeletonHighlightColor,
+      error: theme.colors.error,
+      errorContainer: theme.colors.errorContainer,
+    }),
+    [theme.colors]
+  );
 
   const fallbackImageStyle: ImageStyle = useMemo(
     () => ({
@@ -76,14 +111,90 @@ const CardPoster: React.FC<CardPosterProps> = ({
     [borderRadius]
   );
 
+  // Memoize FastImage source
+  const imageSource = useMemo(
+    () => ({
+      uri: posterUri,
+      cache: FastImage.cacheControl.immutable,
+      priority: FastImage.priority.normal,
+    }),
+    [posterUri]
+  );
+
+  // Memoize callback handlers
+  const handleLoadStart = useCallback(() => {
+    // Only set loading if image is not already in cache
+    if (!loadedImageCache.has(posterUri)) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [posterUri]);
+
+  const handleLoad = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+    // Add to cache when successfully loaded
+    loadedImageCache.add(posterUri);
+  }, [posterUri]);
+
+  const handleError = useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
+
+  // Memoize wrapper style
+  const wrapperStyle = useMemo(
+    () => [
+      styles.posterWrapper,
+      { borderRadius, backgroundColor: themeColors.background },
+      posterWrapperStyle,
+    ],
+    [borderRadius, themeColors.background, posterWrapperStyle]
+  );
+
+  // Memoize skeleton wrapper style
+  const skeletonWrapperStyle = useMemo(
+    () => [styles.skeletonWrapper, { borderRadius }],
+    [borderRadius]
+  );
+
+  // Memoize skeleton item style
+  const skeletonItemStyle = useMemo(
+    () => [styles.skeleton, { borderRadius }],
+    [borderRadius]
+  );
+
+  // Memoize image style array
+  const imageStyleArray = useMemo(
+    () => [
+      fallbackImageStyle,
+      showSkeleton ? styles.hidden : styles.visible,
+      imageStyle,
+    ],
+    [fallbackImageStyle, showSkeleton, imageStyle]
+  );
+
+  // Memoize fallback wrapper style
+  const fallbackWrapperStyle = useMemo(
+    () => [
+      styles.fallbackWrapper,
+      {
+        borderRadius,
+        backgroundColor: themeColors.background,
+        borderColor: themeColors.error,
+      },
+    ],
+    [borderRadius, themeColors.background, themeColors.error]
+  );
+
+  // Memoize fallback inner style
+  const fallbackInnerStyle = useMemo(
+    () => [styles.fallback, { backgroundColor: themeColors.errorContainer }],
+    [themeColors.errorContainer]
+  );
+
   return (
-    <View
-      style={[
-        styles.posterWrapper,
-        { borderRadius, backgroundColor: theme.colors.background },
-        posterWrapperStyle,
-      ]}
-    >
+    <View style={wrapperStyle}>
       {!showSkeleton && content_offering_type && (
         <RentOrBuyIcon
           theme={theme}
@@ -92,60 +203,30 @@ const CardPoster: React.FC<CardPosterProps> = ({
         />
       )}
       {showSkeleton && (
-        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+        <View style={skeletonWrapperStyle}>
           <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
+            backgroundColor={themeColors.skeletonBaseColor}
+            highlightColor={themeColors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item
-              style={[styles.skeleton, { borderRadius }]}
-            />
+            <SkeletonPlaceholder.Item style={skeletonItemStyle} />
           </SkeletonPlaceholder>
         </View>
       )}
       {hasValidPoster && (
         <FastImage
-          source={{
-            uri: posterUri,
-            cache: FastImage.cacheControl.immutable,
-            priority: FastImage.priority.normal,
-          }}
-          style={[
-            fallbackImageStyle,
-            showSkeleton ? styles.hidden : styles.visible,
-            imageStyle,
-          ]}
+          source={imageSource}
+          style={imageStyleArray}
           resizeMode={resizeMode}
-          onLoadStart={() => {
-            setImageLoading(true);
-            setImageError(false);
-          }}
-          onLoad={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
+          onLoadStart={handleLoadStart}
+          onLoad={handleLoad}
+          onError={handleError}
         />
       )}
       {!showSkeleton && (!hasValidPoster || imageError) && (
-        <View
-          style={[
-            styles.fallbackWrapper,
-            {
-              borderRadius,
-              backgroundColor: theme.colors.background,
-              borderColor: theme.colors.error,
-            },
-          ]}
-        >
-          <View
-            style={[
-              styles.fallback,
-              { backgroundColor: theme.colors.errorContainer },
-            ]}
-          >
-            <ImageOff size={scale(18)} color={theme.colors.error} />
-            <Text style={styles.fallbackText} color={theme.colors.error}>
+        <View style={fallbackWrapperStyle}>
+          <View style={fallbackInnerStyle}>
+            <ImageOff size={scale(18)} color={themeColors.error} />
+            <Text style={styles.fallbackText} color={themeColors.error}>
               Image Failed
             </Text>
           </View>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { scale } from 'react-native-size-matters';
@@ -13,30 +13,34 @@ interface RentOrBuyIconProps {
   size?: number;
 }
 
-const PremiumIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
-    <Path
-      transform="translate(507,81)"
-      d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
-      fill={fillColor}
-    />
-    <Path
-      transform="translate(785,818)"
-      d="M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z"
-      fill={fillColor}
-    />
-  </Svg>
+const PremiumIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg viewBox="0 0 1024 1024" width="100%" height="100%">
+      <Path
+        transform="translate(507,81)"
+        d="M0 0l19 1 15 3 15 6 11 6 13 10 11 11 9 13 8 15 5 17 2 14v15l-3 17-5 15-7 14-9 12-9 10-15 11-16 8-10 4h-3l13 49 12 36 9 24 14 30 9 17 13 21 10 13 11 13 7 8 11 9 10 8 12 7 16 7 21 5h28l16-4 15-5 22-12 12-9 10-8 10-9 9-9 2-3h2l2-4 8-9 13-18 7-10 9-15 11-19 13-27 5-13-5-2-13-12-7-8-7-11-6-15-2-11v-22l5-19 8-15 11-13 10-9 14-8 15-5 14-2h10l14 2 15 5 12 7 11 9 9 10 8 13 5 12 3 7v37l-2 2-4 11-7 13-9 11-7 7-16 10-16 6-10 2-4 16-10 53-11 57-22 115-14 73-11 56-7 37-3 4h-719l-3-9-14-72-23-120-17-88-23-120-1-2-14-3-12-5-10-6-11-9-11-13-9-17-4-12v-35h2l2-9 8-16 4-6 9-10 10-9 15-8 17-5 19-1 15 2 15 5 15 9 13 12 10 14 5 11 4 13 1 6v18l-3 16-7 16-6 9-11 13-13 9 4 10 17 35 10 17 12 19 13 17 8 10 14 15 11 11 14 11 13 9 21 11 19 6 10 2h27l25-6 17-9 9-5 13-11 8-7 5-5 9-10 13-17 13-22 9-16 13-28 8-21 12-35 11-41 3-13-19-8-12-7-10-8-13-13-10-15-7-16-4-15-1-8v-18l3-18 6-16 8-15 9-11 7-8 13-10 12-7 16-6 15-3z"
+        fill={fillColor}
+      />
+      <Path
+        transform="translate(785,818)"
+        d="M0 0l64 1 15 4 13 8 9 8 9 13 5 13 2 15-2 16-5 12-6 10-9 10-11 7-12 5-10 2h-672l-15-4-12-7-10-9-9-13-5-13-2-11v-9l3-15 8-16 11-12 10-7 11-5 10-2z"
+        fill={fillColor}
+      />
+    </Svg>
+  )
 );
 
-const BuyOrRentIcon: React.FC<{ fillColor: string }> = ({ fillColor }) => (
-  <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
-    <Path
-      fill={fillColor}
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
-    />
-  </Svg>
+const BuyOrRentIcon: React.FC<{ fillColor: string }> = React.memo(
+  ({ fillColor }) => (
+    <Svg fill="none" viewBox="5 5 18 18" width="100%" height="100%">
+      <Path
+        fill={fillColor}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.834 9.835H11.2c0-.108-.002-.215-.003-.319-.014-1.424-.024-2.412 2.734-2.412 2.504 0 2.732.453 2.732 2.73l1.365.001c0-3.871-.91-4.099-4.097-4.099h-.21c-3.225-.002-3.709-.002-3.887 4.1zm-.153-.001H7.712a1.976 1.976 0 00-1.976 1.976v6.064a4.252 4.252 0 004.252 4.252h7.886a4.252 4.252 0 004.252-4.252V11.81a1.976 1.976 0 00-1.976-1.976H18.18a.153.153 0 00-.153.153v3.716a.683.683 0 01-1.365 0V9.987a.153.153 0 00-.153-.153h-5.158a.153.153 0 00-.152.153v3.716a.683.683 0 01-1.366 0V9.987a.153.153 0 00-.153-.153z"
+      />
+    </Svg>
+  )
 );
 
 const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
@@ -46,14 +50,22 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   position = 'topLeft',
   size = 22,
 }) => {
-  if (!content_offering_type) return null;
+  const typeUpper = useMemo(
+    () => content_offering_type?.toUpperCase(),
+    [content_offering_type]
+  );
 
-  const typeUpper = content_offering_type.toUpperCase();
-  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
+  const isValidType = useMemo(
+    () => typeUpper && ['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper),
+    [typeUpper]
+  );
 
-  const fillColor = theme?.colors.premiumIcon || '#CA091E';
+  const fillColor = useMemo(
+    () => theme?.colors.premiumIcon || '#CA091E',
+    [theme?.colors.premiumIcon]
+  );
 
-  const positionStyle: ViewStyle = (() => {
+  const positionStyle = useMemo<ViewStyle>(() => {
     switch (position) {
       case 'topLeft':
         return { top: 6, left: 6 };
@@ -66,18 +78,26 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
       default:
         return { top: 6, left: 6 };
     }
-  })();
+  }, [position]);
+
+  const IconComponent = useMemo(
+    () => (typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon),
+    [typeUpper]
+  );
+
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { width: size, height: size },
+      style || positionStyle,
+    ],
+    [size, style, positionStyle]
+  );
 
-  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+  if (!content_offering_type || !isValidType) return null;
 
   return (
-    <View
-      style={[
-        styles.container,
-        { width: size, height: size },
-        style || positionStyle,
-      ]}
-    >
+    <View style={containerStyle}>
       <View style={styles.iconWrapper}>
         <IconComponent fillColor={fillColor} />
       </View>
@@ -85,7 +105,7 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   );
 };
 
-export default RentOrBuyIcon;
+export default React.memo(RentOrBuyIcon);
 
 const styles = StyleSheet.create({
   container: {