@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 1.1.3

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

@@ -3,7 +3,7 @@
  * @lastModified Tue 24 Jun 2025 at 10:15 PM
  **/
 
-import React from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -67,7 +67,7 @@ export type WatchLaterProps = {
 const DefaultSkeleton: React.FC<{
   theme: ITheme;
   viewMode: 'poster' | 'detailed';
-}> = ({ theme, viewMode }) => {
+}> = memo(({ theme, viewMode }) => {
   if (viewMode === 'detailed') {
     return (
       <SkeletonPlaceholder
@@ -124,9 +124,11 @@ const DefaultSkeleton: React.FC<{
       />
     </SkeletonPlaceholder>
   );
-};
+});
 
-export const WatchLater: React.FC<WatchLaterProps> = ({
+DefaultSkeleton.displayName = 'DefaultSkeleton';
+
+const WatchLaterComponent: React.FC<WatchLaterProps> = ({
   data = [],
   isLoading = false,
   title = 'Watch Later',
@@ -152,79 +154,122 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const listData = isLoading
-    ? (Array.from({ length: skeletonCount }, (_, i) => ({
-        _id: `skeleton-${i}`,
-        content: {
-          name: '',
-          description: '',
-          poster: '',
-          thumbnail: '',
-        },
-      })) as any)
-    : data;
+  const listData = useMemo(
+    () =>
+      isLoading
+        ? (Array.from({ length: skeletonCount }, (_, i) => ({
+            _id: `skeleton-${i}`,
+            content: {
+              name: '',
+              description: '',
+              poster: '',
+              thumbnail: '',
+            },
+          })) as any)
+        : data,
+    [isLoading, skeletonCount, data]
+  );
 
-  const renderGridItem: ListRenderItem<IWatchLaterItem> = ({ item, index }) => {
-    if (isLoading) {
-      return (
-        skeletonComponent ?? (
-          <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />
-        )
-      );
-    }
+  const handleItemPress = useCallback(
+    (item: IWatchLaterItem) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+
+  const detailedDescStyle = useMemo(
+    () => [styles.detailedDesc, { color: appliedTheme.colors.textSecondary }],
+    [appliedTheme.colors.textSecondary]
+  );
+
+  const renderGridItem: ListRenderItem<IWatchLaterItem> = useCallback(
+    ({ item, index }) => {
+      if (isLoading) {
+        return (
+          skeletonComponent ?? (
+            <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />
+          )
+        );
+      }
 
-    if (renderItem) return renderItem(item, index);
+      if (renderItem) return renderItem(item, index);
+
+      if (viewMode === 'detailed') {
+        return (
+          <TouchableOpacity
+            key={item._id}
+            onPress={() => handleItemPress(item)}
+            activeOpacity={0.8}
+            style={styles.detailedItem}
+          >
+            <View style={styles.thumbnailWrapper}>
+              <ThumbnailCard
+                theme={appliedTheme}
+                isLoading={false}
+                thumbnailUri={item?.content?.thumbnail}
+                wrapperStyle={styles.thumbnailImage}
+              />
+            </View>
+            <View style={styles.detailedInfo}>
+              <Text
+                theme={theme}
+                numberOfLines={1}
+                style={styles.detailedTitle}
+              >
+                {item?.content?.name}
+              </Text>
+              <Text theme={theme} numberOfLines={5} style={detailedDescStyle}>
+                {item?.content?.description}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      }
 
-    if (viewMode === 'detailed') {
       return (
         <TouchableOpacity
-          key={item._id}
-          onPress={() => onPressItem?.(item)}
+          key={item._id || index}
+          onPress={() => handleItemPress(item)}
           activeOpacity={0.8}
-          style={styles.detailedItem}
         >
-          <View style={styles.thumbnailWrapper}>
-            <ThumbnailCard
-              theme={appliedTheme}
-              isLoading={false}
-              thumbnailUri={item?.content?.thumbnail}
-              wrapperStyle={styles.thumbnailImage}
-            />
-          </View>
-          <View style={styles.detailedInfo}>
-            <Text theme={theme} numberOfLines={1} style={styles.detailedTitle}>
-              {item?.content?.name}
-            </Text>
-            <Text
-              theme={theme}
-              numberOfLines={5}
-              style={[
-                styles.detailedDesc,
-                { color: appliedTheme.colors.textSecondary },
-              ]}
-            >
-              {item?.content?.description}
-            </Text>
-          </View>
+          <CardPoster
+            content_offering_type={item?.content?.content_offering_type}
+            theme={appliedTheme}
+            isLoading={isLoading}
+            posterUri={item?.content?.poster}
+          />
         </TouchableOpacity>
       );
-    }
+    },
+    [
+      isLoading,
+      skeletonComponent,
+      appliedTheme,
+      viewMode,
+      renderItem,
+      handleItemPress,
+      theme,
+      detailedDescStyle,
+    ]
+  );
 
-    return (
-      <TouchableOpacity
-        key={item._id || index}
-        onPress={() => onPressItem?.(item)}
-        activeOpacity={0.8}
-      >
-        <CardPoster
-          content_offering_type={item?.content?.content_offering_type}
-          theme={appliedTheme}
-          isLoading={isLoading}
-          posterUri={item?.content?.poster}
-        />
-      </TouchableOpacity>
-    );
-  };
+  const keyExtractor = useCallback(
+    (item: IWatchLaterItem, index: number) => item._id || `item-${index}`,
+    []
+  );
+
+  const contentContainerStyleMemo = useMemo(
+    () => [styles.contentContainerFlatStyle, contentContainerStyle],
+    [contentContainerStyle]
+  );
+
+  const titleStyleMemo = useMemo(
+    () => ({
+      ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
+      color: appliedTheme.colors.onBackground,
+    }),
+    [titleStyle, appliedTheme.colors.onBackground]
+  );
 
   return (
     <View style={styles.container}>
@@ -236,10 +281,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           title={title}
           titleAlign="left"
           theme={theme}
-          titleStyle={{
-            ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
-            color: appliedTheme.colors.onBackground,
-          }}
+          titleStyle={titleStyleMemo}
           onRightPress={onSearchPress}
           rightIcon={
             showSearchIcon ? (
@@ -258,13 +300,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             itemDimension={itemDimension}
             spacing={spacing}
             data={listData}
-            keyExtractor={(item, index) => item._id || `item-${index}`}
+            keyExtractor={keyExtractor}
             style={listStyle}
             showsVerticalScrollIndicator={false}
-            contentContainerStyle={[
-              styles.contentContainerFlatStyle,
-              contentContainerStyle,
-            ]}
+            contentContainerStyle={contentContainerStyleMemo}
             renderItem={renderGridItem}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -272,13 +311,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
         ) : (
           <FlatList
             data={listData}
-            keyExtractor={(item, index) => item._id || `item-${index}`}
+            keyExtractor={keyExtractor}
             renderItem={renderGridItem}
             style={listStyle}
-            contentContainerStyle={[
-              styles.contentContainerFlatStyle,
-              contentContainerStyle,
-            ]}
+            contentContainerStyle={contentContainerStyleMemo}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
             showsVerticalScrollIndicator={false}
@@ -295,6 +331,8 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
   );
 };
 
+export const WatchLater = memo(WatchLaterComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Fri 17 Oct 2025 at 10:16 PM
  */
-import React, { useState } from 'react';
+import React, { useState, memo, useMemo, useCallback } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
@@ -17,7 +17,7 @@ type UserAvatarProps = {
   theme?: ThemeOverride;
 };
 
-const UserAvatar: React.FC<UserAvatarProps> = ({
+const UserAvatarComponent: React.FC<UserAvatarProps> = ({
   avatarUri,
   size = scale(80),
   theme,
@@ -26,38 +26,71 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   const [imageError, setImageError] = useState(false);
   const [loading, setLoading] = useState(!!avatarUri);
 
-  const borderColor = appliedTheme.colors.primary || '#ccc';
-  const skeletonBaseColor = appliedTheme.colors.skeletonBaseColor || '#E0E0E0';
-  const skeletonHighlightColor =
-    appliedTheme.colors.skeletonHighlightColor || '#F5F5F5';
+  // Memoize colors
+  const borderColor = useMemo(
+    () => appliedTheme.colors.primary || '#ccc',
+    [appliedTheme.colors.primary]
+  );
+
+  const skeletonBaseColor = useMemo(
+    () => appliedTheme.colors.skeletonBaseColor || '#E0E0E0',
+    [appliedTheme.colors.skeletonBaseColor]
+  );
 
-  const handleError = () => {
+  const skeletonHighlightColor = useMemo(
+    () => appliedTheme.colors.skeletonHighlightColor || '#F5F5F5',
+    [appliedTheme.colors.skeletonHighlightColor]
+  );
+
+  // Memoize handlers
+  const handleError = useCallback(() => {
     setImageError(true);
     setLoading(false);
-  };
+  }, []);
+
+  const handleLoadStart = useCallback(() => {
+    setLoading(true);
+  }, []);
+
+  const handleLoadEnd = useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  // Memoize image source
+  const imageSource = useMemo(
+    () => (imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }),
+    [imageError, avatarUri]
+  );
+
+  // Memoize styles
+  const avatarStyles = useMemo(() => styles(size), [size]);
+  const avatarImageStyle = useMemo(
+    () => [avatarStyles.avatar, { borderColor, position: 'absolute' as const }],
+    [avatarStyles.avatar, borderColor]
+  );
 
-  const handleLoadStart = () => setLoading(true);
-  const handleLoadEnd = () => setLoading(false);
+  // Memoize skeleton borderRadius
+  const skeletonBorderRadius = useMemo(() => size / 2, [size]);
 
   return (
-    <View style={styles(size).wrapper}>
+    <View style={avatarStyles.wrapper}>
       {loading && (
         <SkeletonPlaceholder
           backgroundColor={skeletonBaseColor}
           highlightColor={skeletonHighlightColor}
-          borderRadius={size / 2}
+          borderRadius={skeletonBorderRadius}
         >
           <SkeletonPlaceholder.Item
             width={size}
             height={size}
-            borderRadius={size / 2}
+            borderRadius={skeletonBorderRadius}
           />
         </SkeletonPlaceholder>
       )}
 
       <Image
-        source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
-        style={[styles(size).avatar, { borderColor, position: 'absolute' }]}
+        source={imageSource}
+        style={avatarImageStyle}
         onError={handleError}
         onLoadStart={handleLoadStart}
         onLoadEnd={handleLoadEnd}
@@ -66,6 +99,7 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   );
 };
 
+const UserAvatar = memo(UserAvatarComponent);
 export default UserAvatar;
 
 const styles = (size: number) =>

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Mon 23 Jun 2025 at 11:22 AM
  */
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, Pressable, type TextStyle, type ViewStyle } from 'react-native';
 import { Edit3 } from 'lucide-react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -35,7 +35,7 @@ interface UserSectionProps {
   userInfoTextStyle?: UserInfoTextStyle;
 }
 
-const UserSection: React.FC<UserSectionProps> = ({
+const UserSectionComponent: React.FC<UserSectionProps> = ({
   userInfo,
   isLoading,
   renderUserInfo,
@@ -45,6 +45,67 @@ const UserSection: React.FC<UserSectionProps> = ({
   userInfoTextStyle = {},
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
+
+  // Memoize skeleton colors
+  const skeletonColors = useMemo(
+    () => ({
+      backgroundColor: appliedTheme.colors.skeletonBaseColor,
+      highlightColor: appliedTheme.colors.skeletonHighlightColor,
+    }),
+    [
+      appliedTheme.colors.skeletonBaseColor,
+      appliedTheme.colors.skeletonHighlightColor,
+    ]
+  );
+
+  // Memoize edit button style
+  const editButtonStyle = useMemo(
+    () => [
+      styles.editButton,
+      {
+        borderColor: appliedTheme.colors.primary,
+        backgroundColor: appliedTheme.colors.surfaceVariant,
+        shadowColor: appliedTheme.colors.surface,
+      },
+    ],
+    [
+      appliedTheme.colors.primary,
+      appliedTheme.colors.surfaceVariant,
+      appliedTheme.colors.surface,
+    ]
+  );
+
+  // Memoize text styles
+  const userNameStyle = useMemo(
+    () => [
+      styles.userName,
+      { color: appliedTheme.colors.onBackground },
+      userInfoTextStyle.nameStyle,
+    ],
+    [appliedTheme.colors.onBackground, userInfoTextStyle.nameStyle]
+  );
+
+  const userEmailStyle = useMemo(
+    () => [
+      styles.userEmail,
+      { color: appliedTheme.colors.onBackground },
+      userInfoTextStyle.emailStyle,
+    ],
+    [appliedTheme.colors.onBackground, userInfoTextStyle.emailStyle]
+  );
+
+  // Memoize ripple color
+  const rippleColor = useMemo(
+    () => appliedTheme.colors.surfaceDisabled,
+    [appliedTheme.colors.surfaceDisabled]
+  );
+
+  // Memoize primary color
+  const primaryColor = useMemo(
+    () => appliedTheme.colors.primary,
+    [appliedTheme.colors.primary]
+  );
+
   if (!userInfo) return null;
   if (renderUserInfo) return renderUserInfo(userInfo);
 
@@ -52,8 +113,8 @@ const UserSection: React.FC<UserSectionProps> = ({
     return (
       <View style={styles.userInfoContainer}>
         <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={skeletonColors.backgroundColor}
+          highlightColor={skeletonColors.highlightColor}
           borderRadius={moderateScale(8)}
           {...skeletonProps}
         >
@@ -76,54 +137,27 @@ const UserSection: React.FC<UserSectionProps> = ({
             {userInfo.onEditPress && (
               <Pressable
                 onPress={userInfo.onEditPress}
-                style={[
-                  styles.editButton,
-                  {
-                    borderColor: appliedTheme.colors.primary,
-                    backgroundColor: appliedTheme.colors.surfaceVariant,
-                    shadowColor: appliedTheme.colors.surface,
-                  },
-                ]}
+                style={editButtonStyle}
                 android_ripple={{
-                  color: appliedTheme.colors.surfaceDisabled,
+                  color: rippleColor,
                 }}
               >
-                <Edit3
-                  size={moderateScale(13)}
-                  color={appliedTheme.colors.primary}
-                />
+                <Edit3 size={moderateScale(13)} color={primaryColor} />
               </Pressable>
             )}
           </>
         )}
       </View>
 
-      {userInfo.name && (
-        <Text
-          style={[
-            styles.userName,
-            { color: appliedTheme.colors.onBackground },
-            userInfoTextStyle.nameStyle,
-          ]}
-        >
-          {userInfo.name}
-        </Text>
-      )}
+      {userInfo.name && <Text style={userNameStyle}>{userInfo.name}</Text>}
       {userInfo.emailOrPhone && (
-        <Text
-          style={[
-            styles.userEmail,
-            { color: appliedTheme.colors.onBackground },
-            userInfoTextStyle.emailStyle,
-          ]}
-        >
-          {userInfo.emailOrPhone}
-        </Text>
+        <Text style={userEmailStyle}>{userInfo.emailOrPhone}</Text>
       )}
     </View>
   );
 };
 
+const UserSection = memo(UserSectionComponent);
 export default UserSection;
 
 // Styles

package/src/components/View/View.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Mon 07 Jul 2025 at 11:49 AM
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View as RNView,
   type ViewProps as RNViewProps,
@@ -21,9 +21,17 @@ export const View: React.FC<ViewProps> = ({
   children,
   ...rest
 }) => {
+  // Memoize style array to prevent unnecessary re-renders
+  const computedStyle = useMemo(
+    () => [style, backgroundColor !== 'transparent' && { backgroundColor }],
+    [style, backgroundColor]
+  );
+
   return (
-    <RNView style={[style, { backgroundColor }]} {...rest}>
+    <RNView style={computedStyle} {...rest}>
       {children}
     </RNView>
   );
 };
+
+export default React.memo(View);

package/src/components/index.ts

@@ -15,7 +15,6 @@ export * from './layout';
 export * from './Settings';
 export * from './Account';
 export * from './TabBar';
-export * from './Input/Input';
 export * from './Text';
 export * from './View';
 export * from './User';

package/src/constants/dummySections.ts

@@ -1,5 +1,50 @@
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 import type { IGetSectionData } from '../types';
 
+/**
+ * Creates a dummy content data object for skeleton loading states
+ */
+export const dummyContentData = (
+  id: string = 'dummy-content-id'
+): IContentData => {
+  return {
+    _id: id,
+    poster: '',
+    thumbnail: '',
+    content_offering_type: 'movie',
+    name: '',
+    slug: '',
+    u_age: '',
+    description: '',
+    release_date: '',
+    runtime: '',
+    duration: '',
+    genre: '',
+    director: '',
+    cast: [],
+    rating: '',
+    language: '',
+    subtitles: [],
+    audio_tracks: [],
+    type: 'movie',
+    year: '',
+    tags: [],
+    trailer: '',
+    trailer_source_link: '',
+    banner: '',
+    logo: '',
+    source_link: '',
+    source_type: '',
+    is_featured: false,
+    is_premium: false,
+    status: 'active',
+    views: 0,
+    likes: 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  } as unknown as IContentData;
+};
+
 const generateDummySection = (
   type: IGetSectionData['type']
 ): IGetSectionData => {
@@ -14,7 +59,9 @@ const generateDummySection = (
       slug: 'dummy',
     },
     content: {
-      data: Array(5).fill({ id: '', order: 0 }),
+      data: Array.from({ length: 5 }, (_, i) =>
+        dummyContentData(`dummy-content-${i}`)
+      ),
       meta: {
         pagination: {
           total: 5,

package/src/hooks/Images/index.ts

@@ -0,0 +1,2 @@
+export * from './useImageLoader';
+export * from './useImageValidation';