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

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

package/src/components/TabBar/Two.tsx

@@ -7,8 +7,8 @@ import { View, Pressable, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../Text';
-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 { RFValue } from 'react-native-responsive-fontsize';
 
 export type ITab = {
@@ -24,7 +24,7 @@ export type ITab = {
 
 export type TabBarTwoProps = {
   tabs: ITab[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   onTabPress?: (key: string) => void;
 };
 
@@ -35,12 +35,14 @@ const TabBarButton = ({
   tab,
   isActive,
   appliedTheme,
+  isDarkMode,
   onPress,
   onTabPress,
   setActiveTab,
 }: {
   tab: ITab;
   isActive: boolean;
+  isDarkMode: boolean;
   appliedTheme: ITheme;
   onPress?: (e: any) => void;
   onTabPress?: (key: string) => void;
@@ -60,7 +62,7 @@ const TabBarButton = ({
           onTabPress?.(tab.key);
         }}
         android_ripple={{
-          color: appliedTheme.dark
+          color: isDarkMode
             ? 'rgba(255, 255, 255, 0.12)'
             : 'rgba(0, 0, 0, 0.08)',
           borderless: true,
@@ -80,7 +82,7 @@ const TabBarButton = ({
 };
 
 const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
   const [activeTab, setActiveTab] = useState(tabs[0]?.key);
 
   return (
@@ -95,7 +97,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
           marginHorizontal: scale(16),
           height: scale(70),
           borderRadius: scale(40),
-          backgroundColor: appliedTheme.colors.background + '80',
+          backgroundColor: appliedTheme.colors.background,
           borderWidth: 2,
           borderTopWidth: 2,
           borderTopColor: appliedTheme.colors.border,
@@ -122,6 +124,7 @@ const TabBarTwo = ({ tabs, theme, onTabPress }: TabBarTwoProps) => {
                 tab={tab}
                 isActive={tab.key === activeTab}
                 appliedTheme={appliedTheme}
+                isDarkMode={isDarkMode}
                 onPress={onPress}
                 onTabPress={onTabPress}
                 setActiveTab={setActiveTab}

package/src/components/Text/Text.tsx

@@ -9,8 +9,9 @@ import {
   type TextProps as RNTextProps,
   type TextStyle,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../theme/themes';
 
 export interface TextProps extends RNTextProps {
   children: React.ReactNode;
@@ -21,6 +22,7 @@ export interface TextProps extends RNTextProps {
   fontFamily?: string;
   numberOfLines?: number;
   allowFontScaling?: boolean;
+  theme?: ThemeOverride;
 }
 
 const Text: React.FC<TextProps> = ({
@@ -33,9 +35,10 @@ const Text: React.FC<TextProps> = ({
   numberOfLines,
   allowFontScaling = false,
   style,
+  theme: overrideTheme,
   ...rest
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useInternalTheme(overrideTheme);
 
   return (
     <RNText

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -15,10 +15,10 @@ import {
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import AppHeader from '../../Headers/AppHeader';
 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';
 import { ScanLine } from 'lucide-react-native';
 
@@ -74,7 +74,7 @@ type IDeviceSessionsProps = {
   headerTitleAlign?: 'left' | 'center';
   headerTitleStyle?: StyleProp<any>;
   renderHeader?: () => React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   isLoadingLogout?: boolean;
 };
@@ -99,7 +99,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   isLoading,
   isLoadingLogout,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const colors = appliedTheme.colors;
 
   const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(
@@ -178,7 +178,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
                 >
                   <Text
                     numberOfLines={1}
-                    style={[styles.badgeText, { color: colors.black }]}
+                    style={[styles.badgeText, { color: colors.buttonText }]}
                   >
                     {thisDevice}
                   </Text>
@@ -320,6 +320,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               color={colors.onSurfaceVariant}
             />
           }
+          theme={theme}
           titleAlign={headerTitleAlign}
           style={headerStyle}
           titleStyle={headerTitleStyle}

package/src/components/User/ProfileUpdate/ProfileUpdate.tsx

@@ -18,8 +18,8 @@ import { Camera } from 'lucide-react-native';
 import { useForm, Controller } from 'react-hook-form';
 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 UserAvatar from '../components/UserAvatar';
 import { Input } from '../../Input/Input';
 import { Button } from '../../Button';
@@ -36,7 +36,7 @@ export type ProfileUpdateProps = {
   avatarUri?: string;
   onBackPress?: () => void;
   onSubmit?: (val: { fullName: string; avatarFile?: Image }) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   loading?: boolean;
   onError?: (error: { message: string }) => void;
 };
@@ -51,7 +51,7 @@ export const ProfileUpdate = ({
   loading = false,
   onError,
 }: ProfileUpdateProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const { colors } = appliedTheme;
 
   const {
@@ -124,17 +124,13 @@ export const ProfileUpdate = ({
           <AppHeader
             title={title}
             onBackPress={onBackPress}
-            theme={appliedTheme}
+            theme={theme}
             titleAlign="left"
           />
 
           <View style={styles.content}>
             <View style={styles.avatarBox}>
-              <UserAvatar
-                avatarUri={avatar?.path}
-                theme={appliedTheme}
-                size={100}
-              />
+              <UserAvatar avatarUri={avatar?.path} theme={theme} size={100} />
               <TouchableOpacity
                 style={[
                   styles.cameraBtn,
@@ -180,7 +176,7 @@ export const ProfileUpdate = ({
                       placeholder={'Enter your full name'}
                       placeholderTextColor={colors.textDisabled}
                       containerStyle={{ marginTop: verticalScale(20) }}
-                      theme={appliedTheme}
+                      theme={theme}
                       returnKeyType="done"
                       onSubmitEditing={handleSubmit(handleFormSubmit)}
                     />
@@ -196,7 +192,7 @@ export const ProfileUpdate = ({
               <Button.Primary
                 title={'Update Profile'}
                 onPress={handleSubmit(handleFormSubmit)}
-                theme={appliedTheme}
+                theme={theme}
                 titleStyle={{ fontSize: RFValue(14) }}
                 loading={loading}
                 containerStyle={{ marginTop: verticalScale(5) }}

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -16,13 +16,13 @@ import { FlatGrid } from 'react-native-super-grid';
 import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
-import type { AppTheme } from '../../../theme/themes';
+import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface IHistoryItem {
@@ -56,7 +56,7 @@ export interface WatchHistoryProps {
   contentContainerStyle?: StyleProp<ViewStyle>;
 
   // Theme
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 
   // Rendering Overrides
   renderItem?: (item: IHistoryItem, index: number) => React.ReactElement | null;
@@ -97,7 +97,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   onEndReached,
   onEndReachedThreshold,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const listData = isLoading
     ? Array.from({ length: skeletonCount }, (_, i) => ({
@@ -134,7 +134,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           onBackPress={onBackPress}
           title={title}
           titleAlign="left"
-          theme={appliedTheme}
+          theme={theme}
           titleStyle={{
             color: appliedTheme.colors.onBackground,
           }}

package/src/components/User/WatchLater/WatchLater.tsx

@@ -19,14 +19,14 @@ import { scale } from 'react-native-size-matters';
 import { Search } from 'lucide-react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
-import { useTheme } from '../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 
 import AppHeader from '../../Headers/AppHeader';
 import { Text } from '../../Text';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import CardPoster from '../../Content/Card/components/CardPoster';
 import type { IContentData } from '../../../types';
-import type { AppTheme, ITheme } from '../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type IWatchLaterItem = {
@@ -49,7 +49,7 @@ export type WatchLaterProps = {
   titleStyle?: StyleProp<TextStyle>;
   listStyle?: StyleProp<ViewStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   viewMode?: 'poster' | 'detailed';
   renderItem?: (
     item: IWatchLaterItem,
@@ -150,7 +150,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
   onEndReachedThreshold,
   viewMode = 'poster',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const listData = isLoading
     ? (Array.from({ length: skeletonCount }, (_, i) => ({
@@ -192,10 +192,11 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             />
           </View>
           <View style={styles.detailedInfo}>
-            <Text numberOfLines={1} style={styles.detailedTitle}>
+            <Text theme={theme} numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
             <Text
+              theme={theme}
               numberOfLines={5}
               style={[
                 styles.detailedDesc,
@@ -234,7 +235,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           onBackPress={onBackPress}
           title={title}
           titleAlign="left"
-          theme={appliedTheme}
+          theme={theme}
           titleStyle={{
             ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
             color: appliedTheme.colors.onBackground,

package/src/components/User/components/UserAvatar.tsx

@@ -6,15 +6,15 @@ import React, { useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } 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';
 
 const fallbackAvatar = require('../../../assets/img/profile.jpg');
 
 type UserAvatarProps = {
   avatarUri?: string;
   size?: number;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const UserAvatar: React.FC<UserAvatarProps> = ({
@@ -22,14 +22,23 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   size = scale(80),
   theme,
 }) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [imageError, setImageError] = useState(false);
   const [loading, setLoading] = useState(!!avatarUri);
-  const { theme: appliedTheme } = useTheme(theme);
+
   const borderColor = appliedTheme.colors.primary || '#ccc';
   const skeletonBaseColor = appliedTheme.colors.skeletonBaseColor || '#E0E0E0';
   const skeletonHighlightColor =
     appliedTheme.colors.skeletonHighlightColor || '#F5F5F5';
 
+  const handleError = () => {
+    setImageError(true);
+    setLoading(false);
+  };
+
+  const handleLoadStart = () => setLoading(true);
+  const handleLoadEnd = () => setLoading(false);
+
   return (
     <View style={styles(size).wrapper}>
       {loading && (
@@ -49,12 +58,9 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
       <Image
         source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
         style={[styles(size).avatar, { borderColor, position: 'absolute' }]}
-        onError={() => {
-          setImageError(true);
-          setLoading(false);
-        }}
-        onLoadStart={() => setLoading(true)}
-        onLoadEnd={() => setLoading(false)}
+        onError={handleError}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       />
     </View>
   );

package/src/components/User/components/UserSection.tsx

@@ -9,8 +9,8 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import UserAvatar from './UserAvatar';
 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';
 
 export interface UserInfo {
@@ -29,7 +29,7 @@ interface UserSectionProps {
   userInfo: UserInfo;
   isLoading?: boolean;
   renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   avatarComponent?: React.ReactNode;
   skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
   userInfoTextStyle?: UserInfoTextStyle;
@@ -44,7 +44,7 @@ const UserSection: React.FC<UserSectionProps> = ({
   skeletonProps = {},
   userInfoTextStyle = {},
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   if (!userInfo) return null;
   if (renderUserInfo) return renderUserInfo(userInfo);
 
@@ -72,7 +72,7 @@ const UserSection: React.FC<UserSectionProps> = ({
       <View style={styles.avatarWrapper}>
         {avatarComponent ?? (
           <>
-            <UserAvatar avatarUri={userInfo.avatarUri} theme={appliedTheme} />
+            <UserAvatar avatarUri={userInfo.avatarUri} theme={theme} />
             {userInfo.onEditPress && (
               <Pressable
                 onPress={userInfo.onEditPress}

package/src/components/common/AppStatusBar.tsx

@@ -0,0 +1,51 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 22 Oct 2025 at 11:22 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
+import Color from 'color';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook';
+
+type AppStatusBarProps = {
+  backgroundColor?: string;
+  barStyle?: StatusBarStyle;
+  translucent?: boolean;
+  hidden?: boolean;
+  theme?: ThemeOverride;
+};
+
+export const AppStatusBar: React.FC<AppStatusBarProps> = ({
+  backgroundColor,
+  barStyle,
+  translucent = true,
+  hidden = false,
+  theme: overrideTheme,
+}) => {
+  const { theme } = useInternalTheme(overrideTheme);
+
+  const resolvedBackground = useMemo(() => {
+    if (backgroundColor) return backgroundColor;
+    return theme.colors.background;
+  }, [backgroundColor, theme]);
+
+  // 🌗 Auto bar style
+  const resolvedBarStyle: StatusBarStyle = useMemo(() => {
+    if (barStyle) return barStyle;
+    const isDarkBg = Color(resolvedBackground).isDark();
+    return isDarkBg ? 'light-content' : 'dark-content';
+  }, [barStyle, resolvedBackground]);
+
+  return (
+    <StatusBar
+      translucent={translucent}
+      hidden={hidden}
+      barStyle={resolvedBarStyle}
+      backgroundColor={
+        Platform.OS === 'android' ? resolvedBackground : 'transparent'
+      }
+    />
+  );
+};