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

package/src/components/Settings/AppSettings.tsx

@@ -5,6 +5,9 @@
 
 import React, {
   useState,
+  useMemo,
+  useCallback,
+  memo,
   isValidElement,
   cloneElement,
   type FC,
@@ -85,8 +88,19 @@ const isToggleMenuItem = (item: MenuItem): item is ToggleMenuItem => {
   return item.isToggle === true;
 };
 
+// ✅ Helper function - moved outside component to avoid recreation
+const renderIconWithColor = (
+  icon: React.ReactNode,
+  color: string
+): React.ReactNode => {
+  if (isValidElement(icon)) {
+    return cloneElement(icon as ReactElement<any>, { color });
+  }
+  return icon;
+};
+
 // ✅ Main Component
-export const AppSettings: FC<AppSettingsProps> = ({
+const AppSettingsComponent: FC<AppSettingsProps> = ({
   title,
   titleAlign = 'center',
   userInfo,
@@ -108,150 +122,230 @@ export const AppSettings: FC<AppSettingsProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const insets = useSafeAreaInsets();
+
+  // ✅ Memoize initial toggle states
+  const initialToggleStates = useMemo(
+    () =>
+      menuItems.reduce<Record<string, boolean>>((acc, item) => {
+        if (isToggleMenuItem(item)) {
+          acc[item.key] = item.toggleValue ?? false;
+        }
+        return acc;
+      }, {}),
+    [menuItems]
+  );
+
   // ✅ State for toggle values
-  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
-    menuItems.reduce<Record<string, boolean>>((acc, item) => {
-      if (isToggleMenuItem(item)) {
-        acc[item.key] = item.toggleValue ?? false;
-      }
-      return acc;
-    }, {})
+  const [toggleStates, setToggleStates] =
+    useState<Record<string, boolean>>(initialToggleStates);
+
+  // ✅ Memoize menu items map for quick lookup
+  const menuItemsMap = useMemo(
+    () =>
+      menuItems.reduce<Record<string, MenuItem>>((acc, item) => {
+        acc[item.key] = item;
+        return acc;
+      }, {}),
+    [menuItems]
   );
 
-  // ✅ Handle toggle change
-  const handleToggleChange = (key: string, value: boolean) => {
-    setToggleStates((prev) => ({ ...prev, [key]: value }));
-    const item = menuItems.find((i) => i.key === key) as
-      | ToggleMenuItem
-      | undefined;
-    item?.onToggleChange?.(value);
-  };
-  const renderIconWithColor = (
-    icon: React.ReactNode,
-    color: string
-  ): React.ReactNode => {
-    if (isValidElement(icon)) {
-      return cloneElement(icon as ReactElement<any>, { color });
-    }
-    return icon;
-  };
-  const renderToggleMenuItem = (item: ToggleMenuItem) => {
-    return (
-      <View
-        key={item.key}
-        style={[
-          styles.menuItem,
-          {
-            backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border,
-          },
-          menuItemStyle.container,
-        ]}
-      >
-        <View style={styles.menuItemContent}>
+  // ✅ Handle toggle change - memoized
+  const handleToggleChange = useCallback(
+    (key: string, value: boolean) => {
+      setToggleStates((prev) => ({ ...prev, [key]: value }));
+      const item = menuItemsMap[key] as ToggleMenuItem | undefined;
+      item?.onToggleChange?.(value);
+    },
+    [menuItemsMap]
+  );
+  // ✅ Memoize style objects
+  const menuItemBaseStyle = useMemo(
+    () => [
+      styles.menuItem,
+      {
+        backgroundColor: appliedTheme.colors.surfaceDisabled,
+        borderColor: appliedTheme.colors.border,
+      },
+      menuItemStyle.container,
+    ],
+    [
+      appliedTheme.colors.surfaceDisabled,
+      appliedTheme.colors.border,
+      menuItemStyle.container,
+    ]
+  );
+
+  const menuLabelStyle = useMemo(
+    () => [
+      styles.menuLabel,
+      { color: appliedTheme.colors.onBackground },
+      menuItemStyle.label,
+    ],
+    [appliedTheme.colors.onBackground, menuItemStyle.label]
+  );
+
+  const menuIconStyle = useMemo(
+    () => [styles.menuIcon, menuItemStyle.icon],
+    [menuItemStyle.icon]
+  );
+
+  const switchTrackColor = useMemo(
+    () => ({
+      false: appliedTheme.colors.switchTrackColorDisabled,
+      true: appliedTheme.colors.switchTrackColor,
+    }),
+    [
+      appliedTheme.colors.switchTrackColorDisabled,
+      appliedTheme.colors.switchTrackColor,
+    ]
+  );
+
+  const textPrimaryColor = useMemo(
+    () => appliedTheme.colors.textPrimary,
+    [appliedTheme.colors.textPrimary]
+  );
+
+  // ✅ Memoized render functions
+  const renderToggleMenuItem = useCallback(
+    (item: ToggleMenuItem) => {
+      const toggleValue = toggleStates[item.key] ?? false;
+      const thumbColor = toggleValue
+        ? appliedTheme.colors.switchThumbColor
+        : appliedTheme.colors.switchThumbColorDisabled;
+
+      return (
+        <View key={item.key} style={menuItemBaseStyle}>
+          <View style={styles.menuItemContent}>
+            {item.icon && (
+              <View style={menuIconStyle}>
+                {renderIconWithColor(item.icon, textPrimaryColor)}
+              </View>
+            )}
+            <Text numberOfLines={1} style={menuLabelStyle}>
+              {item.label}
+            </Text>
+          </View>
+          <Switch
+            trackColor={switchTrackColor}
+            thumbColor={thumbColor}
+            value={toggleValue}
+            onValueChange={(value) => handleToggleChange(item.key, value)}
+            style={styles.switchStyle}
+          />
+        </View>
+      );
+    },
+    [
+      toggleStates,
+      menuItemBaseStyle,
+      menuIconStyle,
+      menuLabelStyle,
+      textPrimaryColor,
+      switchTrackColor,
+      appliedTheme.colors.switchThumbColor,
+      appliedTheme.colors.switchThumbColorDisabled,
+      handleToggleChange,
+    ]
+  );
+
+  const handleMenuItemPress = useCallback(
+    (item: PressableMenuItem) => {
+      item.onPress?.();
+      onMenuItemPress?.(item);
+    },
+    [onMenuItemPress]
+  );
+
+  const renderPressableMenuItem = useCallback(
+    (item: PressableMenuItem) => {
+      return (
+        <TouchableOpacity
+          key={item.key}
+          activeOpacity={0.6}
+          onPress={() => handleMenuItemPress(item)}
+          style={menuItemBaseStyle}
+        >
           {item.icon && (
-            <View style={[styles.menuIcon, menuItemStyle.icon]}>
-              {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
+            <View style={menuIconStyle}>
+              {renderIconWithColor(item.icon, textPrimaryColor)}
             </View>
           )}
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.menuLabel,
-              { color: appliedTheme.colors.onBackground },
-              menuItemStyle.label,
-            ]}
-          >
+          <Text numberOfLines={1} style={menuLabelStyle}>
             {item.label}
           </Text>
-        </View>
-        <Switch
-          trackColor={{
-            false: appliedTheme.colors.switchTrackColorDisabled,
-            true: appliedTheme.colors.switchTrackColor,
-          }}
-          thumbColor={
-            toggleStates[item.key]
-              ? appliedTheme.colors.switchThumbColor
-              : appliedTheme.colors.switchThumbColorDisabled
-          }
-          value={toggleStates[item.key]}
-          onValueChange={(value) => handleToggleChange(item.key, value)}
-          style={styles.switchStyle}
-        />
-      </View>
-    );
-  };
+        </TouchableOpacity>
+      );
+    },
+    [
+      menuItemBaseStyle,
+      menuIconStyle,
+      menuLabelStyle,
+      textPrimaryColor,
+      handleMenuItemPress,
+    ]
+  );
 
-  const renderPressableMenuItem = (item: PressableMenuItem) => {
-    return (
-      <TouchableOpacity
-        key={item.key}
-        activeOpacity={0.6}
-        onPress={() => {
-          item.onPress?.();
-          onMenuItemPress?.(item);
-        }}
-        style={[
-          styles.menuItem,
-          {
-            backgroundColor: appliedTheme.colors.surfaceDisabled,
-            borderColor: appliedTheme.colors.border,
-          },
-          menuItemStyle.container,
-        ]}
-      >
-        {item.icon && (
-          <View style={[styles.menuIcon, menuItemStyle.icon]}>
-            {renderIconWithColor(item.icon, appliedTheme.colors.textPrimary)}
-          </View>
-        )}
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.menuLabel,
-            { color: appliedTheme.colors.onBackground },
-            menuItemStyle.label,
-          ]}
-        >
-          {item.label}
-        </Text>
-      </TouchableOpacity>
-    );
-  };
+  const renderMenuItemDefault = useCallback(
+    (item: MenuItem) => {
+      return isToggleMenuItem(item)
+        ? renderToggleMenuItem(item)
+        : renderPressableMenuItem(item);
+    },
+    [renderToggleMenuItem, renderPressableMenuItem]
+  );
+
+  // ✅ Memoize container style
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { backgroundColor: appliedTheme.colors.background },
+    ],
+    [appliedTheme.colors.background]
+  );
 
-  const renderMenuItemDefault = (item: MenuItem) => {
-    return isToggleMenuItem(item)
-      ? renderToggleMenuItem(item)
-      : renderPressableMenuItem(item);
-  };
+  // ✅ Memoize scroll content style
+  const scrollContentStyle = useMemo(
+    () => [
+      styles.scrollContent,
+      { paddingBottom: verticalScale(100) + insets.bottom },
+    ],
+    [insets.bottom]
+  );
+
+  // ✅ Memoize version text style
+  const versionTextStyle = useMemo(
+    () => [styles.versionText, { color: appliedTheme.colors.onSurface }],
+    [appliedTheme.colors.onSurface]
+  );
+
+  // ✅ Memoize header title
+  const headerTitle = useMemo(() => title || 'Settings', [title]);
+
+  // ✅ Memoize should show header
+  const shouldShowHeader = useMemo(
+    () => !!(renderHeader || title || onBackPress),
+    [renderHeader, title, onBackPress]
+  );
 
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: appliedTheme.colors.background },
-      ]}
-    >
-      {(renderHeader || title || onBackPress) &&
+    <View style={containerStyle}>
+      {shouldShowHeader &&
         (renderHeader ? (
           renderHeader()
         ) : (
           <AppHeader
             style={headerStyle}
-            title={title || 'Settings'}
+            title={headerTitle}
             titleAlign={titleAlign}
             onBackPress={onBackPress}
             theme={theme}
           />
         ))}
       <ScrollView
-        contentContainerStyle={[
-          styles.scrollContent,
-          { paddingBottom: verticalScale(100) + insets.bottom },
-        ]}
+        contentContainerStyle={scrollContentStyle}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        removeClippedSubviews={true}
       >
         {userInfo && (
           <UserSection
@@ -277,20 +371,15 @@ export const AppSettings: FC<AppSettingsProps> = ({
         </View>
         {renderFooter?.()}
         <View style={styles.versionContainer}>
-          <Text
-            style={[
-              styles.versionText,
-              { color: appliedTheme.colors.onSurface },
-            ]}
-          >
-            {versionText}
-          </Text>
+          <Text style={versionTextStyle}>{versionText}</Text>
         </View>
       </ScrollView>
     </View>
   );
 };
 
+export const AppSettings = memo(AppSettingsComponent);
+
 // ✅ Styles
 const styles = StyleSheet.create({
   container: { flex: 1 },