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

package/src/components/Fallbacks/index.ts

@@ -0,0 +1,2 @@
+export * from './NotFoundFallback';
+export * from './NoContentFallback';

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,8 +43,9 @@ const InputOne: React.FC<InputOneProps> = ({
   disabled,
   ...props
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
+  const [isFocused, setIsFocused] = useState(false); // 👈 focus state जोड़ी गई
   const isPasswordField = !!secureTextEntry;
   const inputSecure = isPasswordField && !showPassword;
 
@@ -56,6 +57,7 @@ const InputOne: React.FC<InputOneProps> = ({
     outlineDisabled,
     error: inputErrorColor,
     background,
+    primary, // अगर theme में primary color हो तो उसे भी use करेंगे
   } = appliedTheme?.colors || {};
 
   return (
@@ -87,13 +89,14 @@ const InputOne: React.FC<InputOneProps> = ({
       <View
         style={[
           styles.inputWrapper,
-
           {
             borderColor: disabled
               ? outlineDisabled
               : error
                 ? inputErrorColor
-                : outline,
+                : isFocused
+                  ? primary || '#007AFF'
+                  : outline,
             backgroundColor: disabled
               ? appliedTheme.colors.backgroundDisabled
               : error
@@ -107,6 +110,8 @@ const InputOne: React.FC<InputOneProps> = ({
         <TextInput
           {...props}
           editable={!disabled}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           placeholderTextColor={
             placeholderTextColor || (disabled ? textDisabled : textSecondary)
           }
@@ -114,6 +119,24 @@ const InputOne: React.FC<InputOneProps> = ({
           textContentType={
             isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'
           }
+          cursorColor={
+            disabled
+              ? textDisabled
+              : error
+                ? inputErrorColor
+                : isFocused
+                  ? primary || '#007AFF'
+                  : textPrimary
+          }
+          selectionColor={
+            disabled
+              ? textDisabled
+              : error
+                ? inputErrorColor
+                : isFocused
+                  ? primary || '#007AFF'
+                  : textPrimary
+          }
           style={[
             styles.input,
             {
@@ -189,7 +212,7 @@ const styles = StyleSheet.create({
   },
   inputWrapper: {
     width: '100%',
-    borderWidth: scale(1),
+    borderWidth: scale(1.4),
     borderRadius: moderateScale(10),
     paddingHorizontal: scale(10),
     paddingVertical: verticalScale(6),

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

@@ -13,8 +13,8 @@ import {
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useSplashCache } from '../../hooks/useSplashCache';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+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,7 +41,7 @@ export const Logo: React.FC<ILogoProps> = ({
   theme,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const {
     data: { logoPath },

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;
@@ -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>

package/src/components/TabBar/One.tsx

@@ -7,9 +7,9 @@ import React, { useState } from 'react';
 import { View, Pressable, Platform, StyleSheet } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Text } from '../Text';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type ITab = {
@@ -26,7 +26,7 @@ type ITab = {
 export type TabBarOneProps = {
   tabs: ITab[];
   onTabPress?: (key: string) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   renderIcon?: ({
     icon,
     color,
@@ -44,6 +44,7 @@ type TabBarButtonProps = {
   tab: ITab;
   isActive: boolean;
   appliedTheme: ITheme;
+  isDarkMode: boolean;
   setActiveTab: (key: string) => void;
   onTabPress?: (key: string) => void;
   renderIcon?: ({
@@ -62,6 +63,7 @@ const TabBarButton: React.FC<TabBarButtonProps> = ({
   tab,
   isActive,
   appliedTheme,
+  isDarkMode,
   setActiveTab,
   onTabPress,
   renderIcon,
@@ -87,7 +89,7 @@ const TabBarButton: React.FC<TabBarButtonProps> = ({
           onTabPress?.(tab.key);
         }}
         android_ripple={{
-          color: appliedTheme.dark
+          color: isDarkMode
             ? 'rgba(255, 255, 255, 0.12)'
             : 'rgba(0, 0, 0, 0.08)',
           borderless: true,
@@ -107,7 +109,7 @@ const TabBarButton: React.FC<TabBarButtonProps> = ({
 };
 
 const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
   const [activeTab, setActiveTab] = useState(tabs[0]?.key);
 
   return (
@@ -128,7 +130,7 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
           position: 'absolute',
           bottom: 0,
           height: scale(80),
-          backgroundColor: appliedTheme.colors.background + '80',
+          backgroundColor: appliedTheme.colors.background,
           borderTopColor: appliedTheme.colors.border,
           borderTopWidth: 0.5,
           paddingBottom: Platform.OS === 'ios' ? scale(28) : scale(18),
@@ -149,6 +151,7 @@ const TabBarOne = ({ tabs, theme, onTabPress, renderIcon }: TabBarOneProps) => {
                 tab,
                 isActive: tab.key === activeTab,
                 appliedTheme: appliedTheme,
+                isDarkMode,
                 setActiveTab: setActiveTab,
                 onTabPress: onTabPress,
                 renderIcon: renderIcon,
@@ -164,6 +167,7 @@ type TabBarButtonWrapperProps = {
   onPress?: (e: any) => void;
   tab: ITab;
   isActive: boolean;
+  isDarkMode: boolean;
   appliedTheme: ITheme;
   setActiveTab: (key: string) => void;
   onTabPress?: (key: string) => void;

package/src/components/TabBar/Three.tsx

@@ -11,8 +11,8 @@ import {
 } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
 
-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';
 
 export interface ITab {
   key: string;
@@ -27,7 +27,7 @@ export interface ITab {
 
 export interface TabBarThreeProps {
   tabs: ITab[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   onTabPress?: (key: string) => void;
 }
 
@@ -122,7 +122,7 @@ const TabBarThree: React.FC<TabBarThreeProps> = ({
   theme,
   onTabPress,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   return (
     <Tab.Navigator