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

package/src/components/Auth/QrLogin/QrLogin.tsx

@@ -9,14 +9,13 @@ import {
   Dimensions,
   TouchableOpacity,
   ActivityIndicator,
-  StatusBar,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { Text } from '../../Text';
 import AppHeader from '../../Headers/AppHeader';
-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 { Camera as CameraIcon, QrCode } from 'lucide-react-native';
 import {
   Camera,
@@ -26,6 +25,7 @@ import {
   type Code as BaseCode,
 } from 'react-native-vision-camera';
 import QrViewArea from './components/QrViewArea';
+import { AppStatusBar } from '../../common/AppStatusBar';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 const HEADER_HEIGHT = 25;
@@ -43,7 +43,7 @@ export type QrLoginProps = {
   scanButtonText?: string;
   onBackPress?: () => void;
   onScanSuccess?: (value: string) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   cameraType?: 'back' | 'front';
   layout?: 'one' | 'two';
 };
@@ -65,7 +65,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
   cameraType = DEFAULTS.cameraType,
   layout = 'one',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const [scanActive, setScanActive] = useState(false);
@@ -144,17 +144,13 @@ export const QrLogin: React.FC<QrLoginProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
-      />
+      <AppStatusBar theme={theme} />
 
       <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
         <AppHeader
           title={title}
           onBackPress={onBackPress}
-          theme={appliedTheme}
+          theme={theme}
           titleAlign="left"
         />
       </View>
@@ -170,7 +166,7 @@ export const QrLogin: React.FC<QrLoginProps> = ({
                 codeScanner={codeScanner}
               />
               <QrViewArea
-                theme={appliedTheme}
+                theme={theme}
                 layout={layout}
                 headerHeight={HEADER_HEIGHT}
               />

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import Svg, { Rect } from 'react-native-svg';
-import type { AppTheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
@@ -22,7 +22,7 @@ type QrViewAreaProps = {
   scanBoxWidth?: number;
   layout?: 'one' | 'two';
   headerHeight?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const QrViewArea: React.FC<QrViewAreaProps> = ({
@@ -31,7 +31,7 @@ const QrViewArea: React.FC<QrViewAreaProps> = ({
   headerHeight = 60,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const anim = useRef(new Animated.Value(0)).current;

package/src/components/Auth/SignUp/SignUp.tsx

@@ -18,12 +18,12 @@ import { Button } from '../../Button';
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { Logo } from '../../Logo/Logo';
 import TextButton from '../../Button/TextButton';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { useKeyboard } from '../../../hooks/useKeyboard';
 import HideKeyboard from '../../Keyboard/HideKeyboard';
 import BackBtn from '../../Button/BackBtn';
 import { Text } from '../../Text';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type FormValues = {
@@ -52,7 +52,7 @@ export interface SignupProps {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   logoUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loadingSubmitBtn?: boolean;
   text?: {
     usernameLabel?: string;
@@ -120,7 +120,7 @@ const Signup: React.FC<SignupProps> = ({
     },
     mode: 'onChange',
   });
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
   const { isKeyboardOpen } = useKeyboard();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -144,7 +144,7 @@ const Signup: React.FC<SignupProps> = ({
 
   return (
     <BackgroundLayout
-      theme={resolvedTheme}
+      theme={overrideTheme}
       backgroundImage={backgroundImage?.source}
       gradientSplitBackground={
         isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
@@ -160,7 +160,7 @@ const Signup: React.FC<SignupProps> = ({
               })
             ) : (
               <BackBtn
-                theme={resolvedTheme}
+                theme={overrideTheme}
                 style={topBackBtnStyle}
                 onPress={onTopBackBtnPress}
               />
@@ -205,7 +205,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.username?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -236,7 +236,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.email?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="emailAddress"
                     autoCapitalize="none"
                     keyboardType="email-address"
@@ -277,7 +277,7 @@ const Signup: React.FC<SignupProps> = ({
                     spellCheck={false}
                     autoCorrect={false}
                     autoComplete="off"
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                   />
                 )}
               />
@@ -312,7 +312,7 @@ const Signup: React.FC<SignupProps> = ({
                     errorMessage={errors.confirmPassword?.message}
                     inputStyle={inputStyle}
                     containerStyle={inputContainerStyle}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     textContentType="none"
                     autoCapitalize="none"
                     spellCheck={false}
@@ -334,7 +334,7 @@ const Signup: React.FC<SignupProps> = ({
                   <Button.Primary
                     title={text?.signupButton || 'Sign up'}
                     disabled={!isValid}
-                    theme={resolvedTheme}
+                    theme={overrideTheme}
                     loading={loadingSubmitBtn || isLoading}
                     loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
                     onPress={handleSubmit(handleFormSubmit)}

package/src/components/Auth/SplashScreen/SplashScreen.tsx

@@ -4,18 +4,16 @@
  */
 
 import React, { useEffect, useMemo, useCallback } from 'react';
-import { StatusBar, type ViewStyle } from 'react-native';
-import Color from 'color';
-
+import { type ViewStyle } from 'react-native';
 import SplashImage from './components/SplashImage/SplashImage';
 import SplashVideo from './components/SplashVideo/SplashVideo';
 import SplashLottie from './components/SplashLottie/SplashLottie';
 
-import { useTheme } from '../../../theme';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
 import { useSplashCache } from '../../../hooks/useSplashCache';
+import { AppStatusBar } from '../../common/AppStatusBar';
 
 type SplashType = 'image' | 'video' | 'lottie-animation';
 
@@ -36,7 +34,7 @@ type SplashScreenProps = {
   splashScreenConfig: SplashScreenConfig;
   innerContainerStyle?: ViewStyle;
   onRedirect: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   backgroundImage?: {
     source?: string | null;
     onImageError?: (error: Error) => void;
@@ -70,7 +68,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     backgroundColor: splashBgColor,
   } = splashScreenConfig;
 
-  const { theme } = useTheme(overrideTheme);
   const isRemote = splashSource.startsWith('http');
   const isImageSplash = splashType === 'image';
 
@@ -159,23 +156,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
     handleRedirect,
   ]);
 
-  /** 🎨 Safe Background Color Calculation */
-  const safeBgColor = useMemo(() => {
-    try {
-      if (!splashBgColor) return theme.colors.background;
-      const c = Color(splashBgColor);
-      return c.alpha() < 0.8 ? theme.colors.background : c.hex();
-    } catch {
-      return theme.colors.background;
-    }
-  }, [splashBgColor, theme.colors.background]);
-
-  const statusBarStyle: 'light-content' | 'dark-content' = Color(
-    safeBgColor
-  ).isDark()
-    ? 'light-content'
-    : 'dark-content';
-
   return (
     <BackgroundLayout
       backgroundImage={isImageSplash ? backgroundImage.source : undefined}
@@ -183,15 +163,22 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
       resizeMode={backgroundImage.resizeMode ?? 'cover'}
       innerContainerStyle={innerContainerStyle}
       onImageError={backgroundImage.onImageError}
-      theme={theme}
+      theme={overrideTheme}
       gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
     >
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle={statusBarStyle}
+      <AppStatusBar
+        theme={{
+          ...overrideTheme,
+          dark: {
+            ...overrideTheme?.dark,
+            background: splashBgColor,
+          },
+          light: {
+            ...overrideTheme?.light,
+            background: splashBgColor,
+          },
+        }}
       />
-
       {renderSplashContent()}
     </BackgroundLayout>
   );

package/src/components/Auth/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -6,7 +6,7 @@ import React, { useMemo, useCallback, useState } from 'react';
 import { View, StyleSheet, Animated } from 'react-native';
 import Video from 'react-native-video';
 import Display from '../../../../../utils/Display';
-import { useTheme } from '../../../../../theme';
+import { useInternalTheme } from '../../../../../theme/hook';
 
 interface IProps {
   width: number;
@@ -31,7 +31,7 @@ const SplashVideo: React.FC<IProps> = ({
   onLoaded,
   onError,
 }) => {
-  const { theme: applyTheme } = useTheme();
+  const { theme: applyTheme } = useInternalTheme();
   const [loaded, setLoaded] = useState(false);
   const fadeAnim = useMemo(() => new Animated.Value(0), []);
 

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -7,8 +7,9 @@ import {
   type ImageStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import type { ITheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { useSplashCache } from '../../hooks/useSplashCache';
+import { useInternalTheme } from '../../theme/hook';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
@@ -17,7 +18,7 @@ interface BackgroundLayoutProps {
   gradientSplitBackground?: number;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
   innerContainerStyle?: ViewStyle;
-  theme: ITheme;
+  theme?: ThemeOverride;
   onImageError?: (error: Error) => void;
 }
 
@@ -30,9 +31,10 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     resizeMode = 'cover',
     innerContainerStyle,
     onImageError,
-    theme,
+    theme: themeOverride,
   } = props;
 
+  const { theme } = useInternalTheme(themeOverride);
   const {
     data: { backgroundPath: localPathBackground },
   } = useSplashCache({

package/src/components/BlogView/BlogView.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { Text } from '../Text';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import AppHeader from '../Headers/AppHeader';
 import { scale, moderateScale } from 'react-native-size-matters';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type BlogViewProps = {
@@ -20,7 +20,7 @@ type BlogViewProps = {
   containerStyle?: ViewStyle;
   scrollable?: boolean;
   emptyText?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 
   // Header customization
   headerTitle?: string;
@@ -51,7 +51,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
   renderEmpty,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
 
   const renderFinalHeader = () => {
     if (renderHeader) return renderHeader();
@@ -62,7 +62,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
         onRightPress={onRightPress}
         title={headerTitle}
         titleAlign="left"
-        theme={appliedTheme}
+        theme={theme}
         titleStyle={{
           ...styles.headerTitle,
           color: appliedTheme.colors.onBackground,
@@ -83,7 +83,9 @@ export const BlogView: React.FC<BlogViewProps> = ({
     if (renderContent) return renderContent();
     if (content) {
       return (
-        <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>
+        <Markdown style={getMarkdownStyles(appliedTheme, isDarkMode)}>
+          {content}
+        </Markdown>
       );
     }
 
@@ -130,7 +132,10 @@ export const BlogView: React.FC<BlogViewProps> = ({
   );
 };
 
-const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
+const getMarkdownStyles = (
+  theme: ITheme,
+  isDarkMode: boolean
+): { [key: string]: TextStyle } => {
   const baseColor = theme.colors.textPrimary;
 
   return {
@@ -161,7 +166,7 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
     ordered_list: { color: baseColor },
     link: { color: theme.colors.primary },
     blockquote: {
-      backgroundColor: theme.dark
+      backgroundColor: isDarkMode
         ? theme.colors.surfaceVariant
         : theme.colors.surface,
       color: theme.colors.onSurface,

package/src/components/Button/BackBtn.tsx

@@ -13,17 +13,17 @@ import {
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 
 type BackBtnProps = {
   size?: number;
   color?: string;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   enableBlur?: boolean;
 };
 
@@ -36,7 +36,7 @@ const BackBtn: React.FC<BackBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const handlePress = () => {
     if (onPress) {

package/src/components/Button/MenuBtn.tsx

@@ -21,15 +21,15 @@ import {
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BlurView } from '@react-native-community/blur';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { MenuAction } from '../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type MenuBtnProps = {
   actions: MenuAction[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   style?: StyleProp<ViewStyle>;
   enableBlur?: boolean;
 };
@@ -41,7 +41,7 @@ const MenuBtn: React.FC<MenuBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [visible, setVisible] = useState(false);
   const [menuPosition, setMenuPosition] = useState<{
     top: number;

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) && (