@zezosoft/zezo-ott-react-native-ui-kit 1.0.4 → 1.0.6

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

@@ -1,29 +1,30 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import type {
-  ImageStyle as FastImageStyle,
-  ImageStyle,
-  ResizeMode,
+import FastImage, {
+  type ResizeMode,
+  type ImageStyle,
 } from 'react-native-fast-image';
-import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '../../../../types';
+import RentOrBuyIcon from './RentOrBuyIcon';
 
 export type CardPosterProps = {
+  content_offering_type?: IContentData['content_offering_type'];
   posterUri: string;
   theme: ITheme;
   isLoading?: boolean;
   borderRadius?: number;
   posterWrapperStyle?: StyleProp<ViewStyle>;
-  imageStyle?: FastImageStyle;
+  imageStyle?: ImageStyle;
   resizeMode?: ResizeMode;
 };
 
 const CardPoster: React.FC<CardPosterProps> = ({
+  content_offering_type,
   posterUri,
   theme,
   isLoading = false,
@@ -37,7 +38,6 @@ const CardPoster: React.FC<CardPosterProps> = ({
 
   const hasValidPoster = useMemo(() => {
     if (!posterUri || typeof posterUri !== 'string') return false;
-
     const cleaned = posterUri.trim();
     return (
       (cleaned.startsWith('http://') || cleaned.startsWith('https://')) &&
@@ -75,21 +75,22 @@ const CardPoster: React.FC<CardPosterProps> = ({
     <View
       style={[
         styles.posterWrapper,
-        styles.defaultPosterWrapper,
-        {
-          borderRadius,
-          backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow,
-        },
+        { borderRadius, backgroundColor: theme.colors.background },
         posterWrapperStyle,
       ]}
     >
+      {!showSkeleton && content_offering_type && (
+        <RentOrBuyIcon
+          theme={theme}
+          key={posterUri}
+          content_offering_type={content_offering_type}
+        />
+      )}
       {showSkeleton && (
         <View style={[styles.skeletonWrapper, { borderRadius }]}>
           <SkeletonPlaceholder
             backgroundColor={theme.colors.skeletonBaseColor}
             highlightColor={theme.colors.skeletonHighlightColor}
-            speed={1000}
           >
             <SkeletonPlaceholder.Item
               style={[styles.skeleton, { borderRadius }]}
@@ -97,7 +98,6 @@ const CardPoster: React.FC<CardPosterProps> = ({
           </SkeletonPlaceholder>
         </View>
       )}
-
       {hasValidPoster && (
         <FastImage
           source={{
@@ -112,24 +112,16 @@ const CardPoster: React.FC<CardPosterProps> = ({
           ]}
           resizeMode={resizeMode}
           onLoadStart={() => {
-            if (hasValidPoster) {
-              setImageLoading(true);
-              setImageError(false);
-            } else {
-              setImageLoading(false);
-              setImageError(true);
-            }
-          }}
-          onLoad={() => {
-            setImageLoading(false);
+            setImageLoading(true);
+            setImageError(false);
           }}
+          onLoad={() => setImageLoading(false)}
           onError={() => {
             setImageLoading(false);
             setImageError(true);
           }}
         />
       )}
-
       {!showSkeleton && (!hasValidPoster || imageError) && (
         <View
           style={[
@@ -144,9 +136,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
           <View
             style={[
               styles.fallback,
-              {
-                backgroundColor: theme.colors.errorContainer,
-              },
+              { backgroundColor: theme.colors.errorContainer },
             ]}
           >
             <ImageOff size={scale(18)} color={theme.colors.error} />
@@ -169,30 +159,16 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     position: 'relative',
   },
-  defaultPosterWrapper: {
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
-  },
   skeletonWrapper: {
     position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
     aspectRatio: 2 / 3,
-    overflow: 'hidden',
-  },
-  skeleton: {
-    width: '100%',
-    aspectRatio: 2 / 3,
-  },
-  visible: {
-    opacity: 1,
-  },
-  hidden: {
-    opacity: 0,
   },
+  skeleton: { width: '100%', aspectRatio: 2 / 3 },
+  visible: { opacity: 1 },
+  hidden: { opacity: 0 },
   fallbackWrapper: {
     position: 'absolute',
     top: 0,
@@ -212,8 +188,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  fallbackText: {
-    marginTop: scale(4),
-    fontSize: RFValue(9),
-  },
+  fallbackText: { marginTop: scale(4), fontSize: 10 },
 });

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

@@ -17,15 +17,15 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
-import { useTheme } from '../../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type NoContentFallbackProps = {
   message?: string;
   retryText?: string;
   onRetry?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   emoji?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -38,7 +38,7 @@ const NoContentFallback = ({
   emoji = '😔',
   style,
 }: NoContentFallbackProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const scaleValue = useSharedValue(1);
 
   const handlePressIn = useCallback(() => {

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

@@ -0,0 +1,109 @@
+import React 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';
+import type { IContentData } from '../../../../types';
+import type { ITheme } from '../../../../theme/themes';
+
+interface RentOrBuyIconProps {
+  theme?: ITheme;
+  content_offering_type: IContentData['content_offering_type'];
+  position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  style?: StyleProp<ViewStyle>;
+  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 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 RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
+  theme,
+  content_offering_type,
+  style,
+  position = 'topLeft',
+  size = 22,
+}) => {
+  if (!content_offering_type) return null;
+
+  const typeUpper = content_offering_type.toUpperCase();
+  if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
+
+  const fillColor = theme?.colors.premiumIcon || '#CA091E';
+
+  const positionStyle: ViewStyle = (() => {
+    switch (position) {
+      case 'topLeft':
+        return { top: 6, left: 6 };
+      case 'topRight':
+        return { top: 6, right: 6 };
+      case 'bottomLeft':
+        return { bottom: 6, left: 6 };
+      case 'bottomRight':
+        return { bottom: 6, right: 6 };
+      default:
+        return { top: 6, left: 6 };
+    }
+  })();
+
+  const IconComponent = typeUpper === 'PREMIUM' ? PremiumIcon : BuyOrRentIcon;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { width: size, height: size },
+        style || positionStyle,
+      ]}
+    >
+      <View style={styles.iconWrapper}>
+        <IconComponent fillColor={fillColor} />
+      </View>
+    </View>
+  );
+};
+
+export default RentOrBuyIcon;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+  iconWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    padding: scale(3),
+    borderRadius: 40,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    overflow: 'hidden',
+    elevation: 3,
+  },
+});

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

@@ -17,6 +17,7 @@ import { moderateScale, scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ChevronRight } from 'lucide-react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../../../theme/themes';
 export type ShowAllButtonProps = {
   text?: string;
   onPress?: (event: GestureResponderEvent) => void;
@@ -27,6 +28,7 @@ export type ShowAllButtonProps = {
   containerStyle?: StyleProp<ViewStyle>;
   iconPosition?: 'left' | 'right';
   IconComponent?: React.ReactNode;
+  theme?: ThemeOverride;
 };
 
 const ShowAllButton: React.FC<ShowAllButtonProps> = ({
@@ -39,6 +41,7 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
   IconComponent,
   textStyle,
   containerStyle,
+  theme: overrideTheme,
 }): React.ReactElement => {
   const icon = IconComponent ?? (
     <View style={styles.iconWrapper}>
@@ -54,7 +57,9 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
     >
       <View style={[styles.innerRow, { columnGap: moderateScale(gap) }]}>
         {iconPosition === 'left' && icon}
-        <Text style={[styles.text, textStyle]}>{text}</Text>
+        <Text style={[styles.text, textStyle]} theme={overrideTheme}>
+          {text}
+        </Text>
         {iconPosition === 'right' && icon}
       </View>
     </TouchableOpacity>

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

@@ -31,7 +31,7 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   thumbnailUri = '',
   theme,
   isLoading = false,
-  borderRadius = scale(6),
+  borderRadius = 0,
   wrapperStyle,
   imageStyle,
   resizeMode = FastImage.resizeMode.cover,
@@ -149,7 +149,6 @@ const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     aspectRatio: 16 / 9,
-    borderWidth: scale(1),
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/components/Content/Content.tsx

@@ -24,7 +24,7 @@ import { dummySections } from '../../constants/dummySections';
 import CategoryCard, { type ICategory } from './Card/Category/Category';
 import NoContentFallback from './Card/components/NoContentFallback';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 
 export interface ICustomComponentsForContent {
   type: string;
@@ -56,7 +56,7 @@ export interface IContentProps {
     | StyleProp<ViewStyle>
     | AnimatedStyle<StyleProp<ViewStyle>>;
   onEndReached?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   autoSwitchTheme?: boolean;
   events?: {
     onPressItem?: (item: IContentData) => void;

package/src/components/Content/Sections.tsx

@@ -8,7 +8,7 @@ import Cards from './Card';
 import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
 import type { ICategory } from './Card/Category/Category';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { IContentLoading } from './Content';
 
 export interface ICustomComponentsForSections {
@@ -25,7 +25,7 @@ export interface IProps {
   };
   name: string;
   customComponents?: ICustomComponentsForSections[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   index: number;
   section_id: string;
   events?: {

package/src/components/ContentView/ContentView.tsx

@@ -8,7 +8,7 @@ import { HeroBanner } from './components/HeroBanner';
 import { GenreTags } from './components/GenreTags';
 import { AboutSection } from './components/AboutSection';
 import { Title } from './components/Title';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { CastCard } from './components/CastCard';
 import Cards from '../Content/Card';
 import { scale } from 'react-native-size-matters';
@@ -31,7 +31,7 @@ export const ContentView = ({
   history,
   episodeCardMode,
 }: ComponentProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const seekTime = history?.currentTime || 0;
   const isComplete = history?.completed || false;
   const currentEpisode = history?.current_episode;
@@ -44,8 +44,9 @@ export const ContentView = ({
       <HeroBanner
         backgroundImage={content?.thumbnail}
         title={content?.name}
-        theme={appliedTheme}
+        theme={theme}
         isLoading={isLoading}
+        content_offering_type={content?.content_offering_type}
         onPressPlay={({ is_trailer }) =>
           events?.onPlay?.({
             id: content._id,
@@ -104,7 +105,7 @@ export const ContentView = ({
                 });
               }
             }}
-            theme={appliedTheme}
+            theme={theme}
             mode={episodeCardMode ?? 'horizontal'}
           />
         )}
@@ -116,7 +117,7 @@ export const ContentView = ({
           type={recommendedContent.type}
           data={recommendedContent.content}
           isLoading={isLoading}
-          theme={appliedTheme}
+          theme={theme}
           onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
           onPressMore={events?.onPressRecommendedMore}
           moreFetchData={events?.moreFetchDataRecommended}

package/src/components/ContentView/MoreContentList.tsx

@@ -19,8 +19,8 @@ import { View } from '../View';
 import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
 import { RFValue } from 'react-native-responsive-fontsize';
 import CardPoster from '../Content/Card/components/CardPoster';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook';
 import Animated from 'react-native-reanimated';
 import { Search } from 'lucide-react-native';
 
@@ -31,7 +31,7 @@ interface Props {
   isLoading?: boolean;
   error?: boolean | string | Error;
   errorText?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   moreDataIsLoading?: boolean;
   onEndReached?: () => void;
   skeletonCount?: number;
@@ -61,7 +61,7 @@ const MoreContentList: React.FC<Props> = ({
   refreshing = false,
   onRefresh,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const isEmpty = !isLoading && (!contentList || contentList.length === 0);
 
@@ -83,6 +83,7 @@ const MoreContentList: React.FC<Props> = ({
           activeOpacity={0.7}
         >
           <CardPoster
+            content_offering_type={item.content_offering_type}
             posterUri={item.poster}
             borderRadius={5}
             isLoading={false}
@@ -207,6 +208,7 @@ const MoreContentList: React.FC<Props> = ({
             <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
           )
         }
+        theme={theme}
         {...headerProps}
       />
       {renderContent()}

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -11,9 +11,11 @@ import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import Display from '../../../utils/Display';
 import type { IContentEpisodes, IContentSeasons } from '../../../types';
-import type { ITheme } from '../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -42,6 +44,7 @@ interface EpisodeCardItemProps {
   season_id: string;
   season_number: number;
   episode: IContentEpisodes;
+  isDarkMode: boolean;
   onPress: (e: IOnPressParams) => void;
   theme: ITheme;
   style?: React.ComponentProps<typeof TouchableOpacity>['style'];
@@ -52,7 +55,7 @@ interface EpisodeCardItemProps {
 interface EpisodeCardProps {
   seasons: IContentSeasons[];
   onPress: (e: IOnPressParams) => void;
-  theme: ITheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   mode?: 'horizontal' | 'vertical';
 }
@@ -73,6 +76,7 @@ const EpisodeCardItem = memo(
     season_number,
     episode,
     onPress,
+    isDarkMode,
     theme,
     style,
     thumbnailHeight,
@@ -108,15 +112,21 @@ const EpisodeCardItem = memo(
           flexDirection: isVerticalMode
             ? ('row' as const)
             : ('column' as const),
-          borderWidth: isVerticalMode ? 0 : theme.dark ? 0 : BORDER_WIDTH,
+          borderWidth: isVerticalMode ? 0 : isDarkMode ? 0 : BORDER_WIDTH,
           borderColor: isVerticalMode
             ? 'transparent'
-            : theme.dark
+            : isDarkMode
               ? 'transparent'
               : theme.colors.border,
         },
       ],
-      [style, isVerticalMode, theme]
+      [
+        style,
+        isVerticalMode,
+        theme.colors.surfaceVariant,
+        theme.colors.border,
+        isDarkMode,
+      ]
     );
 
     const windowWidth = Display.fullWidth;
@@ -200,19 +210,14 @@ const EpisodeCardItem = memo(
       >
         <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
           <View style={thumbnailStyle}>
-            <FastImage
-              source={{
-                uri: episode.thumbnail,
-                priority: FastImage.priority.high,
-              }}
-              style={styles.thumbnail}
-              resizeMode={FastImage.resizeMode.cover}
-              fallback
+            <RentOrBuyIcon
+              theme={theme}
+              content_offering_type={episode.content_offering_type}
             />
             <ThumbnailCard
               thumbnailUri={episode.thumbnail}
               theme={theme}
-              wrapperStyle={styles.thumbnail}
+              // wrapperStyle={styles.thumbnail}
               resizeMode={FastImage.resizeMode.cover}
             />
           </View>
@@ -259,10 +264,11 @@ const EpisodeCardItem = memo(
 export const EpisodeCard = ({
   seasons,
   onPress,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   mode = 'horizontal',
 }: EpisodeCardProps) => {
+  const { isDarkMode, theme } = useInternalTheme(themeOverride);
   const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
   const windowWidth = Display.fullWidth;
 
@@ -329,13 +335,14 @@ export const EpisodeCard = ({
           theme={theme}
           season_id={selectedSeason._id}
           episode={item}
+          isDarkMode={isDarkMode}
           season_number={selectedSeason.season_number}
           onPress={onPress}
           style={{ width: cardWidth }}
           thumbnailHeight={thumbnailHeight}
         />
       ) : null,
-    [theme, selectedSeason, onPress, cardWidth, thumbnailHeight]
+    [selectedSeason, theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   const renderLoadingItem = useCallback(
@@ -343,6 +350,7 @@ export const EpisodeCard = ({
       <EpisodeCardItem
         theme={theme}
         season_id=""
+        isDarkMode={isDarkMode}
         season_number={0}
         episode={{
           _id: '',
@@ -366,7 +374,7 @@ export const EpisodeCard = ({
         isLoading
       />
     ),
-    [theme, onPress, cardWidth, thumbnailHeight]
+    [theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   if (isLoading) {