@umituz/react-native-localization 1.2.2 → 1.3.0

package/lib/index.d.ts

@@ -4,6 +4,8 @@
  */
 export { useLocalization, useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 export { default as i18n } from './infrastructure/config/i18n';
 export { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE, getLanguageByCode, isLanguageSupported, getDefaultLanguage, getDeviceLocale, } from './infrastructure/config/languages';
 export type { Language, ILocalizationRepository } from './domain/repositories/ILocalizationRepository';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAGnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAGxF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAG3C,YAAY,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAGnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAG1F,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAG3C,YAAY,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC"}

package/lib/index.js

@@ -6,6 +6,8 @@
 export { useLocalization, useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 // Components
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 // Configuration
 export { default as i18n } from './infrastructure/config/i18n';
 export { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE, getLanguageByCode, isLanguageSupported, getDefaultLanguage, getDeviceLocale, } from './infrastructure/config/languages';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEnG,aAAa;AACb,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAExF,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEnG,aAAa;AACb,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAE1F,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC"}

package/lib/infrastructure/components/LanguageSwitcher.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface LanguageSwitcherProps {
+    showName?: boolean;
+    showFlag?: boolean;
+    color?: string;
+    navigationScreen?: string;
+    style?: any;
+    textStyle?: any;
+}
+export declare const LanguageSwitcher: React.FC<LanguageSwitcherProps>;
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.d.ts.map

package/lib/infrastructure/components/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/components/LanguageSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAQD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwC5D,CAAC;AAqBF,eAAe,gBAAgB,CAAC"}

package/lib/infrastructure/components/LanguageSwitcher.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+const languageSwitcherConfig = {
+    defaultIconSize: 20,
+    defaultNavigationScreen: 'LanguageSelection',
+    hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+};
+export const LanguageSwitcher = ({ showName = false, showFlag = true, color, navigationScreen = languageSwitcherConfig.defaultNavigationScreen, style, textStyle, }) => {
+    const navigation = useNavigation();
+    const { currentLanguage } = useLocalization();
+    const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+    const navigateToLanguageSelection = () => {
+        if (navigation && navigationScreen) {
+            navigation.navigate(navigationScreen);
+        }
+    };
+    const iconColor = color || '#000000';
+    return (<TouchableOpacity style={[styles.container, style]} onPress={navigateToLanguageSelection} activeOpacity={0.7} hitSlop={languageSwitcherConfig.hitSlop}>
+      {showFlag && (<Text style={[styles.flag, textStyle]}>{currentLang.flag}</Text>)}
+      {showName && (<Text style={[styles.languageName, { color: iconColor }, textStyle]}>
+          {currentLang.nativeName}
+        </Text>)}
+      {!showName && !showFlag && (<Text style={[styles.icon, { color: iconColor }]}>🌐</Text>)}
+    </TouchableOpacity>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingHorizontal: 4,
+    },
+    flag: {
+        fontSize: 20,
+    },
+    languageName: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    icon: {
+        fontSize: 20,
+    },
+});
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.js.map

package/lib/infrastructure/components/LanguageSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.js","sourceRoot":"","sources":["../../../src/infrastructure/components/LanguageSwitcher.tsx"],"names":[],"mappings":"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"}

package/lib/infrastructure/components/useLanguageNavigation.d.ts

@@ -0,0 +1,6 @@
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+export declare const useLanguageNavigation: (navigationScreen: string) => {
+    currentLang: Language;
+    navigateToLanguageSelection: () => void;
+};
+//# sourceMappingURL=useLanguageNavigation.d.ts.map

package/lib/infrastructure/components/useLanguageNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLanguageNavigation.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/components/useLanguageNavigation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAC;AAE7E,eAAO,MAAM,qBAAqB,GAAI,kBAAkB,MAAM;;;CAY7D,CAAC"}

package/lib/infrastructure/components/useLanguageNavigation.js

@@ -0,0 +1,16 @@
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+export const useLanguageNavigation = (navigationScreen) => {
+    const navigation = useNavigation();
+    const { currentLanguage } = useLocalization();
+    const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+    const navigateToLanguageSelection = () => {
+        if (navigation && navigationScreen) {
+            navigation.navigate(navigationScreen);
+        }
+    };
+    return { currentLang, navigateToLanguageSelection };
+};
+//# sourceMappingURL=useLanguageNavigation.js.map

package/lib/infrastructure/components/useLanguageNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLanguageNavigation.js","sourceRoot":"","sources":["../../../src/infrastructure/components/useLanguageNavigation.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAG5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;IAC9C,MAAM,WAAW,GAAG,iBAAiB,CAAC,eAAe,CAAC,IAAI,kBAAkB,EAAE,CAAC;IAE/E,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,UAAU,CAAC,QAAQ,CAAC,gBAAyB,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,2BAA2B,EAAE,CAAC;AACtD,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Universal localization system for React Native apps with i18n support",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -46,7 +46,13 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "@react-navigation/native": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "typescript": "^5.3.3",

package/src/index.ts

@@ -8,6 +8,8 @@ export { useLocalization, useLocalizationStore } from './infrastructure/storage/
 
 // Components
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 
 // Configuration
 export { default as i18n } from './infrastructure/config/i18n';

package/src/infrastructure/components/LanguageSwitcher.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+
+interface LanguageSwitcherProps {
+  showName?: boolean;
+  showFlag?: boolean;
+  color?: string;
+  navigationScreen?: string;
+  style?: any;
+  textStyle?: any;
+}
+
+const languageSwitcherConfig = {
+  defaultIconSize: 20,
+  defaultNavigationScreen: 'LanguageSelection',
+  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+};
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  showName = false,
+  showFlag = true,
+  color,
+  navigationScreen = languageSwitcherConfig.defaultNavigationScreen,
+  style,
+  textStyle,
+}) => {
+  const navigation = useNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    if (navigation && navigationScreen) {
+      navigation.navigate(navigationScreen as never);
+    }
+  };
+
+  const iconColor = color || '#000000';
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, style]}
+      onPress={navigateToLanguageSelection}
+      activeOpacity={0.7}
+      hitSlop={languageSwitcherConfig.hitSlop}
+    >
+      {showFlag && (
+        <Text style={[styles.flag, textStyle]}>{currentLang.flag}</Text>
+      )}
+      {showName && (
+        <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
+          {currentLang.nativeName}
+        </Text>
+      )}
+      {!showName && !showFlag && (
+        <Text style={[styles.icon, { color: iconColor }]}>🌐</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 4,
+  },
+  flag: {
+    fontSize: 20,
+  },
+  languageName: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  icon: {
+    fontSize: 20,
+  },
+});
+
+export default LanguageSwitcher;
+

package/src/infrastructure/components/useLanguageNavigation.ts

@@ -0,0 +1,20 @@
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+
+export const useLanguageNavigation = (navigationScreen: string) => {
+  const navigation = useNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    if (navigation && navigationScreen) {
+      navigation.navigate(navigationScreen as never);
+    }
+  };
+
+  return { currentLang, navigateToLanguageSelection };
+};
+