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

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

@@ -12,7 +12,7 @@ import {
   type TextStyle,
   type StyleProp,
   type ViewStyle,
-  type ListRenderItem
+  type ListRenderItem,
 } from 'react-native';
 import { FlatGrid } from 'react-native-super-grid';
 import { scale } from 'react-native-size-matters';
@@ -51,7 +51,10 @@ export type WatchLaterProps = {
   contentContainerStyle?: StyleProp<ViewStyle>;
   theme?: AppTheme;
   viewMode?: 'poster' | 'detailed';
-  renderItem?: (item: IWatchLaterItem, index: number) => React.ReactElement | null;
+  renderItem?: (
+    item: IWatchLaterItem,
+    index: number
+  ) => React.ReactElement | null;
   skeletonCount?: number;
   skeletonComponent?: React.ReactElement;
   noDataComponent?: React.ReactNode;
@@ -61,7 +64,10 @@ export type WatchLaterProps = {
   onEndReachedThreshold?: number;
 };
 
-const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed' }> = ({ theme, viewMode }) => {
+const DefaultSkeleton: React.FC<{
+  theme: ITheme;
+  viewMode: 'poster' | 'detailed';
+}> = ({ theme, viewMode }) => {
   if (viewMode === 'detailed') {
     return (
       <SkeletonPlaceholder
@@ -72,10 +78,34 @@ const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed'
         <View style={styles.detailedItem}>
           <View style={styles.thumbnailWrapper} />
           <View style={[styles.detailedInfo, { justifyContent: 'center' }]}>
-            <View style={{ width: '60%', height: scale(12), marginBottom: scale(6) }} />
-            <View style={{ width: '90%', height: scale(10), marginBottom: scale(4) }} />
-            <View style={{ width: '70%', height: scale(10), marginBottom: scale(4) }} />
-            <View style={{ width: '40%', height: scale(10), marginBottom: scale(4) }} />
+            <View
+              style={{
+                width: '60%',
+                height: scale(12),
+                marginBottom: scale(6),
+              }}
+            />
+            <View
+              style={{
+                width: '90%',
+                height: scale(10),
+                marginBottom: scale(4),
+              }}
+            />
+            <View
+              style={{
+                width: '70%',
+                height: scale(10),
+                marginBottom: scale(4),
+              }}
+            />
+            <View
+              style={{
+                width: '40%',
+                height: scale(10),
+                marginBottom: scale(4),
+              }}
+            />
             <View style={{ width: '30%', height: scale(10) }} />
           </View>
         </View>
@@ -89,7 +119,9 @@ const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed'
       highlightColor={theme.colors.skeletonHighlightColor}
       backgroundColor={theme.colors.skeletonBaseColor}
     >
-      <View style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }} />
+      <View
+        style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }}
+      />
     </SkeletonPlaceholder>
   );
 };
@@ -116,7 +148,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
   onPressItem,
   onEndReached,
   onEndReachedThreshold,
-  viewMode = 'poster'
+  viewMode = 'poster',
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -127,14 +159,18 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           name: '',
           description: '',
           poster: '',
-          thumbnail: ''
-        }
+          thumbnail: '',
+        },
       })) as any)
     : data;
 
   const renderGridItem: ListRenderItem<IWatchLaterItem> = ({ item, index }) => {
     if (isLoading) {
-      return skeletonComponent ?? <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />;
+      return (
+        skeletonComponent ?? (
+          <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />
+        )
+      );
     }
 
     if (renderItem) return renderItem(item, index);
@@ -159,7 +195,13 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             <Text numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
-            <Text numberOfLines={5} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+            <Text
+              numberOfLines={5}
+              style={[
+                styles.detailedDesc,
+                { color: appliedTheme.colors.textSecondary },
+              ]}
+            >
               {item?.content?.description}
             </Text>
           </View>
@@ -168,8 +210,16 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
     }
 
     return (
-      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
-        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      <TouchableOpacity
+        key={item._id || index}
+        onPress={() => onPressItem?.(item)}
+        activeOpacity={0.8}
+      >
+        <CardPoster
+          theme={appliedTheme}
+          isLoading={isLoading}
+          posterUri={item?.content?.poster}
+        />
       </TouchableOpacity>
     );
   };
@@ -186,10 +236,17 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           theme={appliedTheme}
           titleStyle={{
             ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
-            color: appliedTheme.colors.onBackground
+            color: appliedTheme.colors.onBackground,
           }}
           onRightPress={onSearchPress}
-          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+          rightIcon={
+            showSearchIcon ? (
+              <Search
+                size={scale(23)}
+                color={appliedTheme.colors.onBackground}
+              />
+            ) : undefined
+          }
         />
       )}
 
@@ -202,7 +259,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             keyExtractor={(item, index) => item._id || `item-${index}`}
             style={listStyle}
             showsVerticalScrollIndicator={false}
-            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            contentContainerStyle={[
+              styles.contentContainerFlatStyle,
+              contentContainerStyle,
+            ]}
             renderItem={renderGridItem}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -213,7 +273,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             keyExtractor={(item, index) => item._id || `item-${index}`}
             renderItem={renderGridItem}
             style={listStyle}
-            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            contentContainerStyle={[
+              styles.contentContainerFlatStyle,
+              contentContainerStyle,
+            ]}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
             showsVerticalScrollIndicator={false}
@@ -232,19 +295,19 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
   noData: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   noDataText: {
     fontSize: RFValue(13),
-    opacity: 0.5
+    opacity: 0.5,
   },
   contentContainerFlatStyle: {
-    paddingBottom: scale(50)
+    paddingBottom: scale(50),
   },
   thumbnailWrapper: {
     width: scale(150),
@@ -252,38 +315,38 @@ const styles = StyleSheet.create({
     borderRadius: scale(6),
     overflow: 'hidden',
     backgroundColor: '#222',
-    alignSelf: 'stretch'
+    alignSelf: 'stretch',
   },
   thumbnailImage: {
     width: '100%',
     height: '100%',
-    borderRadius: 0
+    borderRadius: 0,
   },
   detailedItem: {
     flexDirection: 'row',
     marginVertical: scale(6),
     paddingHorizontal: scale(10),
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
   },
   detailedPoster: {
     width: scale(80),
     height: scale(120),
-    borderRadius: scale(6)
+    borderRadius: scale(6),
   },
   detailedInfo: {
     flex: 1,
-    marginLeft: scale(5)
+    marginLeft: scale(5),
   },
   detailedTitle: {
     fontSize: RFValue(11),
-    fontWeight: '500'
+    fontWeight: '500',
   },
   detailedDesc: {
     fontSize: RFValue(9),
     textAlign: 'auto',
     fontWeight: '400',
-    marginTop: scale(1)
-  }
+    marginTop: scale(1),
+  },
 });
 
 export namespace WatchLater {

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

@@ -12,7 +12,11 @@ type UserAvatarProps = {
   theme?: AppTheme;
 };
 
-const UserAvatar: React.FC<UserAvatarProps> = ({ avatarUri, size = scale(80), theme }) => {
+const UserAvatar: React.FC<UserAvatarProps> = ({
+  avatarUri,
+  size = scale(80),
+  theme,
+}) => {
   const [imageError, setImageError] = useState(false);
   const { theme: appliedTheme } = useTheme(theme);
   const borderColor = appliedTheme.colors.primary;
@@ -32,12 +36,12 @@ export default UserAvatar;
 const styles = (size: number) =>
   StyleSheet.create({
     wrapper: {
-      position: 'relative'
+      position: 'relative',
     },
     avatar: {
       width: size,
       height: size,
       borderRadius: size / 2,
-      borderWidth: scale(1.5)
-    }
+      borderWidth: scale(1.5),
+    },
   });

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

@@ -42,7 +42,7 @@ const UserSection: React.FC<UserSectionProps> = ({
   theme,
   avatarComponent,
   skeletonProps = {},
-  userInfoTextStyle = {}
+  userInfoTextStyle = {},
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   if (!userInfo) return null;
@@ -80,17 +80,18 @@ const UserSection: React.FC<UserSectionProps> = ({
                   styles.editButton,
                   {
                     borderColor: appliedTheme.colors.primary,
-                    backgroundColor: appliedTheme.colors.white,
-                    shadowColor: appliedTheme.colors.surface
-                  }
+                    backgroundColor: appliedTheme.colors.surfaceVariant,
+                    shadowColor: appliedTheme.colors.surface,
+                  },
                 ]}
                 android_ripple={{
-                  color: appliedTheme.colors.surfaceDisabled
+                  color: appliedTheme.colors.surfaceDisabled,
                 }}
               >
-                <View style={styles.editContent}>
-                  <Edit3 size={moderateScale(14)} color={appliedTheme.colors.primary} />
-                </View>
+                <Edit3
+                  size={moderateScale(13)}
+                  color={appliedTheme.colors.primary}
+                />
               </Pressable>
             )}
           </>
@@ -98,12 +99,24 @@ const UserSection: React.FC<UserSectionProps> = ({
       </View>
 
       {userInfo.name && (
-        <Text style={[styles.userName, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.nameStyle]}>
+        <Text
+          style={[
+            styles.userName,
+            { color: appliedTheme.colors.onBackground },
+            userInfoTextStyle.nameStyle,
+          ]}
+        >
           {userInfo.name}
         </Text>
       )}
       {userInfo.emailOrPhone && (
-        <Text style={[styles.userEmail, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.emailStyle]}>
+        <Text
+          style={[
+            styles.userEmail,
+            { color: appliedTheme.colors.onBackground },
+            userInfoTextStyle.emailStyle,
+          ]}
+        >
           {userInfo.emailOrPhone}
         </Text>
       )}
@@ -119,17 +132,19 @@ const styles = {
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: verticalScale(10),
-    height: verticalScale(200)
+    height: verticalScale(200),
   } as ViewStyle,
   avatarWrapper: {
-    position: 'relative'
+    position: 'relative',
   } as ViewStyle,
   editButton: {
     position: 'absolute',
     bottom: scale(2),
     right: scale(2),
-    width: scale(22),
-    height: scale(22),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    overflow: 'hidden',
     borderRadius: scale(11),
     alignItems: 'center',
     justifyContent: 'center',
@@ -137,46 +152,43 @@ const styles = {
     elevation: 1,
     shadowOffset: { width: 0, height: 0.5 },
     shadowOpacity: 0.1,
-    shadowRadius: 0.5
-  } as ViewStyle,
-  editContent: {
-    alignItems: 'center',
-    justifyContent: 'center'
+    shadowRadius: 0.5,
   } as ViewStyle,
+
   editLabel: {
     fontSize: RFValue(8),
     marginTop: verticalScale(1),
     fontWeight: '500',
-    lineHeight: moderateScale(12)
+    lineHeight: moderateScale(12),
   } as TextStyle,
   userName: {
     fontSize: RFValue(15),
     fontWeight: '600',
     marginTop: verticalScale(10),
-    marginBottom: verticalScale(2)
+    marginBottom: verticalScale(2),
   } as TextStyle,
   userEmail: {
     fontSize: RFValue(13),
-    opacity: 0.7
+    opacity: 0.7,
   } as TextStyle,
   skeletonWrapper: {
-    alignItems: 'center'
+    alignItems: 'center',
   } as ViewStyle,
   skeletonAvatar: {
     width: scale(80),
     height: scale(80),
     borderRadius: scale(40),
-    marginBottom: verticalScale(12)
+    marginBottom: verticalScale(12),
   } as ViewStyle,
   skeletonName: {
     width: scale(120),
     height: verticalScale(18),
     borderRadius: moderateScale(4),
-    marginBottom: verticalScale(6)
+    marginBottom: verticalScale(6),
   } as ViewStyle,
   skeletonEmail: {
     width: scale(160),
     height: verticalScale(14),
-    borderRadius: moderateScale(4)
-  } as ViewStyle
+    borderRadius: moderateScale(4),
+  } as ViewStyle,
 };

package/src/components/User/index.ts

@@ -6,4 +6,6 @@
 import { WatchHistory } from './WatchHistory/WatchHistory';
 import { WatchLater } from './WatchLater/WatchLater';
 import { DeviceSessions } from './DeviceSessions/DeviceSessions';
-export { WatchHistory, WatchLater, DeviceSessions };
+import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
+
+export { WatchHistory, WatchLater, DeviceSessions, ProfileUpdate };

package/src/components/View/View.tsx

@@ -3,14 +3,23 @@
  * @lastModified Mon 07 Jul 2025 at 11:49 AM
  */
 import React from 'react';
-import { View as RNView, type ViewProps as RNViewProps, type ViewStyle } from 'react-native';
+import {
+  View as RNView,
+  type ViewProps as RNViewProps,
+  type ViewStyle,
+} from 'react-native';
 
 export type ViewProps = RNViewProps & {
   style?: ViewStyle;
   backgroundColor?: string;
 };
 
-export const View: React.FC<ViewProps> = ({ style, backgroundColor = 'transparent', children, ...rest }) => {
+export const View: React.FC<ViewProps> = ({
+  style,
+  backgroundColor = 'transparent',
+  children,
+  ...rest
+}) => {
   return (
     <RNView style={[style, { backgroundColor }]} {...rest}>
       {children}

package/src/components/index.ts

@@ -21,3 +21,5 @@ export * from './BlogView';
 export * from './ContentView';
 export * from './Search';
 export * from './Subscription';
+export * from './Alert';
+export * from './Reels';

package/src/components/layout/SafeAreaWrapper.tsx

@@ -17,12 +17,18 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
   style,
   theme,
   edges = ['top'],
-  fallbackBackground = '#fff'
+  fallbackBackground = '#fff',
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const containerStyle = useMemo(() => {
-    return [styles.container, { backgroundColor: appliedTheme?.colors?.background || fallbackBackground }, style];
+    return [
+      styles.container,
+      {
+        backgroundColor: appliedTheme?.colors?.background || fallbackBackground,
+      },
+      style,
+    ];
   }, [appliedTheme.colors.background, fallbackBackground, style]);
 
   return (
@@ -34,6 +40,6 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
-  }
+    flex: 1,
+  },
 });

package/src/constants/dummySections.ts

@@ -1,6 +1,8 @@
 import type { IGetSectionData } from '../types';
 
-const generateDummySection = (type: IGetSectionData['type']): IGetSectionData => {
+const generateDummySection = (
+  type: IGetSectionData['type']
+): IGetSectionData => {
   return {
     _id: `dummy-${type}`,
     name: `Loading ${type.charAt(0).toUpperCase() + type.slice(1)}`,
@@ -9,7 +11,7 @@ const generateDummySection = (type: IGetSectionData['type']): IGetSectionData =>
     category: {
       _id: 'dummy-cat-id',
       name: 'Dummy',
-      slug: 'dummy'
+      slug: 'dummy',
     },
     content: {
       data: Array(5).fill({ id: '', order: 0 }),
@@ -20,15 +22,15 @@ const generateDummySection = (type: IGetSectionData['type']): IGetSectionData =>
           page: 1,
           hasNextPage: true,
           length: 5,
-          nextPage: 2
-        }
-      }
+          nextPage: 2,
+        },
+      },
     },
     label: '',
     order: 0,
     status: false,
     createdAt: new Date(),
-    updatedAt: new Date()
+    updatedAt: new Date(),
   };
 };
 
@@ -41,5 +43,5 @@ export const dummySections: IGetSectionData[] = [
   generateDummySection('card_style_4'),
   generateDummySection('card_style_5'),
   generateDummySection('card_style_6'),
-  generateDummySection('top_10')
+  generateDummySection('top_10'),
 ];

package/src/hooks/useDebounce.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 
-export const useDebounce = (callback: (value: string) => void, delay: number) => {
+export const useDebounce = (
+  callback: (value: string) => void,
+  delay: number
+) => {
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
   return React.useCallback(