@umituz/react-native-settings 4.23.84 → 4.23.86

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import type { StackScreen } from "@umituz/react-native-design-system";
 import { LanguageSelectionScreen } from "../../../domains/localization";
 import { NotificationSettingsScreen } from "../../../domains/notifications";
@@ -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";

package/src/presentation/screens/components/sections/CustomSettingsList.tsx

@@ -2,14 +2,13 @@ import React, { useMemo } from "react";
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { CustomSettingsSection } from "../../types";
+import { createSinglePropComparator } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface CustomSettingsListProps {
     customSections?: CustomSettingsSection[];
 }
 
-export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
-    customSections = [],
-}) => {
+export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({ customSections = [] }) => {
     const sortedSections = useMemo(() => {
         return Array.from(customSections)
             .sort((a: CustomSettingsSection, b: CustomSettingsSection) => (a.order ?? 999) - (b.order ?? 999));
@@ -25,9 +24,9 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
                     title={section.title}
                 >
                     {section.content}
-                    {!section.content && section.items && section.items.length > 0 && section.items.map((item) => (
+                    {!section.content && section.items && section.items.length > 0 && section.items.map((item, itemIndex) => (
                         <SettingsItemCard
-                            key={item.id || `item-${index}`}
+                            key={item.id || `item-${itemIndex}`}
                             title={item.title}
                             description={item.subtitle}
                             icon={item.icon}
@@ -42,3 +41,11 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
         </>
     );
 };
+
+CustomSettingsList.displayName = "CustomSettingsList";
+
+export const MemoizedCustomSettingsList = React.memo(
+    CustomSettingsList,
+    createSinglePropComparator("customSections")
+);
+MemoizedCustomSettingsList.displayName = "MemoizedCustomSettingsList";

package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx

@@ -5,8 +5,8 @@ import { NotificationsSection } from "../../../../domains/notifications";
 import { useLocalization, getLanguageByCode } from "../../../../domains/localization";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
-
 import { SettingsSection } from "../../../components/SettingsSection";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface FeatureSettingsSectionProps {
   normalizedConfig: NormalizedConfig;
@@ -24,23 +24,22 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   const { t, currentLanguage } = useLocalization();
   const navigation = useAppNavigation();
 
-  const handleLanguagePress = () => {
+  const handleLanguagePress = React.useCallback(() => {
     if (normalizedConfig.language.config?.onPress) {
       normalizedConfig.language.config.onPress();
     } else {
-      const route =
-        normalizedConfig.language.config?.route || "LanguageSelection";
+      const route = normalizedConfig.language.config?.route || "LanguageSelection";
       navigation.navigate(route as never);
     }
-  };
+  }, [navigation, normalizedConfig.language.config]);
 
-  const currentLanguageData = getLanguageByCode(currentLanguage);
-  const languageDisplayName = currentLanguageData
-    ? `${currentLanguageData.flag} ${currentLanguageData.nativeName}`
-    : currentLanguage;
+  const currentLanguageData = React.useMemo(() => getLanguageByCode(currentLanguage), [currentLanguage]);
+  const languageDisplayName = React.useMemo(() => {
+    if (!currentLanguageData) return currentLanguage;
+    return `${currentLanguageData.flag} ${currentLanguageData.nativeName}`;
+  }, [currentLanguageData, currentLanguage]);
 
-  if (!features.appearance && !features.language && !features.notifications)
-    return null;
+  if (!features.appearance && !features.language && !features.notifications) return null;
 
   return (
     <SettingsSection
@@ -85,3 +84,5 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   );
 };
 
+export const MemoizedFeatureSettingsSection = React.memo(FeatureSettingsSection, compareConfigAndFeatures);
+MemoizedFeatureSettingsSection.displayName = "MemoizedFeatureSettingsSection";

package/src/presentation/screens/components/sections/IdentitySettingsSection.tsx

@@ -3,8 +3,8 @@ import { AboutSection } from "../../../../domains/about/presentation/components/
 import { LegalSection } from "../../../../domains/legal/presentation/components/LegalSection";
 import { useLocalization } from "../../../../domains/localization";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
-
 import { SettingsSection } from "../../../components/SettingsSection";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface IdentitySettingsSectionProps {
     normalizedConfig: NormalizedConfig;
@@ -48,4 +48,7 @@ export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = (
     );
 };
 
+IdentitySettingsSection.displayName = "IdentitySettingsSection";
 
+export const MemoizedIdentitySettingsSection = React.memo(IdentitySettingsSection, compareConfigAndFeatures);
+MemoizedIdentitySettingsSection.displayName = "MemoizedIdentitySettingsSection";

package/src/presentation/screens/components/sections/ProfileSectionLoader.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native";
 import { ProfileSection } from "@umituz/react-native-auth";
 import { useLocalization } from "../../../../domains/localization";
 import { useAppNavigation } from "@umituz/react-native-design-system";
+import { createSinglePropComparator } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 export interface ProfileSectionLoaderProps {
     userProfile?: {
@@ -16,24 +17,27 @@ export interface ProfileSectionLoaderProps {
     };
 }
 
-
-export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ userProfile }) => {
+export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile }) => {
     const { t } = useLocalization();
     const navigation = useAppNavigation();
 
-    if (!userProfile) return null;
-
-    const handlePress = () => {
+    const handlePress = React.useCallback(() => {
+        if (!userProfile) return;
         if (userProfile.onPress) {
             userProfile.onPress();
         } else if (userProfile.accountSettingsRoute) {
             navigation.navigate(userProfile.accountSettingsRoute);
         }
-    };
+    }, [navigation, userProfile]);
 
-    const anonymousDisplayName = userProfile.isAnonymous && userProfile.userId 
-        ? `${t("profile.guest", "Guest")} ${userProfile.userId.substring(0, 8)}`
-        : t("settings.profile.anonymousName", "Anonymous User");
+    const anonymousDisplayName = React.useMemo(() => {
+        if (!userProfile) return "";
+        return userProfile.isAnonymous && userProfile.userId
+            ? `${t("profile.guest", "Guest")} ${userProfile.userId.substring(0, 8)}`
+            : t("settings.profile.anonymousName", "Anonymous User");
+    }, [userProfile, t]);
+
+    if (!userProfile) return null;
 
     return (
         <View style={styles.profileContainer}>
@@ -53,7 +57,9 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ user
             />
         </View>
     );
-};
+}, createSinglePropComparator("userProfile"));
+
+ProfileSectionLoader.displayName = "ProfileSectionLoader";
 
 const styles = StyleSheet.create({
     profileContainer: {

package/src/presentation/screens/components/sections/SupportSettingsSection.tsx

@@ -5,6 +5,7 @@ import { SupportSection } from "../../../../domains/feedback/presentation/compon
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
+import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
 
 interface SupportSettingsSectionProps {
     features: { feedback: boolean; rating: boolean; faqs: boolean; [key: string]: boolean };
@@ -30,10 +31,10 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
                 <SupportSection
                     renderSection={(props: { title: string; children: React.ReactNode }) => <>{props.children}</>}
                     renderItem={(props: { title: string; icon: string; onPress: () => void; isLast?: boolean }) => (
-                        <SettingsItemCard 
-                            title={props.title} 
-                            icon={props.icon} 
-                            onPress={props.onPress} 
+                        <SettingsItemCard
+                            title={props.title}
+                            icon={props.icon}
+                            onPress={props.onPress}
                             noBackground={true}
                             hideMargin={true}
                         />
@@ -98,3 +99,7 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
     );
 };
 
+SupportSettingsSection.displayName = "SupportSettingsSection";
+
+export const MemoizedSupportSettingsSection = React.memo(SupportSettingsSection, compareConfigAndFeatures);
+MemoizedSupportSettingsSection.displayName = "MemoizedSupportSettingsSection";

package/src/presentation/screens/hooks/useFeatureDetection.ts

@@ -51,6 +51,7 @@ export function useFeatureDetection(
       subscription,
       wallet,
       gamification,
+      videoTutorial,
     } = normalizedConfig;
 
     const notificationServiceAvailable = !!options?.notificationServiceAvailable;
@@ -118,6 +119,7 @@ export function useFeatureDetection(
       subscription: subscription.enabled,
       wallet: wallet.enabled,
       gamification: gamification.enabled,
+      videoTutorial: videoTutorial.enabled,
     };
   }, [normalizedConfig, navigation, options]);
 }