locon 1.0.4 → 1.1.1

package/README.md

@@ -4,6 +4,28 @@
 It provides a context provider, a hook, and a simple text component to keep
 your translations flat, explicit, and easy to use.
 
+Basic usage: use `<LText>` instead of `<Text>`. Put plain text in your project language (or the default language) inside and it will be localized automatically.
+
+```tsx
+import { LText } from 'locon'
+
+function Example() {
+  return <LText>Hello</LText>
+}
+```
+
+For dynamic strings (variables), use `useLocon()` and `l()`:
+
+```tsx
+import { Text } from 'react-native'
+import { useLocon } from 'locon'
+
+function Example({ userName }: { userName: string }) {
+  const { l } = useLocon()
+  return <Text>{l('hello')}, {userName}</Text>
+}
+```
+
 ---
 
 ### Features
@@ -25,10 +47,19 @@ npm install locon
 yarn add locon
 ```
 
+**Important:** After installation, run pod install for iOS:
+
+```bash
+cd ios && pod install
+```
+
 **Peer dependencies**
 
 - `react >= 19.0.0`
 - `react-native >= 0.70.0`
+- `react-native-localize >= 3.0.0` (installed automatically)
+
+`react-native-localize` is used for accurate device language detection on iOS and Android.
 
 ---
 
@@ -79,9 +110,7 @@ function App() {
   return (
     <Locon
       assets={{ en, de }}
-      defaultLocale='en'
       projectLocale='de'
-      autodetect
     >
       <NavigationContainer theme={theme}>
         <RootNavigator />
@@ -96,9 +125,9 @@ export default App
 If `currentLocale` is not provided and `autodetect` is `true` (default),
 `locon` will:
 
-1. Read device locale from `Intl.DateTimeFormat().resolvedOptions().locale`
-2. Extract language code (e.g. `'en'` from `'en-US'`)
-3. If that language exists in `assets`, use it as initial locale
+1. Use `react-native-localize` to detect device locale on iOS/Android
+2. Match the detected locale (including region) or just language code against your `assets`
+3. If a match is found, use it as initial locale
 4. Otherwise, fall back to `defaultLocale`
 
 #### 3. Use the `useLocon()` hook
@@ -145,7 +174,7 @@ function Welcome() {
   return (
     <View>
       {/* Uses children as value to find the key, with fallback children */}
-      <LText>Hello</LText>
+      <LText>Hallo</LText>
 
       {/* Or explicit key with fallback children */}
       <LText assetKey='welcome_title'>Welcome</LText>
@@ -180,6 +209,7 @@ interface LoconProps extends PropsWithChildren {
   Used when key is missing in the current locale.
 
 - **`projectLocale`** (default `'en'`)  
+  Define language you use for texts in your project.
   Used for reverse lookup by value (e.g. when you only know the string in
   project language).
 

package/dist/index.js

@@ -3,37 +3,105 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-var RNLocalize = require('react-native-localize');
 var reactNative = require('react-native');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var RNLocalize__namespace = /*#__PURE__*/_interopNamespace(RNLocalize);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
-// src/locon/index.tsx
+// src/locon/utils/getSystemLanguage.ts
 function getSystemLanguage(availableLocales) {
   if (!availableLocales?.length) return null;
   try {
-    const best = RNLocalize__namespace.findBestLanguageTag(availableLocales);
-    return best?.languageTag ?? null;
-  } catch {
+    try {
+      const RNLocalize = __require("react-native-localize");
+      const best = RNLocalize.findBestLanguageTag(availableLocales);
+      if (best?.languageTag) {
+        return best.languageTag;
+      }
+    } catch (localizeError) {
+    }
+    try {
+      const reactNative = __require("react-native");
+      const { NativeModules, Platform } = reactNative;
+      if (Platform?.OS === "ios") {
+        const SettingsManager = NativeModules?.SettingsManager;
+        if (SettingsManager?.settings?.AppleLanguages) {
+          const appleLanguages = SettingsManager.settings.AppleLanguages;
+          for (const lang of appleLanguages) {
+            const languageCode = lang.split("-")[0]?.toLowerCase();
+            if (languageCode) {
+              const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+              if (supportedLanguage) {
+                return supportedLanguage;
+              }
+            }
+          }
+        }
+        const I18nManager = NativeModules?.I18nManager;
+        if (I18nManager?.localeIdentifier) {
+          const languageCode = I18nManager.localeIdentifier.split("-")[0]?.toLowerCase();
+          if (languageCode) {
+            const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+            if (supportedLanguage) {
+              return supportedLanguage;
+            }
+          }
+        }
+      } else if (Platform?.OS === "android") {
+        const I18nManager = NativeModules?.I18nManager;
+        if (I18nManager?.localeIdentifier) {
+          const languageCode = I18nManager.localeIdentifier.split("-")[0]?.toLowerCase();
+          if (languageCode) {
+            const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+            if (supportedLanguage) {
+              return supportedLanguage;
+            }
+          }
+        }
+      }
+    } catch (rnError) {
+    }
+    const navigatorObj = typeof navigator !== "undefined" ? navigator : null;
+    const preferredLanguages = navigatorObj?.languages;
+    if (preferredLanguages) {
+      for (const lang of preferredLanguages) {
+        const languageCode = lang.split("-")[0]?.toLowerCase();
+        if (languageCode) {
+          const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+          if (supportedLanguage) {
+            return supportedLanguage;
+          }
+        }
+      }
+    }
+    const navigatorLanguage = navigatorObj?.language;
+    if (navigatorLanguage) {
+      const languageCode = navigatorLanguage.split("-")[0]?.toLowerCase();
+      if (languageCode) {
+        const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+        if (supportedLanguage) {
+          return supportedLanguage;
+        }
+      }
+    }
+    const systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+    if (systemLocale) {
+      const languageCode = systemLocale.split("-")[0]?.toLowerCase();
+      if (languageCode) {
+        const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+        if (supportedLanguage) {
+          return supportedLanguage;
+        }
+      }
+    }
+    return null;
+  } catch (error) {
+    console.log("Could not detect system language:", error);
     return null;
   }
 }

package/dist/index.mjs

@@ -1,15 +1,103 @@
 import { createContext, useContext, useState, useCallback, useMemo } from 'react';
-import * as RNLocalize from 'react-native-localize';
 import { Text } from 'react-native';
 import { jsx } from 'react/jsx-runtime';
 
-// src/locon/index.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/locon/utils/getSystemLanguage.ts
 function getSystemLanguage(availableLocales) {
   if (!availableLocales?.length) return null;
   try {
-    const best = RNLocalize.findBestLanguageTag(availableLocales);
-    return best?.languageTag ?? null;
-  } catch {
+    try {
+      const RNLocalize = __require("react-native-localize");
+      const best = RNLocalize.findBestLanguageTag(availableLocales);
+      if (best?.languageTag) {
+        return best.languageTag;
+      }
+    } catch (localizeError) {
+    }
+    try {
+      const reactNative = __require("react-native");
+      const { NativeModules, Platform } = reactNative;
+      if (Platform?.OS === "ios") {
+        const SettingsManager = NativeModules?.SettingsManager;
+        if (SettingsManager?.settings?.AppleLanguages) {
+          const appleLanguages = SettingsManager.settings.AppleLanguages;
+          for (const lang of appleLanguages) {
+            const languageCode = lang.split("-")[0]?.toLowerCase();
+            if (languageCode) {
+              const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+              if (supportedLanguage) {
+                return supportedLanguage;
+              }
+            }
+          }
+        }
+        const I18nManager = NativeModules?.I18nManager;
+        if (I18nManager?.localeIdentifier) {
+          const languageCode = I18nManager.localeIdentifier.split("-")[0]?.toLowerCase();
+          if (languageCode) {
+            const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+            if (supportedLanguage) {
+              return supportedLanguage;
+            }
+          }
+        }
+      } else if (Platform?.OS === "android") {
+        const I18nManager = NativeModules?.I18nManager;
+        if (I18nManager?.localeIdentifier) {
+          const languageCode = I18nManager.localeIdentifier.split("-")[0]?.toLowerCase();
+          if (languageCode) {
+            const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+            if (supportedLanguage) {
+              return supportedLanguage;
+            }
+          }
+        }
+      }
+    } catch (rnError) {
+    }
+    const navigatorObj = typeof navigator !== "undefined" ? navigator : null;
+    const preferredLanguages = navigatorObj?.languages;
+    if (preferredLanguages) {
+      for (const lang of preferredLanguages) {
+        const languageCode = lang.split("-")[0]?.toLowerCase();
+        if (languageCode) {
+          const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+          if (supportedLanguage) {
+            return supportedLanguage;
+          }
+        }
+      }
+    }
+    const navigatorLanguage = navigatorObj?.language;
+    if (navigatorLanguage) {
+      const languageCode = navigatorLanguage.split("-")[0]?.toLowerCase();
+      if (languageCode) {
+        const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+        if (supportedLanguage) {
+          return supportedLanguage;
+        }
+      }
+    }
+    const systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+    if (systemLocale) {
+      const languageCode = systemLocale.split("-")[0]?.toLowerCase();
+      if (languageCode) {
+        const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
+        if (supportedLanguage) {
+          return supportedLanguage;
+        }
+      }
+    }
+    return null;
+  } catch (error) {
+    console.log("Could not detect system language:", error);
     return null;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locon",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "locon is a simple and lightweight library for React Native that provides a simple way to manage translations in your app.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,9 @@
   "license": "ISC",
   "peerDependencies": {
     "react": ">=19.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-localize": ">=3.0.0"
+    "react-native": ">=0.70.0"
   },
-  "peerDependenciesMeta": {
-    "react-native-localize": {
-      "optional": true
-    }
-  },
-  "dependencies": {
+  "optionalDependencies": {
     "react-native-localize": "^3.2.1"
   },
   "devDependencies": {