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

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

@@ -81,6 +81,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/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

@@ -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) {

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/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,7 +44,7 @@ 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 }) =>
@@ -105,7 +105,7 @@ export const ContentView = ({
                 });
               }
             }}
-            theme={appliedTheme}
+            theme={theme}
             mode={episodeCardMode ?? 'horizontal'}
           />
         )}
@@ -117,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);
 
@@ -208,6 +208,7 @@ const MoreContentList: React.FC<Props> = ({
             <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
           )
         }
+        theme={theme}
         {...headerProps}
       />
       {renderContent()}