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

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';
@@ -27,7 +27,7 @@ import ImageCropPicker, { type Image } from 'react-native-image-crop-picker';
 
 export type ProfileUpdateFormValues = {
   fullName: string;
-  avatarFile: Image; // new field to store actual file
+  avatarFile?: Image;
 };
 
 export type ProfileUpdateProps = {
@@ -35,8 +35,8 @@ export type ProfileUpdateProps = {
   name?: string;
   avatarUri?: string;
   onBackPress?: () => void;
-  onSubmit?: (val: { fullName: string; avatarFile: Image }) => void;
-  theme?: AppTheme;
+  onSubmit?: (val: { fullName: string; avatarFile?: Image }) => void;
+  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 {
@@ -64,9 +64,7 @@ export const ProfileUpdate = ({
   } = useForm<ProfileUpdateFormValues>({
     defaultValues: {
       fullName: name,
-      avatarFile: {
-        path: avatarUri,
-      },
+      avatarFile: avatarUri ? ({ path: avatarUri } as Image) : undefined,
     },
     mode: 'onChange',
     reValidateMode: 'onBlur',
@@ -104,16 +102,16 @@ export const ProfileUpdate = ({
   const handleFormSubmit = useCallback(
     (data: ProfileUpdateFormValues) => {
       Keyboard.dismiss();
-      if (data.avatarFile.path !== avatarUri) {
-        onSubmit?.({
-          avatarFile: data.avatarFile,
-          fullName: data.fullName,
-        });
-      } else {
-        onError?.({ message: 'No image selected' });
-      }
+
+      const hasNewAvatar =
+        data.avatarFile?.path && data.avatarFile.path !== avatarUri;
+
+      onSubmit?.({
+        fullName: data.fullName,
+        ...(hasNewAvatar ? { avatarFile: data.avatarFile } : {}),
+      });
     },
-    [avatarUri, onError, onSubmit]
+    [avatarUri, onSubmit]
   );
 
   return (
@@ -126,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,
@@ -182,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)}
                     />
@@ -198,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) => ({
@@ -116,6 +116,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
         activeOpacity={0.8}
       >
         <CardPoster
+          content_offering_type={item?.content?.content_offering_type}
           theme={appliedTheme}
           isLoading={isLoading}
           posterUri={item?.content?.poster}
@@ -133,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,
@@ -216,6 +217,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
         activeOpacity={0.8}
       >
         <CardPoster
+          content_offering_type={item?.content?.content_offering_type}
           theme={appliedTheme}
           isLoading={isLoading}
           posterUri={item?.content?.poster}
@@ -233,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

@@ -1,15 +1,20 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 17 Oct 2025 at 10:16 PM
+ */
 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> = ({
@@ -17,26 +22,60 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   size = scale(80),
   theme,
 }) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [imageError, setImageError] = useState(false);
-  const { theme: appliedTheme } = useTheme(theme);
-  const borderColor = appliedTheme.colors.primary;
+  const [loading, setLoading] = useState(!!avatarUri);
+
+  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 && (
+        <SkeletonPlaceholder
+          backgroundColor={skeletonBaseColor}
+          highlightColor={skeletonHighlightColor}
+          borderRadius={size / 2}
+        >
+          <SkeletonPlaceholder.Item
+            width={size}
+            height={size}
+            borderRadius={size / 2}
+          />
+        </SkeletonPlaceholder>
+      )}
+
       <Image
         source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
-        style={[styles(size).avatar, { borderColor }]}
-        onError={() => setImageError(true)}
+        style={[styles(size).avatar, { borderColor, position: 'absolute' }]}
+        onError={handleError}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       />
     </View>
   );
 };
 
 export default UserAvatar;
+
 const styles = (size: number) =>
   StyleSheet.create({
     wrapper: {
+      width: size,
+      height: size,
       position: 'relative',
+      justifyContent: 'center',
+      alignItems: 'center',
     },
     avatar: {
       width: size,

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'
+      }
+    />
+  );
+};