@umituz/react-native-settings 5.4.21 → 5.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.21",
+  "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",
@@ -124,6 +124,7 @@
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-google-translate": "*",
     "expo": ">=54.0.0",
     "expo-constants": ">=55.0.0",
     "expo-device": ">=6.0.0",
@@ -162,6 +163,7 @@
     "@umituz/react-native-auth": "^4.3.39",
     "@umituz/react-native-design-system": "^4.27.0",
     "@umituz/react-native-firebase": "^2.4.55",
+    "@umituz/react-native-google-translate": "^1.0.0",
     "@umituz/react-native-sentry": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",

package/src/domains/ai-consent/presentation/components/AIConsentModal.tsx

@@ -16,8 +16,10 @@
  */
 
 import React, { memo } from 'react';
-import { Modal, View, StyleSheet } from 'react-native';
+import { Modal, View } from 'react-native';
 import { AIConsentScreen, type AIProvider } from '../screens/AIConsentScreen';
+import { useThemedStyleSheet } from '@umituz/react-native-design-system/theme';
+import type { Theme } from '@umituz/react-native-design-system/theme';
 
 export interface AIConsentModalProps {
   visible: boolean;
@@ -34,6 +36,8 @@ export const AIConsentModal: React.FC<AIConsentModalProps> = memo(({
   providers,
   customMessage,
 }) => {
+  const styles = useThemedStyleSheet(createStyles);
+
   return (
     <Modal
       visible={visible}
@@ -56,9 +60,9 @@ export const AIConsentModal: React.FC<AIConsentModalProps> = memo(({
 
 AIConsentModal.displayName = 'AIConsentModal';
 
-const styles = StyleSheet.create({
+const createStyles = (theme: Theme) => ({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.colors.backgroundPrimary,
   },
 });

package/src/domains/ai-consent/presentation/screens/AIConsentScreen.tsx

@@ -15,7 +15,6 @@
 import React, { memo } from 'react';
 import {
   View,
-  StyleSheet,
   ScrollView,
   TouchableOpacity,
 } from 'react-native';
@@ -31,7 +30,8 @@ import {
   NavigationHeader,
   useAppNavigation,
 } from '@umituz/react-native-design-system/molecules';
-import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import { useThemedStyleSheet } from '@umituz/react-native-design-system/theme';
+import type { Theme } from '@umituz/react-native-design-system/theme';
 
 export interface AIProvider {
   name: string;
@@ -85,7 +85,7 @@ export const AIConsentScreen: React.FC<AIConsentScreenProps> = memo(({
   standalone = false,
 }) => {
   const navigation = useAppNavigation();
-  const tokens = useAppDesignTokens();
+  const styles = useThemedStyleSheet(createStyles);
   const [loading, setLoading] = React.useState(false);
 
   // Get params from route or use props
@@ -289,7 +289,7 @@ export const AIConsentScreen: React.FC<AIConsentScreenProps> = memo(({
 
 AIConsentScreen.displayName = 'AIConsentScreen';
 
-const styles = StyleSheet.create({
+const createStyles = (theme: Theme) => ({
   scrollView: {
     flex: 1,
   },
@@ -300,32 +300,32 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 22,
     marginBottom: 24,
-    color: '#374151',
+    color: theme.colors.textSecondary,
   },
   section: {
     marginBottom: 24,
     padding: 16,
-    backgroundColor: '#F9FAFB',
+    backgroundColor: theme.colors.surfaceVariant,
     borderRadius: 12,
   },
   sectionTitle: {
     fontSize: 17,
     fontWeight: '600',
-    color: '#111827',
+    color: theme.colors.textPrimary,
     marginBottom: 12,
   },
   providerList: {
     gap: 12,
   },
   providerItem: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.colors.surface,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: '#E5E7EB',
+    borderColor: theme.colors.borderLight,
   },
   providerHeader: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 4,
@@ -333,26 +333,26 @@ const styles = StyleSheet.create({
   providerName: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#111827',
+    color: theme.colors.textPrimary,
   },
   privacyLink: {
     fontSize: 13,
-    color: '#3B82F6',
+    color: theme.colors.primary,
   },
   providerPurpose: {
     fontSize: 14,
-    color: '#6B7280',
+    color: theme.colors.textTertiary,
   },
   bullet: {
     fontSize: 15,
-    color: '#374151',
+    color: theme.colors.textSecondary,
     lineHeight: 22,
     marginLeft: 8,
   },
   note: {
     fontSize: 13,
-    color: '#6B7280',
-    fontStyle: 'italic',
+    color: theme.colors.textTertiary,
+    fontStyle: 'italic' as const,
     marginLeft: 8,
     marginTop: 4,
   },
@@ -362,15 +362,15 @@ const styles = StyleSheet.create({
   },
   linkText: {
     fontSize: 15,
-    color: '#3B82F6',
+    color: theme.colors.primary,
     fontWeight: '500',
   },
   declarationSection: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     alignItems: 'flex-start',
     marginTop: 8,
     padding: 12,
-    backgroundColor: '#EFF6FF',
+    backgroundColor: theme.colors.primaryBackground || 'rgba(90, 175, 127, 0.15)',
     borderRadius: 8,
   },
   checkbox: {
@@ -383,26 +383,26 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
     borderRadius: 4,
-    backgroundColor: '#3B82F6',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: theme.colors.primary,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
   },
   checkmark: {
-    color: '#FFFFFF',
+    color: theme.colors.onPrimary || '#FFFFFF',
     fontSize: 16,
     fontWeight: '700',
   },
   declarationText: {
     flex: 1,
     fontSize: 14,
-    color: '#1E3A8A',
+    color: theme.colors.textPrimary,
     lineHeight: 20,
   },
   footer: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: '#E5E7EB',
+    borderTopColor: theme.colors.borderLight,
     gap: 12,
   },
   declineButton: {

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

@@ -3,17 +3,28 @@
 /**
  * Translate Missing Script
  * Automatically translates missing strings using Google Translate
+ * Refactored to use @umituz/react-native-google-translate package
  */
 
 import fs from 'fs';
 import path from 'path';
 import { parseTypeScriptFile, generateTypeScriptContent } from './utils/file-parser.js';
-import { getTargetLanguage, getLangDisplayName } from './utils/translation-config.js';
-import { translateObject } from './utils/translator.js';
+import {
+  googleTranslateService,
+  getTargetLanguage,
+  getLanguageDisplayName,
+} from '@umituz/react-native-google-translate/services';
 import { setupLanguages } from './setup-languages.js';
 import { syncTranslations } from './sync-translations.js';
 
 async function translateMissing(targetDir, srcDir) {
+  // Initialize the translation service
+  googleTranslateService.initialize({
+    minDelay: 100,
+    maxRetries: 3,
+    timeout: 10000,
+  });
+
   const localesDir = path.resolve(process.cwd(), targetDir);
   const enUSPath = path.join(localesDir, 'en-US.ts');
 
@@ -41,27 +52,44 @@ async function translateMissing(targetDir, srcDir) {
 
   for (const file of files) {
     const langCode = file.replace('.ts', '');
-    const targetLang = getTargetLanguage(langCode);
-    const langName = getLangDisplayName(langCode);
 
-    if (!targetLang || targetLang === 'en') continue;
+    // Skip English variants
+    const targetLang = getTargetLanguage(langCode);
+    if (!targetLang || targetLang === 'en') {
+      console.log(`⏭️ Skipping ${langCode} (English variant)`);
+      continue;
+    }
 
+    const langName = getLanguageDisplayName(langCode);
     console.log(`🌍 Translating ${langCode} (${langName})...`);
 
     const targetPath = path.join(localesDir, file);
     const target = parseTypeScriptFile(targetPath);
 
-    const stats = { count: 0, checked: 0, translatedKeys: [] };
-    await translateObject(enUS, target, targetLang, '', stats);
+    const stats = {
+      totalCount: 0,
+      successCount: 0,
+      failureCount: 0,
+      skippedCount: 0,
+      translatedKeys: [],
+    };
+
+    await googleTranslateService.translateObject(
+      enUS,
+      target,
+      targetLang,
+      '',
+      stats
+    );
 
     // Clear progress line
     process.stdout.write('\r' + ' '.repeat(80) + '\r');
 
-    if (stats.count > 0) {
+    if (stats.successCount > 0) {
       const content = generateTypeScriptContent(target, langCode);
       fs.writeFileSync(targetPath, content);
 
-      console.log(`      ✅ Successfully translated ${stats.count} keys:`);
+      console.log(`      ✅ Successfully translated ${stats.successCount} keys:`);
 
       // Detailed logging of translated keys
       const displayCount = Math.min(stats.translatedKeys.length, 15);

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 });
-        }
-      }
-    }
-  }
-}