@umituz/react-native-settings 4.23.97 → 4.23.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.97",
+  "version": "4.23.98",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/about/domain/entities/AppInfo.ts

@@ -52,6 +52,7 @@ export interface AboutConfig {
   };
   /** Localized texts for section headers and labels */
   texts?: {
+    title?: string;
     contact?: string;
     more?: string;
     developer?: string;

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -41,11 +41,11 @@ export const AboutContent: React.FC<AboutContentProps> = ({
     <View style={styles.content}>
       {hasContactInfo && (
         <View style={styles.section}>
-          <AboutSectionHeader title={texts.contact || "Contact"} />
+          <AboutSectionHeader title={texts.contact || ""} />
 
           {appInfo.developer && (
             <AboutSettingItem
-              title={texts.developer || "Developer"}
+              title={texts.developer || ""}
               value={appInfo.developer}
               testID="developer-item"
             />
@@ -53,7 +53,7 @@ export const AboutContent: React.FC<AboutContentProps> = ({
 
           {appInfo.contactEmail && (
             <AboutSettingItem
-              title={texts.email || "Email"}
+              title={texts.email || ""}
               value={appInfo.contactEmail}
               onPress={config.actions?.onEmailPress}
               testID="email-item"
@@ -63,7 +63,7 @@ export const AboutContent: React.FC<AboutContentProps> = ({
 
           {appInfo.websiteUrl && (
             <AboutSettingItem
-              title={texts.website || "Website"}
+              title={texts.website || ""}
               value={appInfo.websiteDisplay || appInfo.websiteUrl}
               onPress={config.actions?.onWebsitePress}
               testID="website-item"
@@ -75,9 +75,9 @@ export const AboutContent: React.FC<AboutContentProps> = ({
 
       {hasMoreInfo && (
         <View style={styles.section}>
-          <AboutSectionHeader title={texts.more || "More"} />
+          <AboutSectionHeader title={texts.more || ""} />
           <AboutSettingItem
-            title={texts.moreApps || "More Apps"}
+            title={texts.moreApps || ""}
             onPress={config.actions?.onMoreAppsPress}
             testID="more-apps-item"
             showChevron={!!config.actions?.onMoreAppsPress}

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -5,7 +5,6 @@
  * Optimized for performance and memory safety
  */
 import { ScreenLayout, NavigationHeader, useAppDesignTokens, useAppNavigation, AtomicText, AtomicSpinner } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../../localization';
 import { useAboutInfo } from '../hooks/useAboutInfo';
 import { AboutScreenContent } from './AboutScreenContent';
 
@@ -34,7 +33,6 @@ export const AboutScreen: React.FC<AboutScreenProps> = (props) => {
   const { config, testID = 'about-screen' } = props;
   const tokens = useAppDesignTokens();
   const navigation = useAppNavigation();
-  const { t } = useLocalization();
 
   const { appInfo, loading, error } = useAboutInfo({
     autoInit: true,
@@ -43,7 +41,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = (props) => {
 
   const header = (
     <NavigationHeader 
-      title={t("settings.about.title")} 
+      title={config.texts?.title || ""} 
       onBackPress={() => navigation.goBack()} 
     />
   );
@@ -57,7 +55,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = (props) => {
   }
 
   if (error || !appInfo) {
-    const errorText = error ? `${config.texts?.errorPrefix || 'Error:'} ${error}` : (config.texts?.noInfo || 'No info available');
+    const errorText = error ? `${config.texts?.errorPrefix || ""} ${error}` : (config.texts?.noInfo || "");
     return (
       <ScreenLayout header={header} testID={testID}>
         <AtomicText type="bodyMedium" color="error" style={{ textAlign: 'center', marginTop: 20 }}>

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -12,7 +12,6 @@ import {
   NavigationHeader,
   useAppNavigation
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "../../../localization";
 import { useAppearance } from "../../hooks/useAppearance";
 import { useAppearanceActions } from "../../hooks/useAppearanceActions";
 import {
@@ -41,7 +40,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
 }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
   const { themeMode } = useAppearance();
   const {
     localCustomColors,
@@ -75,17 +73,17 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     const themes: ThemeOptionConfig[] = [
       {
         mode: "light",
-        title: texts?.lightMode?.title ?? t("settings.appearance.lightMode.title"),
-        subtitle: texts?.lightMode?.subtitle ?? t("settings.appearance.lightMode.subtitle"),
-        description: texts?.lightMode?.description ?? t("settings.appearance.lightMode.description"),
+        title: texts?.lightMode?.title ?? "",
+        subtitle: texts?.lightMode?.subtitle ?? "",
+        description: texts?.lightMode?.description ?? "",
         features: texts?.lightMode?.features,
         featuresTitle: texts?.featuresSectionTitle,
       },
       {
         mode: "dark",
-        title: texts?.darkMode?.title ?? t("settings.appearance.darkMode.title"),
-        subtitle: texts?.darkMode?.subtitle ?? t("settings.appearance.darkMode.subtitle"),
-        description: texts?.darkMode?.description ?? t("settings.appearance.darkMode.description"),
+        title: texts?.darkMode?.title ?? "",
+        subtitle: texts?.darkMode?.subtitle ?? "",
+        description: texts?.darkMode?.description ?? "",
         features: texts?.darkMode?.features,
         featuresTitle: texts?.featuresSectionTitle,
       },
@@ -96,8 +94,8 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
         tokens={tokens}
         themeMode={themeMode}
         onThemeSelect={handleThemeSelect}
-        title={texts?.themeSectionTitle ?? t("settings.appearance.themeSectionTitle")}
-        description={texts?.themeSectionDescription ?? t("settings.appearance.themeSectionDescription")}
+        title={texts?.themeSectionTitle ?? ""}
+        description={texts?.themeSectionDescription ?? ""}
         themes={themes}
       />
     );
@@ -111,7 +109,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     texts?.lightMode,
     texts?.darkMode,
     texts?.featuresSectionTitle,
-    t,
   ]);
 
   const colorsSectionMemo = useMemo(() => {
@@ -163,7 +160,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
       hideScrollIndicator
       header={
         <NavigationHeader 
-          title={t("settings.appearance.title")} 
+          title={texts?.title || ""} 
           onBackPress={() => navigation.goBack()} 
         />
       }

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.tsx

@@ -21,40 +21,32 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Modal } from 'react-native';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../../localization';
 import { DisclaimerCard } from './DisclaimerCard';
 import { DisclaimerModal } from './DisclaimerModal';
 
 export interface DisclaimerSettingProps {
-  /** Custom title translation key */
-  titleKey?: string;
-  /** Custom message translation key */
-  messageKey?: string;
-  /** Custom short message translation key */
-  shortMessageKey?: string;
+  /** Custom title */
+  title?: string;
+  /** Custom content */
+  content?: string;
+  /** Custom short message */
+  shortMessage?: string;
   /** Custom icon name */
   iconName?: string;
   /** Custom icon color */
   iconColor?: string;
   /** Custom background color */
   backgroundColor?: string;
-  /** Custom modal title */
-  modalTitle?: string;
-  /** Custom modal content */
-  modalContent?: string;
 }
 
 export const DisclaimerSetting: React.FC<DisclaimerSettingProps> = ({
-  titleKey = "settings.disclaimer.title",
-  messageKey = "settings.disclaimer.message",
-  shortMessageKey = "settings.disclaimer.shortMessage",
+  title = "",
+  content = "",
+  shortMessage = "",
   iconName = "alert-triangle",
   iconColor,
   backgroundColor,
-  modalTitle,
-  modalContent,
 }) => {
-  const { t } = useLocalization();
   const tokens = useAppDesignTokens();
   const [modalVisible, setModalVisible] = useState(false);
 
@@ -64,9 +56,6 @@ export const DisclaimerSetting: React.FC<DisclaimerSettingProps> = ({
     };
   }, []);
 
-  const title = modalTitle || t(titleKey);
-  const content = modalContent || t(messageKey);
-  const shortMessage = t(shortMessageKey);
   const finalIconColor = iconColor || tokens.colors.warning;
   const finalBackgroundColor = backgroundColor || withAlpha(finalIconColor, 0.1);
 

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -23,7 +23,6 @@ import {
 } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { IconName } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../../localization';
 
 export interface DisclaimerScreenProps {
   /** Custom title (overrides translation) */
@@ -40,17 +39,14 @@ export interface DisclaimerScreenProps {
 
 export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
   title,
-  titleKey = 'settings.disclaimer.title',
   content,
-  contentKey = 'settings.disclaimer.message',
   iconName = 'alert-triangle',
 }) => {
-  const { t } = useLocalization();
   const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
 
-  const displayTitle = title || t(titleKey);
-  const displayContent = content || t(contentKey);
+  const displayTitle = title || "";
+  const displayContent = content || "";
 
   const navigation = useAppNavigation();
 

package/src/domains/gamification/types/index.ts

@@ -44,17 +44,17 @@ export interface StreakState {
 
 // Gamification Translations
 export interface GamificationTranslations {
-  title: string;
-  statsTitle: string;
-  pointsLabel: string;
-  totalCompletedLabel: string;
-  achievementsTitle: string;
-  streakTitle: string;
-  bestStreak: string;
-  currentStreak: string;
-  days: string;
-  levelTitle: string;
-  emptyAchievements: string;
+  title?: string;
+  statsTitle?: string;
+  pointsLabel?: string;
+  totalCompletedLabel?: string;
+  achievementsTitle?: string;
+  streakTitle?: string;
+  bestStreak?: string;
+  currentStreak?: string;
+  days?: string;
+  levelTitle?: string;
+  emptyAchievements?: string;
 }
 
 // Gamification Config (provided by app via props)
@@ -65,7 +65,7 @@ export interface GamificationConfig {
   pointsPerAction?: number;
   streakBonusMultiplier?: number;
   enabled?: boolean;
-  translations: GamificationTranslations;
+  translations?: GamificationTranslations;
 }
 
 export type GamificationSettingsConfig = GamificationConfig;

package/src/domains/localization/presentation/components/LanguageSection.tsx

@@ -29,15 +29,15 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
     sectionTitle,
 }) => {
     const tokens = useAppDesignTokens();
-    const { t, currentLanguage } = useLocalization();
+    const { currentLanguage } = useLocalization();
     const navigation = useAppNavigation();
 
     const route = config?.route || 'LanguageSelection';
-    const title = config?.title || t('settings.languageSelection.title') || 'Language';
+    const title = config?.title || "";
     const displaySectionTitle = sectionTitle || title;
 
     const currentLang = getLanguageByCode(currentLanguage);
-    const defaultLanguageDisplay = config?.defaultLanguageDisplay || 'English';
+    const defaultLanguageDisplay = config?.defaultLanguageDisplay || "";
     const languageDisplay = currentLang
         ? `${currentLang.flag} ${currentLang.nativeName}`
         : defaultLanguageDisplay;

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx

@@ -24,7 +24,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
   headerTitle,
   onBackPress,
   styles: customStyles,
-  searchPlaceholder = "settings.languageSelection.searchPlaceholder",
+  searchPlaceholder,
   testID = 'language-selection-screen',
 }) => {
   const tokens = useAppDesignTokens();

package/src/domains/notifications/presentation/components/NotificationsSection.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useAppNavigation } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../../localization';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
 export interface NotificationsSectionConfig {
@@ -26,7 +25,6 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   hideMargin,
 }) => {
   const navigation = useAppNavigation();
-  const { t } = useLocalization();
 
   const handlePress = useCallback(() => {
     if (config?.onPress) {
@@ -37,8 +35,8 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
     }
   }, [config?.route, config?.onPress, navigation]);
 
-  const title = config?.title || t('settings.notifications.title');
-  const description = config?.description || t('settings.notifications.description');
+  const title = config?.title || "";
+  const description = config?.description || "";
 
   return (
     <SettingsItemCard

package/src/domains/notifications/presentation/screens/NotificationSettingsScreen.tsx

@@ -13,7 +13,6 @@ import {
   useAppDesignTokens,
   useAppNavigation
 } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../../localization';
 import { QuietHoursCard } from '../../quietHours/presentation/components/QuietHoursCard';
 import { SettingRow } from '../components/SettingRow';
 import { RemindersNavRow } from '../components/RemindersNavRow';
@@ -38,7 +37,6 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
 }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
   const styles = createStyles(tokens);
   const reminders = useReminders();
   const { setStartTime, setEndTime } = useQuietHoursActions();
@@ -63,7 +61,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
     // Navigate to reminders screen when implemented
   };
 
-  const headerTitle = translations.screenTitle || t("settings.notifications.title");
+  const headerTitle = translations.screenTitle || "";
 
   if (isLoading) {
     return (

package/src/infrastructure/utils/configFactory.ts

@@ -3,7 +3,7 @@
  * Generic configuration creator to reduce duplication in base-configs
  */
 
-import type { TranslationFunction } from "../../presentation/utils/config-creators/types";
+
 
 /**
  * Feature visibility configuration
@@ -29,9 +29,6 @@ export interface BaseConfigType {
  * Configuration parameters for creating a settings item config
  */
 export interface ConfigCreatorParams {
-  t: TranslationFunction;
-  titleKey: string;
-  descriptionKey: string;
   icon: string;
   routeOrOnPress?: string | (() => void);
   defaultRoute?: string;
@@ -44,12 +41,10 @@ export interface ConfigCreatorParams {
 export const createBaseConfig = <T extends BaseConfigType = BaseConfigType>(
   params: ConfigCreatorParams
 ): T => {
-  const { t, titleKey, descriptionKey, icon, routeOrOnPress, defaultRoute } = params;
+  const { icon, routeOrOnPress, defaultRoute } = params;
 
   return {
     enabled: true,
-    title: t(titleKey),
-    description: t(descriptionKey),
     icon,
     route: typeof routeOrOnPress === "string" ? routeOrOnPress : defaultRoute,
     onPress: typeof routeOrOnPress === "function" ? routeOrOnPress : undefined,
@@ -82,18 +77,12 @@ export const createDisabledConfig = <T extends BaseConfigType>(
  */
 export const createBatchConfigs = <T extends BaseConfigType>(
   items: Array<{
-    titleKey: string;
-    descriptionKey: string;
     icon: string;
     routeOrOnPress?: string | (() => void);
-  }>,
-  t: TranslationFunction
+  }>
 ): T[] => {
   return items.map((item) =>
     createBaseConfig<T>({
-      t,
-      titleKey: item.titleKey,
-      descriptionKey: item.descriptionKey,
       icon: item.icon,
       routeOrOnPress: item.routeOrOnPress,
     })

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -8,7 +8,6 @@
 
 import { useMemo } from "react";
 import { useAuth, useUserProfile } from "@umituz/react-native-auth";
-import { useLocalization } from "../../domains/localization";
 import { createUserProfileDisplay } from "../utils/userProfileUtils";
 import { createAccountConfig } from "../utils/accountConfigUtils";
 import { useAuthHandlers } from "../utils/useAuthHandlers";
@@ -18,6 +17,7 @@ import type { SettingsConfig } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
 import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen } from "../navigation/types";
 import type { AccountScreenConfig } from "@umituz/react-native-auth";
+import type { SettingsTranslations } from "../screens/types/SettingsConfig";
 
 export interface SettingsFeatures {
   notifications?: boolean;
@@ -37,6 +37,7 @@ export interface UseSettingsScreenConfigParams {
   onFeedbackSubmit: (data: FeedbackFormData) => Promise<void>;
   additionalScreens?: AdditionalScreen[];
   features?: SettingsFeatures;
+  translations?: SettingsTranslations;
 }
 
 export interface SettingsScreenConfigResult {
@@ -51,7 +52,7 @@ export interface SettingsScreenConfigResult {
 export const useSettingsScreenConfig = (
   params: UseSettingsScreenConfigParams
 ): SettingsScreenConfigResult => {
-  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {} } = params;
+  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations } = params;
 
   const {
     notifications: showNotifications = true,
@@ -64,17 +65,15 @@ export const useSettingsScreenConfig = (
     legal: showLegal = true,
   } = features;
 
-  const { t } = useLocalization();
   const { user, loading, isAuthReady } = useAuth();
   const userProfileData = useUserProfile({});
 
   // Use centralized auth handlers
   const { handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } =
-    useAuthHandlers(appInfo);
+    useAuthHandlers(appInfo, translations?.errors);
 
   // Use settings config factory
-  const settingsConfig = useSettingsConfigFactory({
-    t,
+  const baseSettingsConfig = useSettingsConfigFactory({
     onFeedbackSubmit,
     handleRatePress,
     appStoreUrl: appInfo.appStoreUrl || "",
@@ -91,11 +90,15 @@ export const useSettingsScreenConfig = (
     },
   });
 
+  const settingsConfig = useMemo(() => ({
+    ...baseSettingsConfig,
+    translations,
+  }), [baseSettingsConfig, translations]);
+
   const userProfile = useMemo(() => createUserProfileDisplay({
     profileData: userProfileData,
-    t,
     onSignIn: handleSignIn,
-  }), [userProfileData, t, handleSignIn]);
+  }), [userProfileData, handleSignIn]);
 
   const accountConfig = useMemo(() => createAccountConfig({
     displayName: userProfileData?.displayName || user?.displayName || undefined,
@@ -106,13 +109,12 @@ export const useSettingsScreenConfig = (
     onSignIn: handleSignIn,
     onLogout: handleSignOut,
     onDeleteAccount: handleDeleteAccount,
-    t,
-  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);
+  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount]);
 
   // Use centralized FAQ translation
   const translatedFaqData = useMemo(() =>
-    translateFAQData(faqData, t, appInfo),
-    [faqData, t, appInfo]
+    translateFAQData(faqData, (key: string) => "", appInfo),
+    [faqData, appInfo]
   );
 
   return {

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -11,7 +11,6 @@ import {
   StackNavigator,
   type StackNavigatorConfig,
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "../../domains/localization";
 import { useNavigationHandlers, useSettingsScreens } from "./hooks";
 import {
   createNotificationTranslations,
@@ -24,10 +23,13 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (pr
   const {
     appInfo,
     legalUrls,
+    config,
   } = props;
-  const { t } = useLocalization();
+  const translations = config?.translations?.features;
+  const aboutTranslations = translations?.about;
+
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
-    useNavigationHandlers(appInfo, legalUrls);
+    useNavigationHandlers(appInfo, legalUrls, aboutTranslations);
 
   const screenOptions = React.useMemo(
     () => ({
@@ -36,11 +38,11 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (pr
     []
   );
 
-  const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
-  const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(t), [t]);
+  const notificationTranslations = React.useMemo(() => createNotificationTranslations(translations), [translations]);
+  const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(translations), [translations]);
   const legalScreenProps = React.useMemo(
-    () => createLegalScreenProps(t, handlePrivacyPress, handleTermsPress, handleEulaPress),
-    [t, handlePrivacyPress, handleTermsPress, handleEulaPress]
+    () => createLegalScreenProps(translations, handlePrivacyPress, handleTermsPress, handleEulaPress),
+    [translations, handlePrivacyPress, handleTermsPress, handleEulaPress]
   );
 
   const screens = useSettingsScreens({
@@ -49,7 +51,6 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (pr
     legalProps: legalScreenProps,
     notificationTranslations,
     quietHoursTranslations,
-    t,
   });
 
   const navigatorConfig: StackNavigatorConfig<SettingsStackParamList> = {

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

@@ -17,7 +17,8 @@ interface NavigationHandlersResult {
 
 export const useNavigationHandlers = (
   appInfo: AppInfo,
-  legalUrls: LegalUrls
+  legalUrls: LegalUrls,
+  aboutTranslations?: AboutConfig["texts"]
 ): NavigationHandlersResult => {
   const handlePrivacyPress = useCallback(() => {
     Linking.openURL(legalUrls.privacy);
@@ -45,8 +46,9 @@ export const useNavigationHandlers = (
         websiteDisplay: appInfo.websiteDisplay,
         moreAppsUrl: appInfo.moreAppsUrl,
       },
+      texts: aboutTranslations,
     }),
-    [appInfo]
+    [appInfo, aboutTranslations]
   );
 
   return {

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

@@ -23,7 +23,6 @@ export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
   legalProps: any;
   notificationTranslations: any;
   quietHoursTranslations: any;
-  t: (key: string) => string;
 }
 
 export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {
@@ -46,9 +45,10 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     gamificationConfig,
     videoTutorialConfig,
     accountConfig,
-    t,
   } = props;
 
+  const translations = config?.translations?.features;
+
   return useMemo(() => {
     const settingsMainScreen = createScreenWithProps(
       "SettingsMain",
@@ -96,10 +96,10 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       !!(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"),
+        searchPlaceholder: translations?.faqs?.searchPlaceholder || "",
+        emptySearchTitle: translations?.faqs?.emptySearchTitle || "",
+        emptySearchMessage: translations?.faqs?.emptySearchMessage || "",
+        headerTitle: translations?.faqs?.headerTitle || "",
       })
     );
 
@@ -108,8 +108,8 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     const gamificationScreen = createScreenWithProps("Gamification", GamificationScreen as any, { config: gamificationConfig });
 
     const languageScreen = createScreenWithProps("LanguageSelection", LanguageSelectionScreen, {
-      headerTitle: t("settings.language.title"),
-      searchPlaceholder: t("settings.languageSelection.searchPlaceholder"),
+      headerTitle: translations?.language?.title || "",
+      searchPlaceholder: translations?.languageSelection?.searchPlaceholder || "",
     });
 
     const accountScreen = createConditionalScreen(
@@ -119,7 +119,7 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
 
     const videoTutorialScreen = createScreenWithProps("VideoTutorial", VideoTutorialsScreen as any, {
       ...videoTutorialConfig,
-      title: videoTutorialConfig?.title || t("settings.videoTutorial.title"),
+      title: videoTutorialConfig?.title || translations?.videoTutorial?.title || "",
     });
 
     return combineScreens(
@@ -132,7 +132,7 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       videoTutorialScreen
     );
   }, [
-    t,
+    translations,
     showHeader,
     showCloseButton,
     onClose,