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

package/src/components/ContentView/components/HeroBanner.tsx

@@ -16,6 +16,8 @@ import BackBtn from '../../Button/BackBtn';
 import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -25,7 +27,7 @@ const BACK_BTN_SIZE = scale(35);
 export const HeroBanner = ({
   backgroundImage,
   title,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   onPressPlay,
   onBackPress,
@@ -33,7 +35,9 @@ export const HeroBanner = ({
   renderButtons,
   renderSkeletons,
   menuActions,
+  content_offering_type,
 }: HeroBannerProps) => {
+  const { theme } = useInternalTheme(themeOverride);
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
 
@@ -56,6 +60,12 @@ export const HeroBanner = ({
           position: 'relative',
           backgroundColor: theme.colors.backgroundDisabled,
         },
+        rentOrBuyIcon: {
+          position: 'absolute',
+          bottom: verticalScale(20),
+          zIndex: 4,
+          left: scale(10),
+        },
         centeredContent: {
           ...StyleSheet.absoluteFillObject,
           justifyContent: 'center',
@@ -146,7 +156,7 @@ export const HeroBanner = ({
         : (renderButtons?.back?.() ??
           (onBackPress && (
             <BackBtn
-              theme={theme}
+              theme={themeOverride}
               onPress={onBackPress}
               style={styles.defaultBackBtn}
               size={scale(20)}
@@ -173,7 +183,7 @@ export const HeroBanner = ({
         : menuActions &&
           (renderButtons?.menu?.() ?? (
             <MenuBtn
-              theme={theme}
+              theme={themeOverride}
               style={styles.defaultMenuBtn}
               actions={menuActions}
             />
@@ -189,6 +199,15 @@ export const HeroBanner = ({
       {/* Background Image */}
       {!isLoading && (
         <View style={styles.imageContainer}>
+          {content_offering_type && (
+            <RentOrBuyIcon
+              size={30}
+              theme={theme}
+              style={styles.rentOrBuyIcon}
+              content_offering_type={content_offering_type}
+            />
+          )}
+
           <FastImage
             style={StyleSheet.absoluteFillObject}
             source={{
@@ -253,6 +272,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.centeredContent}>
             {renderButtons?.play?.() ?? (
               <PlayButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: false })}
               />
             )}
@@ -261,6 +282,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.trailerButtonWrapper}>
             {renderButtons?.trailer?.() ?? (
               <TrailerButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: true })}
               />
             )}

package/src/components/ContentView/components/TrailerButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   onPress?: (event: GestureResponderEvent) => void;
   label?: string;
   iconSize?: number;
-  iconColor?: string;
+  color?: string;
   backgroundColor?: string;
   textStyle?: TextStyle;
   style?: ViewStyle;
@@ -28,7 +28,7 @@ export const TrailerButton = ({
   onPress,
   label = 'Watch Trailer',
   iconSize = scale(18),
-  iconColor = '#000',
+  color = '#000',
   backgroundColor = '#FFD700',
   textStyle,
   style,
@@ -39,8 +39,10 @@ export const TrailerButton = ({
       activeOpacity={0.8}
       style={[styles.button, { backgroundColor }, style]}
     >
-      <PlayCircle size={iconSize} color={iconColor} />
-      <Text style={[styles.text, textStyle]}> {label}</Text>
+      <PlayCircle size={iconSize} color={color} />
+      <Text style={[styles.text, textStyle]} color={color}>
+        {label}
+      </Text>
     </TouchableOpacity>
   );
 };
@@ -54,7 +56,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   text: {
-    color: '#000',
     fontWeight: '600',
     fontSize: scale(12),
     marginLeft: scale(2),

package/src/components/Headers/AppHeader.tsx

@@ -12,10 +12,10 @@ import {
   type TextStyle,
 } from 'react-native';
 import { ArrowLeft } from 'lucide-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 type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type AppHeaderProps = {
@@ -26,7 +26,7 @@ export type AppHeaderProps = {
   style?: StyleProp<ViewStyle>;
   titleStyle?: TextStyle;
   titleAlign?: 'center' | 'left';
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const AppHeader: React.FC<AppHeaderProps> = ({
@@ -39,7 +39,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   titleAlign = 'center',
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   return (
     <View

package/src/components/Headers/One.tsx

@@ -7,15 +7,15 @@ import React, { useMemo } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import {
   Menu as DefaultMenuIcon,
   Search as DefaultSearchIcon,
 } from 'lucide-react-native';
 
 export interface HeaderOneProps {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   SearchIcon?: React.FC<{ width: number; height: number; color?: string }>;
@@ -34,7 +34,7 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
   onSearchPress,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const iconColor = appliedTheme.colors?.onSurface;
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';

package/src/components/Headers/Three.tsx

@@ -6,13 +6,13 @@ import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 
 export interface HeaderThreeProps {
   logoUri: string;
   category?: React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
 }
 
@@ -22,7 +22,7 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
   theme,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   return (
     <View
       style={[

package/src/components/Headers/Two.tsx

@@ -6,11 +6,11 @@ import React from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Menu } from 'lucide-react-native';
 export interface HeaderTwoProps {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
@@ -24,7 +24,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
   onMenuPress,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
   const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;

package/src/components/Input/InputOne.tsx

@@ -15,8 +15,8 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-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';
 
 export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
@@ -25,7 +25,7 @@ export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
   errorMessage?: string;
   error?: boolean;
   secureTextEntry?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   label?: string;
   placeholderTextColor?: string;
   disabled?: boolean;
@@ -43,7 +43,7 @@ const InputOne: React.FC<InputOneProps> = ({
   disabled,
   ...props
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = !!secureTextEntry;
   const inputSecure = isPasswordField && !showPassword;

package/src/components/Input/InputTwo.tsx

@@ -16,8 +16,8 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-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';
 
 export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
@@ -26,7 +26,7 @@ export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
   errorMessage?: string;
   error?: boolean;
   secureTextEntry?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   label?: string;
   placeholderTextColor?: string;
   disabled?: boolean;
@@ -53,7 +53,7 @@ const InputTwo: React.FC<InputTwoProps> = ({
   onPressRightIcon,
   ...props
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = !!secureTextEntry;
   const inputSecure = isPasswordField && !showPassword;

package/src/components/Input/PhoneNumberInput.tsx

@@ -26,8 +26,8 @@ import { getExampleNumber } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import debounce from 'lodash.debounce';
-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';
 
 export interface PhoneNumberInputProps
@@ -44,7 +44,7 @@ export interface PhoneNumberInputProps
   errorMessage?: string;
   inputStyle?: TextStyle;
   containerStyle?: ViewStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   disabled?: boolean;
 }
 
@@ -79,7 +79,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
   disabled = false,
 }) => {
   const phoneInputRef = useRef<PhoneInput>(null);
-  const { theme: appliedTheme } = useTheme(propTheme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(propTheme);
   const [inputError, setInputError] = useState<string | null>(null);
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const errorAnimation = useRef(new Animated.Value(0)).current;
@@ -343,7 +343,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
             onFocus: () => setIsFocused(true),
             onBlur: () => setIsFocused(false),
           }}
-          withDarkTheme={appliedTheme.dark}
+          withDarkTheme={isDarkMode}
         />
       </View>
       {(error || inputError) && (

package/src/components/Logo/Logo.tsx

@@ -12,9 +12,9 @@ import {
 } from 'react-native';
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+import { useSplashCache } from '../../hooks/useSplashCache';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 
 interface ILogoProps {
   width?: number;
@@ -25,7 +25,7 @@ interface ILogoProps {
   containerStyle?: StyleProp<ViewStyle>;
   aspectRatio?: number;
   fallbackUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
 }
 
@@ -41,19 +41,17 @@ export const Logo: React.FC<ILogoProps> = ({
   theme,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const {
-    data: { localPathLogo },
+    data: { logoPath },
     isLoading: isSplashLoading,
-  } = useInitSplashCacheSync({
+  } = useSplashCache({
     logoUrl: logoUri,
   });
-  const finalSource = localPathLogo
+  const finalSource = logoPath
     ? {
-        uri: localPathLogo.startsWith('file://')
-          ? localPathLogo
-          : `file://${localPathLogo}`,
+        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
       }
     : logoUri
       ? { uri: logoUri }

package/src/components/Reels/ReelsSeries/Model/Synopsis.tsx

@@ -76,14 +76,7 @@ const Synopsis: React.FC<SynopsisProps> = ({ data }) => {
 
   const renderItem = useCallback(
     ({ item }: { item: ILikeMoreData; index: number }) => (
-      <TouchableOpacity
-        style={[styles.card]}
-        activeOpacity={0.8}
-        onPress={() => {
-          // Handle item press if needed
-          console.log('Pressed item:', item.name);
-        }}
-      >
+      <TouchableOpacity style={[styles.card]} activeOpacity={0.8}>
         <Image
           source={{
             uri:

package/src/components/Search/One.tsx

@@ -12,7 +12,7 @@ import {
   Keyboard,
   type ListRenderItem,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import InputTwo from '../Input/InputTwo';
 import { LucideSearch, XCircle } from 'lucide-react-native';
 import { Text } from '../Text';
@@ -28,7 +28,7 @@ import type {
   ISectionItem,
   MoreFetchData,
 } from '../../types';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
 import RecentSearchesSection from './components/RecentSearchesSection';
 import Cards from '../Content/Card';
@@ -62,7 +62,7 @@ export type SearchOneProps = {
   noResultsText?: string;
   recommendedContentCardStyles?: RecommendedCardStyles;
   skeletonConfig?: SearchCardSkeletonConfig;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   recommendedContent?: ISectionItem | null;
 };
 
@@ -80,7 +80,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
   theme,
   recommendedContent,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const {
     recentSearches,
     addSearchTerm,
@@ -172,7 +172,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
             type={recommendedContent.type}
             data={recommendedContent.content}
             isLoading={isLoading}
-            theme={appliedTheme}
+            theme={theme}
             onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
             onPressMore={events?.onPressRecommendedMore}
             moreFetchData={events?.moreFetchDataRecommended}
@@ -184,13 +184,14 @@ const SearchBar: React.FC<SearchOneProps> = ({
   }, [
     shouldShowFooter,
     showRecent,
-    recommendedContent,
     recentSearches,
-    appliedTheme,
-    clearSearches,
+    isLoading,
     handleTyping,
+    clearSearches,
+    appliedTheme,
+    recommendedContent,
+    theme,
     events,
-    isLoading,
     recommendedContentCardStyles,
   ]);
 

package/src/components/Search/components/SearchCard.tsx

@@ -9,8 +9,8 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 
-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 { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { Text } from '../../Text';
@@ -34,7 +34,7 @@ export type SearchCardProps = {
   category?: string;
   isLoading?: boolean;
   onPress?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   skeletonConfig?: SearchCardSkeletonConfig;
 };
 
@@ -51,7 +51,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
   theme,
   skeletonConfig,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const {
     colors: {
       textPrimary,

package/src/components/Settings/AppSettings.tsx

@@ -20,7 +20,7 @@ import {
   type TextStyle,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import DeviceInfo from 'react-native-device-info';
 import AppHeader from '../Headers/AppHeader';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -30,7 +30,7 @@ import UserSection, {
 } from '../User/components/UserSection';
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // ✅ Types
@@ -64,7 +64,7 @@ export type AppSettingsProps = {
   titleAlign?: 'left' | 'center';
   userInfo?: UserInfo;
   menuItems: MenuItem[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   versionText?: string;
   onBackPress?: () => void;
@@ -106,7 +106,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
   userInfoTextStyle = {},
   menuItemStyle = {},
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const insets = useSafeAreaInsets();
   // ✅ State for toggle values
   const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
@@ -242,7 +242,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
             title={title || 'Settings'}
             titleAlign={titleAlign}
             onBackPress={onBackPress}
-            theme={appliedTheme}
+            theme={theme}
           />
         ))}
       <ScrollView
@@ -255,7 +255,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
       >
         {userInfo && (
           <UserSection
-            theme={appliedTheme}
+            theme={theme}
             userInfo={userInfo}
             avatarComponent={avatarComponent}
             isLoading={isLoading}

package/src/components/Subscription/SubOne.tsx

@@ -17,9 +17,9 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { Text } from '../Text';
 import AppHeader from '../Headers/AppHeader';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import Display from '../../utils/Display';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type Plan = {
@@ -33,7 +33,7 @@ export type Plan = {
 };
 
 type SubscriptionSliderOneProps = {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   headerTitleAlign?: 'center' | 'left';
   subscribeButtonText?: string;
   onSubscribe?: (plan: Plan) => void;
@@ -69,7 +69,7 @@ const SubscriptionSliderOne = ({
   footer,
   extraContentText,
 }: SubscriptionSliderOneProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const colors = appliedTheme.colors;
   const parsePrice = (price: string) =>
     parseFloat(price.replace(/[^\d.]/g, '')) || 0;
@@ -90,7 +90,7 @@ const SubscriptionSliderOne = ({
     });
   }, [plans]);
   const placeholderData = useMemo(
-    () => new Array(plans.length || 1).fill({}),
+    () => new Array(plans.length || 3).fill({}),
     [plans]
   );
 
@@ -125,12 +125,9 @@ const SubscriptionSliderOne = ({
         >
           {item?.isPopular && (
             <View
-              style={[
-                styles.popularBadge,
-                { backgroundColor: colors.onBackground },
-              ]}
+              style={[styles.popularBadge, { backgroundColor: colors.button }]}
             >
-              <Text style={[styles.popularText, { color: colors.onSecondary }]}>
+              <Text style={[styles.popularText, { color: colors.buttonText }]}>
                 POPULAR
               </Text>
             </View>
@@ -164,9 +161,11 @@ const SubscriptionSliderOne = ({
             disabled={subscribeLoadingId === item.id}
           >
             {subscribeLoadingId === item.id ? (
-              <ActivityIndicator size="small" color={colors.black} />
+              <ActivityIndicator size="small" color={colors.buttonText} />
             ) : (
-              <Text style={[styles.subscribeText, { color: colors.black }]}>
+              <Text
+                style={[styles.subscribeText, { color: colors.buttonText }]}
+              >
                 {subscribeButtonText}
               </Text>
             )}
@@ -175,11 +174,9 @@ const SubscriptionSliderOne = ({
       </View>
     ),
     [
-      colors.black,
       colors.button,
+      colors.buttonText,
       colors.cardGradient,
-      colors.onBackground,
-      colors.onSecondary,
       colors.primary,
       colors.white,
       onSubscribe,
@@ -194,10 +191,12 @@ const SubscriptionSliderOne = ({
         title={header.topTitle}
         onBackPress={onBackPress}
         titleAlign={header.topTitleAlign}
-        theme={appliedTheme}
+        theme={theme}
       />
       <View style={styles.content}>
-        <Text style={[styles.heading]}>{header.title}</Text>
+        <Text style={[styles.heading]} color={colors.textPrimary}>
+          {header.title}
+        </Text>
         <Text style={[styles.subText, { color: colors.onSurfaceVariant }]}>
           {header.subTitle}
         </Text>
@@ -212,7 +211,9 @@ const SubscriptionSliderOne = ({
             height={CAROUSEL_HEIGHT}
             data={isLoading ? placeholderData : sortedPlans}
             renderItem={isLoading ? renderSkeleton : renderPlan}
-            loop
+            loop={
+              ((isLoading ? sortedPlans.length : sortedPlans.length) || 0) > 1
+            }
             autoPlay={false}
             scrollAnimationDuration={500}
             mode="parallax"