@umituz/react-native-settings 4.23.84 → 4.23.85

package/src/presentation/components/settings/SettingsItemCardContent.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicIcon, AtomicText, type IconName } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardContentProps {
+  icon: IconName;
+  title: string;
+  description?: string;
+  iconBgColor: string;
+  iconColor: string;
+  disabled?: boolean;
+  rightElement: React.ReactElement;
+}
+
+export const SettingsItemCardContent: React.FC<SettingsItemCardContentProps> = React.memo(({
+  icon,
+  title,
+  description,
+  iconBgColor,
+  iconColor,
+  disabled,
+  rightElement,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.content}>
+      <View style={[styles.iconContainer, { backgroundColor: iconBgColor, borderRadius: tokens.borders.radius.md }]}>
+        <AtomicIcon name={icon} size="lg" customColor={iconColor} />
+      </View>
+      <View style={styles.textContainer}>
+        <AtomicText
+          type="bodyLarge"
+          color={disabled ? "onSurfaceVariant" : "onSurface"}
+          numberOfLines={1}
+          style={{ marginBottom: description ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
+        >
+          {title}
+        </AtomicText>
+        {!!description && (
+          <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
+            {description}
+          </AtomicText>
+        )}
+      </View>
+      {rightElement}
+    </View>
+  );
+});
+
+SettingsItemCardContent.displayName = "SettingsItemCardContent";
+
+const styles = {
+  content: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: 8,
+  },
+} as const;

package/src/presentation/components/settings/SettingsItemCardRightElement.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { AtomicIcon, AtomicSwitch, type IconName } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardRightElementProps {
+  showSwitch: boolean;
+  switchValue?: boolean;
+  onSwitchChange?: (value: boolean) => void;
+  disabled?: boolean;
+  shouldShowChevron: boolean;
+  rightIcon: IconName;
+}
+
+export const SettingsItemCardRightElement: React.FC<SettingsItemCardRightElementProps> = React.memo(({
+  showSwitch,
+  switchValue,
+  onSwitchChange,
+  disabled,
+  shouldShowChevron,
+  rightIcon,
+}) => {
+  const handleSwitchChange = React.useCallback((value: boolean) => {
+    if (onSwitchChange) {
+      onSwitchChange(value);
+    }
+  }, [onSwitchChange]);
+
+  if (showSwitch) {
+    return (
+      <AtomicSwitch
+        value={!!switchValue}
+        onValueChange={handleSwitchChange}
+        disabled={disabled}
+      />
+    );
+  }
+  if (shouldShowChevron) {
+    return <AtomicIcon name={rightIcon} size="sm" color="textSecondary" />;
+  }
+  return null;
+});
+
+SettingsItemCardRightElement.displayName = "SettingsItemCardRightElement";

package/src/presentation/components/settings/SettingsItemCardSection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardSectionProps {
+  sectionTitle?: string;
+}
+
+export const SettingsItemCardSection: React.FC<SettingsItemCardSectionProps> = React.memo(({ sectionTitle }) => {
+  if (!sectionTitle) return null;
+
+  return (
+    <View style={styles.headerContainer}>
+      <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: "uppercase" }}>
+        {sectionTitle}
+      </AtomicText>
+    </View>
+  );
+});
+
+SettingsItemCardSection.displayName = "SettingsItemCardSection";
+
+const styles = {
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+} as const;

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -27,6 +27,8 @@ import {
   createFAQConfig,
   createSubscriptionConfig,
 } from "../utils/config-creators";
+import { createUserProfileDisplay } from "../utils/userProfileUtils";
+import { createAccountConfig } from "../utils/accountConfigUtils";
 import type { SettingsConfig } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
 import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen } from "../navigation/types";
@@ -127,60 +129,23 @@ export const useSettingsScreenConfig = (
     showAbout, showLegal, showFaqs, showRating,
   ]);
 
-  const userProfile = useMemo((): UserProfileDisplay => {
-    const isAnonymous = userProfileData?.isAnonymous ?? true;
-
-    // Ensure t function is available before using it
-    const anonymousName = typeof t === 'function'
-      ? t("settings.profile.anonymousName")
-      : 'Anonymous';
-
-    return {
-      displayName: userProfileData?.displayName || anonymousName,
-      userId: userProfileData?.userId ?? undefined,
-      isAnonymous,
-      avatarUrl: userProfileData?.avatarUrl ?? undefined,
-      onPress: isAnonymous ? handleSignIn : undefined,
-      accountSettingsRoute: isAnonymous ? undefined : "Account",
-    };
-  }, [userProfileData, t, handleSignIn]);
-
-  const accountConfig = useMemo((): AccountScreenConfig => {
-    const isAnonymous = user?.isAnonymous ?? true;
-
-    // Ensure t function is available before using it
-    const getTranslation = (key: string, fallback: string) =>
-      typeof t === 'function' ? t(key) : fallback;
-
-    return {
-      profile: {
-        displayName: userProfileData?.displayName || user?.displayName || getTranslation("settings.profile.anonymousName", "Anonymous"),
-        userId: userProfileData?.userId ?? user?.uid ?? undefined,
-        isAnonymous,
-        avatarUrl: userProfileData?.avatarUrl ?? user?.photoURL ?? undefined,
-        benefits: isAnonymous ? [
-          getTranslation("settings.profile.benefits.saveHistory", "Save history"),
-          getTranslation("settings.profile.benefits.syncDevices", "Sync devices"),
-          getTranslation("settings.profile.benefits.cloudSync", "Cloud sync"),
-          getTranslation("settings.profile.benefits.secureBackup", "Secure backup"),
-        ] : undefined,
-      },
-      isAnonymous,
-      editProfileText: getTranslation("settings.account.editProfile", "Edit Profile"),
-      onSignIn: handleSignIn,
-      accountActions: {
-        onLogout: handleSignOut,
-        onDeleteAccount: handleDeleteAccount,
-        logoutText: getTranslation("settings.account.logout", "Log Out"),
-        logoutConfirmTitle: getTranslation("settings.account.logoutConfirmTitle", "Log Out"),
-        logoutConfirmMessage: getTranslation("settings.account.logoutConfirmMessage", "Are you sure you want to log out?"),
-        cancelText: getTranslation("common.cancel", "Cancel"),
-        deleteAccountText: getTranslation("settings.account.deleteAccount", "Delete Account"),
-        deleteConfirmTitle: getTranslation("settings.account.deleteConfirmTitle", "Delete Account"),
-        deleteConfirmMessage: getTranslation("settings.account.deleteConfirmMessage", "Are you sure you want to delete your account? This action cannot be undone."),
-      },
-    };
-  }, [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);
+  const userProfile = useMemo(() => createUserProfileDisplay({
+    profileData: userProfileData,
+    t,
+    onSignIn: handleSignIn,
+  }), [userProfileData, t, handleSignIn]);
+
+  const accountConfig = useMemo(() => createAccountConfig({
+    displayName: userProfileData?.displayName || user?.displayName || undefined,
+    userId: userProfileData?.userId ?? user?.uid ?? undefined,
+    photoURL: user?.photoURL ?? undefined,
+    isAnonymous: user?.isAnonymous,
+    avatarUrl: userProfileData?.avatarUrl ?? undefined,
+    onSignIn: handleSignIn,
+    onLogout: handleSignOut,
+    onDeleteAccount: handleDeleteAccount,
+    t,
+  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);
 
   const translatedFaqData = useMemo((): FAQData | undefined => {
     if (!faqData) return undefined;

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -9,7 +9,13 @@ import { FAQScreen } from "../../../domains/faqs";
 import { AboutScreen } from "../../../domains/about";
 import { LegalScreen } from "../../../domains/legal";
 import { GamificationScreen } from "../../../domains/gamification";
-import type { SettingsStackNavigatorProps, AdditionalScreen } from "../types";
+import {
+  createScreenWithProps,
+  convertAdditionalScreen,
+  createConditionalScreen,
+  combineScreens,
+} from "../../utils/screenFactory";
+import type { SettingsStackNavigatorProps } from "../types";
 
 export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
   aboutConfig: any;
@@ -42,104 +48,84 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
   } = props;
 
   return useMemo(() => {
-    const baseScreens: StackScreen[] = [
-      {
-        name: "SettingsMain",
-        options: { headerShown: false },
-        children: () => React.createElement(SettingsScreen, {
-          config,
-          appVersion: appInfo.version,
-          showUserProfile,
-          userProfile,
-          devSettings,
-          customSections,
-          showHeader,
-          showCloseButton,
-          onClose,
-        }),
-      },
-      {
-        name: "Appearance",
-        component: AppearanceScreen as any,
-        options: { headerShown: false },
-      },
+    const settingsMainScreen = createScreenWithProps(
+      "SettingsMain",
+      SettingsScreen,
       {
-        name: "About",
-        options: { headerShown: false },
-        children: () => React.createElement(AboutScreen, { config: aboutConfig }),
-      },
-      {
-        name: "Legal",
-        options: { headerShown: false },
-        children: () => React.createElement(LegalScreen, legalProps),
-      },
+        config,
+        appVersion: appInfo.version,
+        showUserProfile,
+        userProfile,
+        devSettings,
+        customSections,
+        showHeader,
+        showCloseButton,
+        onClose,
+      }
+    );
+
+    const appearanceScreen = {
+      name: "Appearance",
+      component: AppearanceScreen as any,
+      options: { headerShown: false },
+    };
+
+    const aboutScreen = createScreenWithProps("About", AboutScreen, { config: aboutConfig });
+    const legalScreen = createScreenWithProps("Legal", LegalScreen, legalProps);
+
+    const notificationScreen = createScreenWithProps(
+      "Notifications",
+      NotificationSettingsScreen,
       {
-        name: "Notifications",
-        options: { headerShown: false },
-        children: () => React.createElement(NotificationSettingsScreen, {
-          translations: notificationTranslations,
-          quietHoursTranslations,
-        }),
-      },
+        translations: notificationTranslations,
+        quietHoursTranslations,
+      }
+    );
+
+    const baseScreens: StackScreen[] = [
+      settingsMainScreen,
+      appearanceScreen,
+      aboutScreen,
+      legalScreen,
+      notificationScreen,
     ];
 
-    const faqScreen: StackScreen | null = (faqData && faqData.categories?.length > 0)
-      ? {
-          name: "FAQ",
-          options: { headerShown: false },
-          children: () => React.createElement(FAQScreen, {
-            categories: faqData.categories,
-            searchPlaceholder: t("settings.faqs.searchPlaceholder"),
-            emptySearchTitle: t("settings.faqs.emptySearchTitle"),
-            emptySearchMessage: t("settings.faqs.emptySearchMessage"),
-            headerTitle: t("settings.faqs.headerTitle"),
-          }),
-        }
-      : null;
+    const faqScreen = createConditionalScreen(
+      !!(faqData && faqData.categories?.length > 0),
+      () => createScreenWithProps("FAQ", FAQScreen, {
+        categories: faqData!.categories,
+        searchPlaceholder: t("settings.faqs.searchPlaceholder"),
+        emptySearchTitle: t("settings.faqs.emptySearchTitle"),
+        emptySearchMessage: t("settings.faqs.emptySearchMessage"),
+        headerTitle: t("settings.faqs.headerTitle"),
+      })
+    );
 
-    const additionalStackScreens: StackScreen[] = (additionalScreens || []).map((screen: AdditionalScreen): StackScreen => {
-      const stackScreen: any = { name: screen.name };
-      if (screen.component) stackScreen.component = screen.component;
-      if (screen.children) stackScreen.children = screen.children;
-      if (screen.options) stackScreen.options = screen.options;
-      return stackScreen as StackScreen;
-    });
+    const additionalStackScreens: StackScreen[] = (additionalScreens || []).map(convertAdditionalScreen);
 
-    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
-      ? {
-          name: "Gamification",
-          options: { headerShown: false },
-          children: () => React.createElement(GamificationScreen, { config: gamificationConfig }),
-        }
-      : null;
+    const gamificationScreen = createConditionalScreen(
+      !!(gamificationConfig?.enabled),
+      () => createScreenWithProps("Gamification", GamificationScreen as any, { config: gamificationConfig })
+    );
 
-    const languageScreen: StackScreen = {
-      name: "LanguageSelection",
-      options: { headerShown: false },
-      children: () => React.createElement(LanguageSelectionScreen, {
-        headerTitle: t("settings.language.title"),
-        searchPlaceholder: t("settings.languageSelection.searchPlaceholder"),
-      }),
-    };
+    const languageScreen = createScreenWithProps("LanguageSelection", LanguageSelectionScreen, {
+      headerTitle: t("settings.language.title"),
+      searchPlaceholder: t("settings.languageSelection.searchPlaceholder"),
+    });
 
-    const accountScreen: StackScreen | null = accountConfig
-      ? {
-          name: "Account",
-          options: { headerShown: false },
-          children: () => React.createElement(AccountScreen, { config: accountConfig }),
-        }
-      : null;
+    const accountScreen = createConditionalScreen(
+      !!accountConfig,
+      () => createScreenWithProps("Account", AccountScreen as any, { config: accountConfig })
+    );
 
-    const allScreens: StackScreen[] = [
-      ...baseScreens,
-      ...(faqScreen ? [faqScreen] : []),
-      ...additionalStackScreens,
-      ...(gamificationScreen ? [gamificationScreen] : []),
+    return combineScreens(
+      baseScreens,
+      faqScreen,
+      additionalStackScreens,
+      gamificationScreen,
       languageScreen,
-      ...(accountScreen ? [accountScreen] : []),
-    ];
-
-    return allScreens;
+      accountScreen
+    );
   }, [
     t,
     showHeader,

package/src/presentation/screens/components/GamificationSettingsItem.tsx

@@ -3,8 +3,9 @@ import { useAppNavigation } from "@umituz/react-native-design-system";
 import type { IconName } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import { useGamification } from "../../../domains/gamification";
-import type { GamificationItemConfig } from "../../screens/types/UserFeatureConfig";
+import type { GamificationItemConfig } from "../types/UserFeatureConfig";
 import type { GamificationSettingsConfig } from "../../../domains/gamification";
+import { compareGamificationProps } from "../../../infrastructure/utils/memoComparisonUtils";
 
 export interface GamificationSettingsItemProps {
   config: GamificationItemConfig;
@@ -12,27 +13,23 @@ export interface GamificationSettingsItemProps {
   t: (key: string) => string;
 }
 
-export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> = ({ 
-  config, 
-  gamificationConfig, 
-  t 
+const GamificationSettingsItemComponent: React.FC<GamificationSettingsItemProps> = ({
+  config,
+  gamificationConfig,
+  t
 }) => {
   const navigation = useAppNavigation();
   const { level } = useGamification(gamificationConfig);
-  
-  const handlePress = () => {
-    if (config.route) {
-      navigation.navigate(config.route as never);
-    } else {
-      navigation.navigate("Gamification" as never);
-    }
-  };
-  
+
+  const handlePress = React.useCallback(() => {
+    const route = config.route || "Gamification";
+    navigation.navigate(route as never);
+  }, [navigation, config.route]);
+
   const icon = (config.icon || "trophy-outline") as IconName;
   const title = config.title || t("settings.gamification.title");
-  
-  // Dynamic description showing current level and points
-  const description = config.description || 
+
+  const description = config.description ||
     t("settings.gamification.description")
       .replace("{level}", level.currentLevel.toString())
       .replace("{points}", level.currentPoints.toString());
@@ -47,3 +44,9 @@ export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> =
     />
   );
 };
+
+export const GamificationSettingsItem = React.memo(
+  GamificationSettingsItemComponent,
+  compareGamificationProps
+);
+GamificationSettingsItem.displayName = "GamificationSettingsItem";

package/src/presentation/screens/components/SettingsContent.tsx

@@ -17,6 +17,7 @@ import type { CustomSettingsSection } from "../types";
 import { SubscriptionSettingsItem } from "./SubscriptionSettingsItem";
 import { WalletSettingsItem } from "./WalletSettingsItem";
 import { GamificationSettingsItem } from "./GamificationSettingsItem";
+import { VideoTutorialSettingsItem } from "./VideoTutorialSettingsItem";
 
 interface SettingsContentProps {
   normalizedConfig: NormalizedConfig;
@@ -34,6 +35,7 @@ interface SettingsContentProps {
     subscription: boolean;
     wallet: boolean;
     gamification: boolean;
+    videoTutorial: boolean;
   };
   showUserProfile?: boolean;
   userProfile?: {
@@ -84,6 +86,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.subscription ||
     features.wallet ||
     features.gamification ||
+    features.videoTutorial ||
     customSections.length > 0,
     [
       features.appearance,
@@ -98,6 +101,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
       features.subscription,
       features.wallet,
       features.gamification,
+      features.videoTutorial,
       customSections.length,
     ]
   );
@@ -127,6 +131,13 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         />
       )}
 
+      {features.videoTutorial && (
+        <VideoTutorialSettingsItem
+          config={normalizedConfig.videoTutorial.config || {}}
+          t={t}
+        />
+      )}
+
       <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
       <IdentitySettingsSection normalizedConfig={normalizedConfig} features={features} />
@@ -156,6 +167,24 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   );
 };
 
+export const MemoizedSettingsContent = React.memo(SettingsContent, (prevProps, nextProps) => {
+  return (
+    prevProps.normalizedConfig === nextProps.normalizedConfig &&
+    prevProps.features === nextProps.features &&
+    prevProps.showUserProfile === nextProps.showUserProfile &&
+    prevProps.userProfile === nextProps.userProfile &&
+    prevProps.showFooter === nextProps.showFooter &&
+    prevProps.footerText === nextProps.footerText &&
+    prevProps.appVersion === nextProps.appVersion &&
+    prevProps.customSections === nextProps.customSections &&
+    prevProps.emptyStateText === nextProps.emptyStateText &&
+    prevProps.devSettings === nextProps.devSettings &&
+    prevProps.gamificationConfig === nextProps.gamificationConfig
+  );
+});
+
+MemoizedSettingsContent.displayName = "MemoizedSettingsContent";
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package/src/presentation/screens/components/SubscriptionSettingsItem.tsx

@@ -2,22 +2,25 @@ import React from "react";
 import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
-import type { SubscriptionConfig } from "../../screens/types/UserFeatureConfig";
+import type { SubscriptionConfig } from "../types/UserFeatureConfig";
+import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
 
 export interface SubscriptionSettingsItemProps {
   config: SubscriptionConfig;
   t: (key: string) => string;
 }
 
-export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> = ({ config, t }) => {
+const SubscriptionSettingsItemComponent: React.FC<SubscriptionSettingsItemProps> = ({ config, t }) => {
   const navigation = useAppNavigation();
-  const handlePress = () => {
+
+  const handlePress = React.useCallback(() => {
     if (config.route) {
       navigation.navigate(config.route as never);
     } else if (config.onPress) {
       config.onPress();
     }
-  };
+  }, [navigation, config.route, config.onPress]);
+
   return (
     <SettingsItemCard
       title={config.title || t("settings.subscription.title")}
@@ -28,3 +31,9 @@ export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> =
     />
   );
 };
+
+export const SubscriptionSettingsItem = React.memo(
+  SubscriptionSettingsItemComponent,
+  compareConfigAndTranslate
+);
+SubscriptionSettingsItem.displayName = "SubscriptionSettingsItem";

package/src/presentation/screens/components/VideoTutorialSettingsItem.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useAppNavigation } from "@umituz/react-native-design-system";
+import type { IconName } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { VideoTutorialConfig } from "../types/UserFeatureConfig";
+import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
+
+export interface VideoTutorialSettingsItemProps {
+  config: VideoTutorialConfig;
+  t: (key: string) => string;
+}
+
+const VideoTutorialSettingsItemComponent: React.FC<VideoTutorialSettingsItemProps> = ({
+  config,
+  t
+}) => {
+  const navigation = useAppNavigation();
+
+  const handlePress = React.useCallback(() => {
+    if (config.onPress) {
+      config.onPress();
+    } else {
+      const route = config.route || "VideoTutorial";
+      navigation.navigate(route as never);
+    }
+  }, [navigation, config.onPress, config.route]);
+
+  const icon = (config.icon || "play-circle-outline") as IconName;
+  const title = config.title || t("settings.videoTutorial.title");
+  const description = config.description || t("settings.videoTutorial.description");
+
+  return (
+    <SettingsItemCard
+      title={title}
+      description={description}
+      icon={icon}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};
+
+export const VideoTutorialSettingsItem = React.memo(
+  VideoTutorialSettingsItemComponent,
+  compareConfigAndTranslate
+);
+VideoTutorialSettingsItem.displayName = "VideoTutorialSettingsItem";

package/src/presentation/screens/components/WalletSettingsItem.tsx

@@ -2,20 +2,23 @@ import React from "react";
 import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
-import type { WalletConfig } from "../../screens/types/UserFeatureConfig";
+import type { WalletConfig } from "../types/UserFeatureConfig";
+import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
 
 export interface WalletSettingsItemProps {
   config: WalletConfig;
   t: (key: string) => string;
 }
 
-export const WalletSettingsItem: React.FC<WalletSettingsItemProps> = ({ config, t }) => {
+const WalletSettingsItemComponent: React.FC<WalletSettingsItemProps> = ({ config, t }) => {
   const navigation = useAppNavigation();
-  const handlePress = () => {
+
+  const handlePress = React.useCallback(() => {
     if (config.route) {
       navigation.navigate(config.route as never);
     }
-  };
+  }, [navigation, config.route]);
+
   return (
     <SettingsItemCard
       title={config.title || t("wallet.title")}
@@ -26,3 +29,9 @@ export const WalletSettingsItem: React.FC<WalletSettingsItemProps> = ({ config,
     />
   );
 };
+
+export const WalletSettingsItem = React.memo(
+  WalletSettingsItemComponent,
+  compareConfigAndTranslate
+);
+WalletSettingsItem.displayName = "WalletSettingsItem";