@umituz/react-native-settings 5.4.22 → 5.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.22",
+  "version": "5.4.23",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -1,7 +1,8 @@
 import { StyleSheet } from "react-native";
 import type { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { withAlpha } from "@umituz/react-native-design-system/theme";
 
-export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
+export const getFeedbackFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
         width: "100%",
@@ -25,7 +26,7 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         alignItems: "center",
         marginVertical: 32,
         paddingVertical: 16,
-        backgroundColor: "rgba(255,255,255,0.02)",
+        backgroundColor: withAlpha(tokens.colors.primary, 0.05),
         borderRadius: 16,
     },
     ratingLabel: {
@@ -34,6 +35,7 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         letterSpacing: 1,
         marginBottom: 16,
         textTransform: "uppercase",
+        color: tokens.colors.textSecondary,
     },
     stars: {
         flexDirection: "row",
@@ -52,10 +54,14 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
         borderRadius: 16,
         padding: 16,
         fontSize: 15,
+        color: tokens.colors.textPrimary,
+        backgroundColor: tokens.colors.surfaceSecondary,
+        borderColor: tokens.colors.border,
     },
     errorText: {
         marginTop: 8,
         fontWeight: "600",
+        color: tokens.colors.error,
     },
     submitButton: {
         width: "100%",

package/src/domains/gamification/components/AchievementItem.tsx

@@ -8,7 +8,7 @@ import { View } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system/theme";
 import type { AchievementItemProps } from "./types/AchievementItemProps";
-import { achievementItemStyles as styles } from "./styles/achievementItemStyles";
+import { createAchievementItemStyles } from "./styles/achievementItemStyles";
 
 export const AchievementItem: React.FC<AchievementItemProps> = ({
   title,
@@ -28,6 +28,7 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
   lockedOpacity,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createAchievementItemStyles(tokens);
   const finalAccentColor = accentColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
@@ -61,7 +62,7 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
           </AtomicText>
           {isUnlocked && (
             <View style={[styles.checkmark, { backgroundColor: finalAccentColor }]}>
-              <AtomicText style={[styles.checkmarkText, { color: tokens.colors.background }]}>
+              <AtomicText style={[styles.checkmarkText, { color: tokens.colors.onPrimary || '#FFFFFF' }]}>
                 ✓
               </AtomicText>
             </View>

package/src/domains/gamification/components/GamificationScreen/GamificationScreen.tsx

@@ -14,7 +14,7 @@ import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
-import { styles } from "./styles";
+import { createStyles } from "./styles";
 import type { GamificationScreenProps } from "./types";
 
 /**
@@ -39,6 +39,7 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
 }) => {
   const _navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
 
   // Use tokens for fallbacks
   const finalAccentColor = accentColor || tokens.colors.primary;

package/src/domains/gamification/components/GamificationScreen/styles.ts

@@ -3,41 +3,47 @@
  */
 
 import { StyleSheet } from "react-native";
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    padding: 16,
-    paddingBottom: 32,
-  },
-  header: {
-    marginBottom: 20,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-  },
-  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    marginBottom: 12,
-  },
-  statsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-  },
-  emptyText: {
-    fontSize: 14,
-    textAlign: "center",
-    paddingVertical: 20,
-  },
-});
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+    },
+    header: {
+      marginBottom: tokens.spacing.lg,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+    },
+    section: {
+      marginBottom: tokens.spacing.xl,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: "600",
+      marginBottom: tokens.spacing.md,
+      color: tokens.colors.textPrimary,
+    },
+    statsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: tokens.spacing.md,
+    },
+    emptyText: {
+      fontSize: 14,
+      textAlign: "center",
+      paddingVertical: tokens.spacing.lg,
+      color: tokens.colors.textSecondary,
+    },
+  });

package/src/domains/gamification/components/styles/achievementItemStyles.ts

@@ -3,72 +3,79 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const achievementItemStyles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 12,
-    borderRadius: 12,
-    marginBottom: 8,
-  },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-  content: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "600",
-    flex: 1,
-  },
-  checkmark: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 8,
-  },
-  checkmarkText: {
-    fontSize: 12,
-    fontWeight: "bold",
-  },
-  description: {
-    fontSize: 13,
-    lineHeight: 18,
-  },
-  progressContainer: {
-    marginTop: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  progressBar: {
-    flex: 1,
-    height: 4,
-    borderRadius: 2,
-    overflow: "hidden",
-  },
-  progressFill: {
-    height: "100%",
-    borderRadius: 2,
-  },
-  progressText: {
-    fontSize: 11,
-    minWidth: 40,
-    textAlign: "right",
-  },
-});
+export const createAchievementItemStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      marginBottom: tokens.spacing.sm,
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+    },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: tokens.spacing.md,
+    },
+    content: {
+      flex: 1,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 4,
+    },
+    title: {
+      fontSize: 16,
+      fontWeight: "600",
+      flex: 1,
+      color: "inherit",
+    },
+    checkmark: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: 8,
+    },
+    checkmarkText: {
+      fontSize: 12,
+      fontWeight: "bold",
+    },
+    description: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: "inherit",
+    },
+    progressContainer: {
+      marginTop: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    progressBar: {
+      flex: 1,
+      height: 4,
+      borderRadius: 2,
+      overflow: "hidden",
+    },
+    progressFill: {
+      height: "100%",
+      borderRadius: 2,
+    },
+    progressText: {
+      fontSize: 11,
+      minWidth: 40,
+      textAlign: "right",
+      color: "inherit",
+    },
+  });

package/src/domains/localization/infrastructure/components/LanguageSwitcher.styles.ts

@@ -3,36 +3,39 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
 const DEFAULT_CONFIG = {
   defaultIconSize: 20,
 };
 
-export const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  flag: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-  languageName: {
-    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  icon: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-});
+export const createLanguageSwitcherStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.xs,
+      paddingVertical: tokens.spacing.xs,
+    },
+    disabled: {
+      opacity: 0.5,
+    },
+    flag: {
+      fontSize: DEFAULT_CONFIG.defaultIconSize,
+      textAlign: 'center',
+    },
+    languageName: {
+      fontSize: 14,
+      fontWeight: '600',
+      textAlign: 'center',
+      color: tokens.colors.textPrimary,
+    },
+    icon: {
+      fontSize: DEFAULT_CONFIG.defaultIconSize,
+      textAlign: 'center',
+    },
+  });
 
 export const DEFAULT_CONFIG_VALUES = {
   hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } as const,

package/src/domains/localization/infrastructure/components/LanguageSwitcher.tsx

@@ -8,7 +8,7 @@ import { TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from
 import { AtomicText } from '@umituz/react-native-design-system/atoms';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { useLanguageSwitcher } from './useLanguageSwitcher';
-import { styles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
+import { createLanguageSwitcherStyles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
 
 export interface LanguageSwitcherProps {
   showName?: boolean;
@@ -36,6 +36,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   accessibilityLabel,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createLanguageSwitcherStyles(tokens);
   const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
 
   const accessibilityProps = useMemo(() => ({
@@ -50,9 +51,8 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   return (
     <TouchableOpacity
       style={[
-        styles.container, 
-        { gap: tokens.spacing.xs },
-        style, 
+        styles.container,
+        style,
         disabled && styles.disabled
       ]}
       onPress={handlePress}
@@ -68,8 +68,8 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
         </AtomicText>
       )}
       {showName && (
-        <AtomicText 
-          type="bodySmall" 
+        <AtomicText
+          type="bodySmall"
           style={[styles.languageName, { color: textColor, fontWeight: '600' }, textStyle]}
         >
           {currentLang.nativeName}

package/src/domains/localization/presentation/components/LanguageItem.styles.ts

@@ -3,38 +3,52 @@
  */
 
 import { StyleSheet } from 'react-native';
+import type { DesignTokens } from "@umituz/react-native-design-system/theme";
 
-export const styles = StyleSheet.create({
-  languageItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderWidth: 1,
-  },
-  selectedLanguageItem: {
-    borderWidth: 2,
-  },
-  languageContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  flag: {
-    fontSize: 24,
-    marginRight: 16,
-  },
-  languageText: {
-    flex: 1,
-    flexShrink: 1,
-  },
-  nativeName: {
-    // Styling moved to themedStyles in component for token support
-  },
-  languageName: {
-    // Styling moved to themedStyles in component for token support
-  },
-  checkIcon: {
-    // Replaced by AtomicIcon
-  },
-});
+export const createLanguageItemStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    languageItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.md,
+      marginBottom: tokens.spacing.sm,
+      overflow: 'hidden',
+    },
+    selectedLanguageItem: {
+      borderWidth: 2,
+      borderColor: tokens.colors.primary,
+    },
+    languageContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      padding: tokens.spacing.md,
+    },
+    flag: {
+      fontSize: 24,
+      marginRight: tokens.spacing.md,
+    },
+    languageText: {
+      flex: 1,
+      flexShrink: 1,
+    },
+    nativeName: {
+      fontSize: 16,
+      fontWeight: '500',
+      color: tokens.colors.textPrimary,
+      marginBottom: 2,
+    },
+    languageName: {
+      fontSize: 14,
+      color: tokens.colors.textSecondary,
+    },
+    checkIcon: {
+      padding: tokens.spacing.md,
+      // Replaced by AtomicIcon
+    },
+  });
 

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

@@ -17,7 +17,7 @@ import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import type { Language } from '../../infrastructure/storage/types/Language';
 import { ICON_PATHS } from '../../../../utils/iconPaths';
-import { styles } from './LanguageItem.styles';
+import { createLanguageItemStyles } from './LanguageItem.styles';
 
 interface LanguageItemProps {
   item: Language;
@@ -42,29 +42,9 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
   customStyles,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = createLanguageItemStyles(tokens);
 
   const themedStyles = useMemo(() => ({
-    languageItem: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      borderRadius: tokens.borders.radius.lg,
-      backgroundColor: tokens.colors.surfaceSecondary,
-      marginBottom: tokens.spacing.md,
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      justifyContent: 'space-between' as const,
-    } as ViewStyle,
-    selectedLanguageItem: {
-      backgroundColor: tokens.colors.surface,
-      borderColor: tokens.colors.primary,
-      borderWidth: 1.5,
-    } as ViewStyle,
-    nativeName: {
-      color: tokens.colors.textPrimary,
-    } as TextStyle,
-    languageName: {
-      color: tokens.colors.textSecondary,
-    } as TextStyle,
     flagContainer: {
       width: 44,
       height: 44,
@@ -80,8 +60,8 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
     <TouchableOpacity
       testID="language-item-test"
       style={[
-        themedStyles.languageItem,
-        isSelected && themedStyles.selectedLanguageItem,
+        styles.languageItem,
+        isSelected && styles.selectedLanguageItem,
         customStyles?.languageItem,
       ]}
       onPress={() => {
@@ -110,15 +90,15 @@ export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
           )}
         </View>
         <View style={[styles.languageText, customStyles?.languageText]}>
-          <AtomicText 
+          <AtomicText
             type="bodyLarge"
-            style={[themedStyles.nativeName, { fontWeight: '600' }, customStyles?.nativeName]}
+            style={[styles.nativeName, { fontWeight: '600' }, customStyles?.nativeName]}
           >
             {item.nativeName}
           </AtomicText>
-          <AtomicText 
-            type="labelMedium" 
-            style={[themedStyles.languageName, customStyles?.nativeName]}
+          <AtomicText
+            type="labelMedium"
+            style={[styles.languageName, customStyles?.nativeName]}
           >
             {item.name}
           </AtomicText>

package/src/domains/localization/scripts/translate-missing.js

@@ -9,7 +9,11 @@
 import fs from 'fs';
 import path from 'path';
 import { parseTypeScriptFile, generateTypeScriptContent } from './utils/file-parser.js';
-import { googleTranslateService } from '@umituz/react-native-google-translate/services';
+import {
+  googleTranslateService,
+  getTargetLanguage,
+  getLanguageDisplayName,
+} from '@umituz/react-native-google-translate/services';
 import { setupLanguages } from './setup-languages.js';
 import { syncTranslations } from './sync-translations.js';
 
@@ -104,100 +108,6 @@ async function translateMissing(targetDir, srcDir) {
   console.log('\n✅ All translations completed!');
 }
 
-// Helper functions (can be replaced with package imports later)
-const LANGUAGE_MAP = {
-  'ar-SA': 'ar',
-  'bg-BG': 'bg',
-  'cs-CZ': 'cs',
-  'da-DK': 'da',
-  'de-DE': 'de',
-  'el-GR': 'el',
-  'en-AU': 'en',
-  'en-CA': 'en',
-  'en-GB': 'en',
-  'es-ES': 'es',
-  'es-MX': 'es',
-  'fi-FI': 'fi',
-  'fr-CA': 'fr',
-  'fr-FR': 'fr',
-  'hi-IN': 'hi',
-  'hr-HR': 'hr',
-  'hu-HU': 'hu',
-  'id-ID': 'id',
-  'it-IT': 'it',
-  'ja-JP': 'ja',
-  'ko-KR': 'ko',
-  'ms-MY': 'ms',
-  'nl-NL': 'nl',
-  'no-NO': 'no',
-  'pl-PL': 'pl',
-  'pt-BR': 'pt',
-  'pt-PT': 'pt',
-  'ro-RO': 'ro',
-  'ru-RU': 'ru',
-  'sk-SK': 'sk',
-  'sl-SI': 'sl',
-  'sv-SE': 'sv',
-  'th-TH': 'th',
-  'tl-PH': 'tl',
-  'tr-TR': 'tr',
-  'uk-UA': 'uk',
-  'vi-VN': 'vi',
-  'zh-CN': 'zh-CN',
-  'zh-TW': 'zh-TW',
-};
-
-const LANGUAGE_NAMES = {
-  'ar-SA': 'Arabic (Saudi Arabia)',
-  'bg-BG': 'Bulgarian',
-  'cs-CZ': 'Czech',
-  'da-DK': 'Danish',
-  'de-DE': 'German',
-  'el-GR': 'Greek',
-  'en-AU': 'English (Australia)',
-  'en-CA': 'English (Canada)',
-  'en-GB': 'English (UK)',
-  'en-US': 'English (US)',
-  'es-ES': 'Spanish (Spain)',
-  'es-MX': 'Spanish (Mexico)',
-  'fi-FI': 'Finnish',
-  'fr-CA': 'French (Canada)',
-  'fr-FR': 'French (France)',
-  'hi-IN': 'Hindi',
-  'hr-HR': 'Croatian',
-  'hu-HU': 'Hungarian',
-  'id-ID': 'Indonesian',
-  'it-IT': 'Italian',
-  'ja-JP': 'Japanese',
-  'ko-KR': 'Korean',
-  'ms-MY': 'Malay',
-  'nl-NL': 'Dutch',
-  'no-NO': 'Norwegian',
-  'pl-PL': 'Polish',
-  'pt-BR': 'Portuguese (Brazil)',
-  'pt-PT': 'Portuguese (Portugal)',
-  'ro-RO': 'Romanian',
-  'ru-RU': 'Russian',
-  'sk-SK': 'Slovak',
-  'sl-SI': 'Slovenian',
-  'sv-SE': 'Swedish',
-  'th-TH': 'Thai',
-  'tl-PH': 'Tagalog',
-  'tr-TR': 'Turkish',
-  'uk-UA': 'Ukrainian',
-  'vi-VN': 'Vietnamese',
-  'zh-CN': 'Chinese (Simplified)',
-  'zh-TW': 'Chinese (Traditional)',
-};
-
-function getTargetLanguage(langCode) {
-  return LANGUAGE_MAP[langCode];
-}
-
-function getLanguageDisplayName(code) {
-  return LANGUAGE_NAMES[code] || code;
-}
-
 const isMainModule = import.meta.url.endsWith('translate-missing.js');
 if (isMainModule) {
   const args = process.argv.slice(2).filter(arg => !arg.startsWith('--'));

package/src/domains/localization/scripts/utils/translation-config.js

@@ -1,116 +1,20 @@
 /**
  * Translation Configuration
- * Language mappings and constants for translation system
+ * Re-exports from @umituz/react-native-google-translate package
+ * This file provides backward compatibility for existing imports
  */
 
-export const LANGUAGE_MAP = {
-  'ar-SA': 'ar',
-  'bg-BG': 'bg',
-  'cs-CZ': 'cs',
-  'da-DK': 'da',
-  'de-DE': 'de',
-  'el-GR': 'el',
-  'en-AU': 'en',
-  'en-CA': 'en',
-  'en-GB': 'en',
-  'es-ES': 'es',
-  'es-MX': 'es',
-  'fi-FI': 'fi',
-  'fr-CA': 'fr',
-  'fr-FR': 'fr',
-  'hi-IN': 'hi',
-  'hr-HR': 'hr',
-  'hu-HU': 'hu',
-  'id-ID': 'id',
-  'it-IT': 'it',
-  'ja-JP': 'ja',
-  'ko-KR': 'ko',
-  'ms-MY': 'ms',
-  'nl-NL': 'nl',
-  'no-NO': 'no',
-  'pl-PL': 'pl',
-  'pt-BR': 'pt',
-  'pt-PT': 'pt',
-  'ro-RO': 'ro',
-  'ru-RU': 'ru',
-  'sk-SK': 'sk',
-  'sl-SI': 'sl',
-  'sv-SE': 'sv',
-  'th-TH': 'th',
-  'tl-PH': 'tl',
-  'tr-TR': 'tr',
-  'uk-UA': 'uk',
-  'vi-VN': 'vi',
-  'zh-CN': 'zh-CN',
-  'zh-TW': 'zh-TW',
-};
-
-export const SKIP_WORDS = new Set([
-  'Google',
-  'Apple',
-  'Facebook',
-  'Instagram',
-  'Twitter',
-  'YouTube',
-  'WhatsApp',
-]);
-
-export const LANGUAGE_NAMES = {
-  'ar-SA': 'Arabic (Saudi Arabia)',
-  'bg-BG': 'Bulgarian',
-  'cs-CZ': 'Czech',
-  'da-DK': 'Danish',
-  'de-DE': 'German',
-  'el-GR': 'Greek',
-  'en-AU': 'English (Australia)',
-  'en-CA': 'English (Canada)',
-  'en-GB': 'English (UK)',
-  'en-US': 'English (US)',
-  'es-ES': 'Spanish (Spain)',
-  'es-MX': 'Spanish (Mexico)',
-  'fi-FI': 'Finnish',
-  'fr-CA': 'French (Canada)',
-  'fr-FR': 'French (France)',
-  'hi-IN': 'Hindi',
-  'hr-HR': 'Croatian',
-  'hu-HU': 'Hungarian',
-  'id-ID': 'Indonesian',
-  'it-IT': 'Italian',
-  'ja-JP': 'Japanese',
-  'ko-KR': 'Korean',
-  'ms-MY': 'Malay',
-  'nl-NL': 'Dutch',
-  'no-NO': 'Norwegian',
-  'pl-PL': 'Polish',
-  'pt-BR': 'Portuguese (Brazil)',
-  'pt-PT': 'Portuguese (Portugal)',
-  'ro-RO': 'Romanian',
-  'ru-RU': 'Russian',
-  'sk-SK': 'Slovak',
-  'sl-SI': 'Slovenian',
-  'sv-SE': 'Swedish',
-  'th-TH': 'Thai',
-  'tl-PH': 'Tagalog',
-  'tr-TR': 'Turkish',
-  'uk-UA': 'Ukrainian',
-  'vi-VN': 'Vietnamese',
-  'zh-CN': 'Chinese (Simplified)',
-  'zh-TW': 'Chinese (Traditional)',
-};
+export {
+  LANGUAGE_MAP,
+  SKIP_WORDS,
+  LANGUAGE_NAMES,
+  getTargetLanguage,
+  isEnglishVariant,
+  getLanguageDisplayName,
+  shouldSkipWord,
+} from '@umituz/react-native-google-translate/services';
 
+// Backward compatibility alias
 export function getLangDisplayName(code) {
-  return LANGUAGE_NAMES[code] || code;
-}
-
-export function getTargetLanguage(langCode) {
-  return LANGUAGE_MAP[langCode];
-}
-
-export function shouldSkipWord(word) {
-  return SKIP_WORDS.has(word);
-}
-
-export function isEnglishVariant(langCode) {
-  const targetLang = LANGUAGE_MAP[langCode];
-  return targetLang === 'en';
+  return getLanguageDisplayName(code);
 }

package/src/domains/localization/scripts/utils/translator.js

@@ -1,91 +0,0 @@
-/**
- * Translation Utilities
- * Handles call to translation APIs
- */
-
-import { getTargetLanguage, shouldSkipWord } from './translation-config.js';
-
-let lastCallTime = 0;
-const MIN_DELAY = 100; // ms
-
-async function translateText(text, targetLang) {
-  if (!text || typeof text !== 'string') return text;
-  if (shouldSkipWord(text)) return text;
-
-  // Rate limiting
-  const now = Date.now();
-  const waitTime = Math.max(0, MIN_DELAY - (now - lastCallTime));
-  if (waitTime > 0) await new Promise(resolve => setTimeout(resolve, waitTime));
-  lastCallTime = Date.now();
-
-  try {
-    const encodedText = encodeURIComponent(text);
-    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=${targetLang}&dt=t&q=${encodedText}`;
-    
-    const response = await fetch(url);
-    if (!response.ok) return text;
-    
-    const data = await response.json();
-    return data && data[0] && data[0][0] && data[0][0][0] ? data[0][0][0] : text;
-  } catch (error) {
-    return text;
-  }
-}
-
-function needsTranslation(value, enValue) {
-  if (typeof enValue !== 'string' || !enValue.trim()) return false;
-  if (shouldSkipWord(enValue)) return false;
-
-  // CRITICAL OPTIMIZATION: If enValue is a technical key (e.g. "scenario.xxx.title"),
-  // skip translating it to other languages. We only translate REAL English content.
-  const isTechnicalKey = enValue.includes('.') && !enValue.includes(' ');
-  if (isTechnicalKey) return false;
-
-  // If value is missing or same as English, it needs translation
-  if (!value || typeof value !== 'string') return true;
-
-  if (value === enValue) {
-    const isSingleWord = !enValue.includes(' ') && enValue.length < 20;
-    return !isSingleWord;
-  }
-
-  // Detect outdated template patterns (e.g., {{appName}}, {{variable}})
-  if (value && typeof value === 'string') {
-    const hasTemplatePattern = value.includes('{{') && value.includes('}}');
-    if (hasTemplatePattern && !enValue.includes('{{')) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-export async function translateObject(enObj, targetObj, targetLang, path = '', stats = { count: 0, checked: 0, translatedKeys: [] }) {
-  const keys = Object.keys(enObj);
-
-  if (!stats.translatedKeys) stats.translatedKeys = [];
-
-  for (const key of keys) {
-    const enValue = enObj[key];
-    const targetValue = targetObj[key];
-    const currentPath = path ? `${path}.${key}` : key;
-
-    if (typeof enValue === 'object' && enValue !== null) {
-      if (!targetObj[key] || typeof targetObj[key] !== 'object') targetObj[key] = {};
-      await translateObject(enValue, targetObj[key], targetLang, currentPath, stats);
-    } else if (typeof enValue === 'string') {
-      stats.checked++;
-      if (needsTranslation(targetValue, enValue)) {
-        // Show progress for translations
-        process.stdout.write(`   \r      Progress: ${stats.checked} keys checked, ${stats.count} translated...`);
-
-        const translated = await translateText(enValue, targetLang);
-        if (translated !== enValue) {
-          targetObj[key] = translated;
-          stats.count++;
-          stats.translatedKeys.push({ key: currentPath, from: enValue, to: translated });
-        }
-      }
-    }
-  }
-}