@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

package/src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Text as RNText,
   type TextProps as RNTextProps,
@@ -37,38 +37,49 @@ const Text: React.FC<TextProps> = ({
 }) => {
   const { theme } = useInternalTheme(overrideTheme);
 
-  // Define default styles for each type
-  const typeStyles: Record<
-    string,
-    { size: number; weight: TextStyle['fontWeight']; color?: string }
-  > = {
-    title: { size: 18, weight: '700', color: theme.colors.textPrimary },
-    subtitle: { size: 14, weight: '500', color: theme.colors.textSecondary },
-    body: { size: 12, weight: '400', color: theme.colors.textPrimary },
-    caption: { size: 10, weight: '400', color: theme.colors.textSecondary },
-  };
+  // Memoize default styles for each type
+  const typeStyles = useMemo<
+    Record<
+      string,
+      { size: number; weight: TextStyle['fontWeight']; color?: string }
+    >
+  >(
+    () => ({
+      title: { size: 18, weight: '700', color: theme.colors.textPrimary },
+      subtitle: { size: 14, weight: '500', color: theme.colors.textSecondary },
+      body: { size: 12, weight: '400', color: theme.colors.textPrimary },
+      caption: { size: 10, weight: '400', color: theme.colors.textSecondary },
+    }),
+    [theme.colors.textPrimary, theme.colors.textSecondary]
+  );
 
   const typeStyle = typeStyles[type] || typeStyles.body;
 
+  // Memoize computed style
+  const computedStyle = useMemo(
+    () => [
+      {
+        color: color ?? typeStyle?.color,
+        fontSize: size ? RFValue(size) : RFValue(Number(typeStyle?.size)),
+        fontWeight: weight ?? typeStyle?.weight,
+        textAlign: align,
+        fontFamily,
+      },
+      style,
+    ],
+    [color, typeStyle, size, weight, align, fontFamily, style]
+  );
+
   return (
     <RNText
       {...rest}
       allowFontScaling={allowFontScaling}
       numberOfLines={numberOfLines}
-      style={[
-        {
-          color: color ?? typeStyle?.color,
-          fontSize: size ? RFValue(size) : RFValue(Number(typeStyle?.size)),
-          fontWeight: weight ?? typeStyle?.weight,
-          textAlign: align,
-          fontFamily,
-        },
-        style,
-      ]}
+      style={computedStyle}
     >
       {children}
     </RNText>
   );
 };
 
-export default Text;
+export default React.memo(Text);

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

@@ -3,7 +3,7 @@
  * @lastModified Mon 30 Jun 2025 at 05:00 PM
  */
 
-import React from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -79,7 +79,7 @@ type IDeviceSessionsProps = {
   isLoadingLogout?: boolean;
 };
 
-export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
+const DeviceSessionsComponent: React.FC<IDeviceSessionsProps> = ({
   sessions,
   activeSessionId,
   onLogout,
@@ -116,26 +116,9 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     cannotLogoutThisDeviceMessage = 'You cannot log out of this device.',
   } = textLabels || {};
 
-  const renderItem = ({
-    item,
-  }: {
-    item: ISessions;
-  }): React.ReactElement | null => {
-    const isActive = item?.id === activeSessionId;
-    const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
-    if (renderContent) {
-      return (
-        (renderContent({
-          session: item,
-          isActive,
-        }) as React.ReactElement) ?? null
-      );
-    }
-
-    const { name = 'Device', browser, location } = item.deviceInfo || {};
-    const hasLocation = location?.city || location?.state || location?.country;
-    const handleLogoutPress = () => {
-      if (isActive) {
+  const handleLogoutPress = useCallback(
+    (item: ISessions) => {
+      if (item.id === activeSessionId) {
         Alert.alert(
           cannotLogoutThisDeviceTitle,
           cannotLogoutThisDeviceMessage,
@@ -148,94 +131,136 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
       }
       setLogoutSessionId(item.id);
       onLogout({ session: item });
-    };
-    return (
-      <View
-        style={[
-          styles.deviceRow,
-          {
-            backgroundColor: colors.surfaceVariant,
-            borderColor: colors.outlineVariant ?? colors.outline,
-            shadowColor: colors.shadow ?? '#000',
-          },
-        ]}
-      >
-        <View style={styles.deviceInfo}>
-          {(name || isActive) && (
-            <View style={styles.deviceRowHeader}>
-              {name && (
-                <Text
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                  style={[styles.deviceName, { color: colors.onSurface }]}
-                >
-                  {name}
-                </Text>
-              )}
-              {isActive && (
-                <View
-                  style={[styles.badge, { backgroundColor: colors.button }]}
-                >
+    },
+    [
+      activeSessionId,
+      cannotLogoutThisDeviceTitle,
+      cannotLogoutThisDeviceMessage,
+      onLogout,
+    ]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: ISessions }): React.ReactElement | null => {
+      const isActive = item?.id === activeSessionId;
+      const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
+      if (renderContent) {
+        return (
+          (renderContent({
+            session: item,
+            isActive,
+          }) as React.ReactElement) ?? null
+        );
+      }
+
+      const { name = 'Device', browser, location } = item.deviceInfo || {};
+      const hasLocation =
+        location?.city || location?.state || location?.country;
+
+      return (
+        <View
+          style={[
+            styles.deviceRow,
+            {
+              backgroundColor: colors.surfaceVariant,
+              borderColor: colors.outlineVariant ?? colors.outline,
+              shadowColor: colors.shadow ?? '#000',
+            },
+          ]}
+        >
+          <View style={styles.deviceInfo}>
+            {(name || isActive) && (
+              <View style={styles.deviceRowHeader}>
+                {name && (
                   <Text
                     numberOfLines={1}
-                    style={[styles.badgeText, { color: colors.buttonText }]}
+                    ellipsizeMode="tail"
+                    style={[styles.deviceName, { color: colors.onSurface }]}
                   >
-                    {thisDevice}
+                    {name}
                   </Text>
-                </View>
-              )}
-            </View>
-          )}
+                )}
+                {isActive && (
+                  <View
+                    style={[styles.badge, { backgroundColor: colors.button }]}
+                  >
+                    <Text
+                      numberOfLines={1}
+                      style={[styles.badgeText, { color: colors.buttonText }]}
+                    >
+                      {thisDevice}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            )}
 
-          {(browser || hasLocation) && (
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
-            >
-              {browser}
-              {browser && hasLocation ? ' · ' : ''}
-              {hasLocation &&
-                [location?.city, location?.state, location?.country]
-                  .filter(Boolean)
-                  .join(', ')}
-            </Text>
-          )}
+            {(browser || hasLocation) && (
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+              >
+                {browser}
+                {browser && hasLocation ? ' · ' : ''}
+                {hasLocation &&
+                  [location?.city, location?.state, location?.country]
+                    .filter(Boolean)
+                    .join(', ')}
+              </Text>
+            )}
 
-          {item?.lastActivity && (
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+            {item?.lastActivity && (
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+              >
+                {lastActivePrefix}{' '}
+                {new Date(item.lastActivity).toLocaleString()}
+              </Text>
+            )}
+          </View>
+
+          {renderLogoutButton ? (
+            renderLogoutButton({
+              session: item,
+            })
+          ) : (
+            <TouchableOpacity
+              style={[styles.logoutButton, { borderColor: colors.border }]}
+              disabled={isLoggingOut}
+              activeOpacity={0.7}
+              onPress={() => handleLogoutPress(item)}
             >
-              {lastActivePrefix} {new Date(item.lastActivity).toLocaleString()}
-            </Text>
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[styles.logoutText, { color: colors.primary }]}
+              >
+                {isLoggingOut ? loadingLogoutText : logOut}
+              </Text>
+            </TouchableOpacity>
           )}
         </View>
+      );
+    },
+    [
+      activeSessionId,
+      isLoadingLogout,
+      logoutSessionId,
+      renderContent,
+      colors,
+      thisDevice,
+      lastActivePrefix,
+      renderLogoutButton,
+      loadingLogoutText,
+      logOut,
+      handleLogoutPress,
+    ]
+  );
 
-        {renderLogoutButton ? (
-          renderLogoutButton({
-            session: item,
-          })
-        ) : (
-          <TouchableOpacity
-            style={[styles.logoutButton, { borderColor: colors.border }]}
-            disabled={isLoggingOut}
-            activeOpacity={0.7}
-            onPress={handleLogoutPress}
-          >
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[styles.logoutText, { color: colors.primary }]}
-            >
-              {isLoggingOut ? loadingLogoutText : logOut}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  };
+  const keyExtractor = useCallback((item: ISessions) => item.id, []);
 
   const renderSkeleton = () => {
     return (
@@ -294,7 +319,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
       </View>
     );
   };
-  const sortedSessions = React.useMemo(() => {
+  const sortedSessions = useMemo(() => {
     if (!sessions?.length) return [];
     return [...sessions].sort((a, b) => {
       if (a.id === activeSessionId) return -1;
@@ -332,7 +357,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
       ) : (
         <FlatList
           data={sortedSessions}
-          keyExtractor={(item) => item.id}
+          keyExtractor={keyExtractor}
           renderItem={renderItem}
           contentContainerStyle={styles.listContent}
           ListEmptyComponent={
@@ -352,6 +377,8 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   );
 };
 
+export const DeviceSessions = memo(DeviceSessionsComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Fri 03 Oct 2025 at 01:09 PM
  */
-import { useCallback } from 'react';
+import { useCallback, memo, useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -41,7 +41,7 @@ export type ProfileUpdateProps = {
   onError?: (error: { message: string }) => void;
 };
 
-export const ProfileUpdate = ({
+const ProfileUpdateComponent = ({
   title = 'My Profile',
   name = '',
   avatarUri = '',
@@ -72,7 +72,34 @@ export const ProfileUpdate = ({
 
   const avatar = watch('avatarFile');
 
-  const handlePickImage = async () => {
+  const containerStyle = useMemo(
+    () => [styles.container, { backgroundColor: colors.background }],
+    [colors.background]
+  );
+
+  const cameraBtnStyle = useMemo(
+    () => [
+      styles.cameraBtn,
+      {
+        borderColor: colors.primary,
+        backgroundColor: colors.surfaceVariant,
+        shadowColor: colors.shadow || colors.surface,
+      },
+    ],
+    [colors.primary, colors.surfaceVariant, colors.shadow, colors.surface]
+  );
+
+  const labelStyle = useMemo(
+    () => [styles.label, { color: colors.textPrimary }],
+    [colors.textPrimary]
+  );
+
+  const errorTextStyle = useMemo(
+    () => [styles.errorText, { color: colors.error }],
+    [colors.error]
+  );
+
+  const handlePickImage = useCallback(async () => {
     try {
       const image = await ImageCropPicker.openPicker({
         width: 400,
@@ -97,7 +124,7 @@ export const ProfileUpdate = ({
       const message = (error as Error).message;
       onError?.({ message });
     }
-  };
+  }, [avatarUri, setValue, onError]);
 
   const handleFormSubmit = useCallback(
     (data: ProfileUpdateFormValues) => {
@@ -116,7 +143,7 @@ export const ProfileUpdate = ({
 
   return (
     <KeyboardAvoidingView
-      style={[styles.container, { backgroundColor: colors.background }]}
+      style={containerStyle}
       behavior={Platform.OS === 'ios' ? 'padding' : undefined}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
@@ -132,14 +159,7 @@ export const ProfileUpdate = ({
             <View style={styles.avatarBox}>
               <UserAvatar avatarUri={avatar?.path} theme={theme} size={100} />
               <TouchableOpacity
-                style={[
-                  styles.cameraBtn,
-                  {
-                    borderColor: colors.primary,
-                    backgroundColor: colors.surfaceVariant,
-                    shadowColor: colors.shadow || colors.surface,
-                  },
-                ]}
+                style={cameraBtnStyle}
                 activeOpacity={0.8}
                 onPress={handlePickImage}
               >
@@ -151,9 +171,7 @@ export const ProfileUpdate = ({
               </TouchableOpacity>
             </View>
 
-            <Text style={[styles.label, { color: colors.textPrimary }]}>
-              Basic Detail
-            </Text>
+            <Text style={labelStyle}>Basic Detail</Text>
 
             <View style={styles.formContainer}>
               <Controller
@@ -181,7 +199,7 @@ export const ProfileUpdate = ({
                       onSubmitEditing={handleSubmit(handleFormSubmit)}
                     />
                     {errors.fullName && (
-                      <Text style={[styles.errorText, { color: colors.error }]}>
+                      <Text style={errorTextStyle}>
                         {errors.fullName.message}
                       </Text>
                     )}
@@ -205,6 +223,7 @@ export const ProfileUpdate = ({
   );
 };
 
+export const ProfileUpdate = memo(ProfileUpdateComponent);
 export default ProfileUpdate;
 
 namespace ProfileUpdate {