@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.7

package/src/components/Button/PrimaryBtn.tsx

@@ -14,9 +14,9 @@ import {
   type TextStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Text } from '../Text';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type PrimaryBtnProps = {
@@ -27,7 +27,7 @@ type PrimaryBtnProps = {
   disabled?: boolean;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
@@ -40,7 +40,7 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   titleStyle,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const backgroundColor =
     disabled || loading
       ? appliedTheme.colors?.buttonDisabled

package/src/components/Button/SecondaryBtn.tsx

@@ -14,9 +14,9 @@ import {
   type TextStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Text } from '../Text';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type SecondaryBtnProps = {
@@ -27,7 +27,7 @@ type SecondaryBtnProps = {
   disabled?: boolean;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   leftIcon?: React.ReactNode;
 };
 
@@ -42,7 +42,7 @@ export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
   leftIcon,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const backgroundColor =
     disabled || loading

package/src/components/Button/TextButton.tsx

@@ -7,7 +7,7 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -37,7 +37,7 @@ const TextButton: React.FC<TextButtonProps> = ({
   align = 'center',
   leftIcon,
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useInternalTheme();
 
   const alignSelfMap: Record<
     'left' | 'center' | 'right',

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

@@ -22,10 +22,10 @@ import {
   type ListRenderItemInfo,
 } from 'react-native';
 import { Text } from '../../../Text';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ICategory = {
@@ -42,7 +42,7 @@ type CategoryCardProps = {
   category?: ICategory[];
   activeCategory?: ICategory;
   onPressCategory?: (category: ICategory) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   mode?: 'text' | 'filled';
   isLoading?: boolean;
 };
@@ -68,7 +68,7 @@ const CategoryCard = React.memo(
     mode = 'text',
     isLoading = false,
   }: CategoryCardProps) => {
-    const { theme: appliedTheme } = useTheme(theme);
+    const { theme: appliedTheme } = useInternalTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
 
@@ -162,7 +162,7 @@ const CategoryCard = React.memo(
 
         const textColor = isFilledMode
           ? isSelected
-            ? appliedTheme.colors.black
+            ? appliedTheme.colors.buttonText
             : appliedTheme.colors.textPrimary
           : isSelected
             ? appliedTheme.colors.primary

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

@@ -26,14 +26,14 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import type {
   IContentData,
   IGetSectionData,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../components/RentOrBuyIcon';
@@ -57,7 +57,7 @@ type Props = {
   historyData?: IHistoryItem[];
   type: IGetSectionData['type'];
   moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   onPressItem?: (item: IContentData) => void;
   onPressMore?: (params: {
     section_id: IGetSectionData['_id'];
@@ -150,6 +150,7 @@ const NowWatchingItem = memo(
               style={styles.poster}
             >
               <RentOrBuyIcon
+                theme={appliedTheme}
                 content_offering_type={item.content.content_offering_type}
               />
               <LinearGradient
@@ -212,7 +213,7 @@ const NowWatching: React.FC<Props> = ({
 }) => {
   const flatListRef = useRef<FlatList<IHistoryItem>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, borderRadius),
     [appliedTheme, itemWidth, borderRadius]
@@ -319,7 +320,7 @@ const NowWatching: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={styles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       {(isLoading || isLoadingHistory) && (

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

@@ -19,10 +19,10 @@ import { Play } from 'lucide-react-native';
 import { Text } from '../../../../Text';
 import Display from '../../../../../utils/Display';
 import type { IContentData, ISectionContent } from '../../../../../types';
-import type { AppTheme } from '../../../../../theme/themes';
-import { useTheme } from '../../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+import type { ThemeOverride } from '../../../../../theme/themes';
 
 // Constants
 const DEFAULT_SKELETON_COUNT = 3;
@@ -38,7 +38,7 @@ type SliderOneProps = {
   showPlayIcon?: boolean;
   isLoading?: boolean;
   skeletonCount?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 // ImageTouchable component
@@ -74,7 +74,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
   accessibilityLabel = 'Content carousel',
   accessibilityHint = 'Swipe to view content',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState<number>(0);
 
@@ -90,7 +90,10 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ({ item }: { item: IContentData }) => (
       <View style={styles.sliderContainer}>
         <ImageTouchable onImagePress={() => onPressItem?.(item)}>
-          <RentOrBuyIcon content_offering_type={item.content_offering_type} />
+          <RentOrBuyIcon
+            theme={appliedTheme}
+            content_offering_type={item.content_offering_type}
+          />
           <FastImage
             source={{
               uri: item.thumbnail,
@@ -139,7 +142,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
         </ImageTouchable>
       </View>
     ),
-    [onPressItem, showPlayIcon, appliedTheme.colors]
+    [appliedTheme, showPlayIcon, onPressItem]
   );
 
   // Render skeleton item

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

@@ -15,13 +15,13 @@ import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { Text } from '../../../../Text';
-import { useTheme } from '../../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import Display from '../../../../../utils/Display';
 import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { IContentData, ISectionContent } from '../../../../../types';
-import type { AppTheme } from '../../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
+import type { ThemeOverride } from '../../../../../theme/themes';
 
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
@@ -31,7 +31,7 @@ type SliderTwoProps = {
   onPressItem?: (item: IContentData) => void;
   isLoading?: boolean;
   skeletonCount?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const SliderTwo: React.FC<SliderTwoProps> = ({
@@ -43,7 +43,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
   accessibilityHint = 'Swipe to view content',
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState(0);
   const gradientColors = useMemo(
@@ -75,7 +75,10 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
         accessibilityRole="button"
         accessibilityLabel={`View ${item.name}`}
       >
-        <RentOrBuyIcon content_offering_type={item.content_offering_type} />
+        <RentOrBuyIcon
+          theme={appliedTheme}
+          content_offering_type={item.content_offering_type}
+        />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}

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

@@ -23,8 +23,8 @@ import FastImage from 'react-native-fast-image';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme/hook/useTheme';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import type {
   IContentData,
   IGetSectionData,
@@ -38,7 +38,7 @@ const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
 
 type MovieCardFiveProps = {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   title: string;
   section_id: string;
   type: IGetSectionData['type'];
@@ -83,7 +83,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
   accessibilityLabel,
   accessibilityHint,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const styles = useMemo(
@@ -220,7 +220,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

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

@@ -20,7 +20,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import NavigateToMore from '../components/NavigateToMore';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import FastImage from 'react-native-fast-image';
 import type {
@@ -29,7 +29,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // default values
@@ -62,7 +62,7 @@ type MovieCardFourProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCardFour: React.FC<MovieCardFourProps> = ({
@@ -88,7 +88,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
@@ -228,7 +228,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

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

@@ -18,7 +18,7 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
@@ -28,7 +28,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
@@ -61,7 +61,7 @@ type MovieCardProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCard: React.FC<MovieCardProps> = ({
@@ -87,7 +87,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
@@ -230,7 +230,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
           titleStyle,
         ]}
         containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}

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

@@ -19,7 +19,7 @@ import Carousel from 'react-native-snap-carousel';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { debounce } from 'lodash';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 
@@ -30,7 +30,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
@@ -80,7 +80,7 @@ type Props = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const RotateCarousel: React.FC<Props> = ({
@@ -102,7 +102,7 @@ const RotateCarousel: React.FC<Props> = ({
   isLoading = false,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const carouselRef = useRef<any>(null);
 
   // Memoized dynamic styles
@@ -289,7 +289,7 @@ const RotateCarousel: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       <Carousel

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

@@ -20,12 +20,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { ThumbnailCard } from '../components/ThumbnailCard';
 import { Text } from '../../../Text';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import type {
   IContentData,
   IGetSectionData,
@@ -39,7 +39,7 @@ const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
 
 type MovieCardSixProps = {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   title: string;
   section_id: string;
   type: IGetSectionData['type'];
@@ -81,7 +81,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const paginated = usePaginatedSection(
     section_id,
@@ -124,7 +124,10 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
         onPress={() => handleItemPress(item)}
         activeOpacity={0.8}
       >
-        <RentOrBuyIcon content_offering_type={item.content_offering_type} />
+        <RentOrBuyIcon
+          theme={appliedTheme}
+          content_offering_type={item.content_offering_type}
+        />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}
@@ -228,7 +231,7 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
               titleStyle,
             ]}
             containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
           <FlatList
             ref={flatListRef}

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

@@ -21,7 +21,7 @@ import { debounce } from 'lodash';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import type {
@@ -30,7 +30,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 const { width, height } = Dimensions.get('window');
@@ -80,7 +80,7 @@ type Props = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const MovieCardThree: React.FC<Props> = ({
@@ -102,7 +102,7 @@ const MovieCardThree: React.FC<Props> = ({
   isLoading = false,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const carouselRef = useRef<any>(null);
 
@@ -288,7 +288,7 @@ const MovieCardThree: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={staticStyles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       <Carousel

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

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
@@ -26,7 +26,7 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import { Text } from '../../../Text';
@@ -58,7 +58,7 @@ type TopTenCardProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const TopTenCard: React.FC<TopTenCardProps> = ({
@@ -83,7 +83,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
 }) => {
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
@@ -240,7 +240,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
         }
         titleStyle={[styles.title, titleStyle]}
         containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}

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

@@ -27,8 +27,8 @@ import type {
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import CardPoster from '../components/CardPoster';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -61,7 +61,7 @@ type MovieCardTwoProps = {
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 } & AccessibilityProps;
 
 const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
@@ -87,7 +87,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   const flatListRef = useRef<FlatList<IContentData>>(null);
 
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, borderRadius),
@@ -238,7 +238,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
           { color: appliedTheme.colors.textPrimary },
           titleStyle,
         ]}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
       <FlatList
         ref={flatListRef}

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

@@ -1,3 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 25 Oct 2025 at 04:01 PM
+ */
+
 import React, { useState, useEffect, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
@@ -81,6 +86,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
     >
       {!showSkeleton && content_offering_type && (
         <RentOrBuyIcon
+          theme={theme}
           key={posterUri}
           content_offering_type={content_offering_type}
         />

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

@@ -51,7 +51,7 @@ const RentOrBuyIcon: React.FC<RentOrBuyIconProps> = ({
   const typeUpper = content_offering_type.toUpperCase();
   if (!['PREMIUM', 'BUY_OR_RENT'].includes(typeUpper)) return null;
 
-  const fillColor = theme?.colors.primary || '#CA091E';
+  const fillColor = theme?.colors.premiumIcon || '#CA091E';
 
   const positionStyle: ViewStyle = (() => {
     switch (position) {