locon 1.1.0 → 1.1.2

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,19 +47,29 @@ npm install locon
 yarn add locon
 ```
 
-**Important:** After installation, run pod install for iOS:
+**Peer dependencies**
+
+- `react >= 19.0.0`
+- `react-native >= 0.70.0`
+- `react-native-localize >= 3.0.0` (optional, recommended)
+
+**Optional: Enhanced language detection**
+
+For more accurate device language detection on iOS and Android, install `react-native-localize`:
 
 ```bash
-cd ios && pod install
+npm install react-native-localize
+# or
+yarn add react-native-localize
 ```
 
-**Peer dependencies**
+Then run pod install for iOS:
 
-- `react >= 19.0.0`
-- `react-native >= 0.70.0`
-- `react-native-localize >= 3.0.0` (installed automatically)
+```bash
+cd ios && pod install
+```
 
-`react-native-localize` is used for accurate device language detection on iOS and Android.
+If `react-native-localize` is not installed, `locon` will use fallback methods (native modules, `navigator.languages`, `Intl` API) to detect the system language. The library works fine without it, but `react-native-localize` provides the most accurate detection.
 
 ---
 
@@ -88,9 +120,7 @@ function App() {
   return (
     <Locon
       assets={{ en, de }}
-      defaultLocale='en'
       projectLocale='de'
-      autodetect
     >
       <NavigationContainer theme={theme}>
         <RootNavigator />
@@ -105,10 +135,13 @@ export default App
 If `currentLocale` is not provided and `autodetect` is `true` (default),
 `locon` will:
 
-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`
+1. Try to use `react-native-localize` to detect device locale on iOS/Android (if installed)
+2. If `react-native-localize` is not available, use fallback methods in order:
+   - Native modules (`SettingsManager` on iOS, `I18nManager` on Android/iOS)
+   - `Intl.DateTimeFormat().resolvedOptions().locale`
+3. Match the detected locale (including region) or just language code against your `assets`
+4. If a match is found, use it as initial locale
+5. Otherwise, fall back to `defaultLocale`
 
 #### 3. Use the `useLocon()` hook
 
@@ -154,7 +187,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>
@@ -189,6 +222,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,84 @@
 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");
+      if (RNLocalize && typeof RNLocalize.findBestLanguageTag === "function") {
+        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 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,82 @@
 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");
+      if (RNLocalize && typeof RNLocalize.findBestLanguageTag === "function") {
+        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 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.1.0",
+  "version": "1.1.2",
   "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",
@@ -31,16 +31,13 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-native": ">=0.70.0",
-    "react-native-localize": ">=3.0.0"
+    "react-native-localize": "^3.0.0"
   },
   "peerDependenciesMeta": {
     "react-native-localize": {
       "optional": true
     }
   },
-  "dependencies": {
-    "react-native-localize": "^3.2.1"
-  },
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@eslint/js": "^9.10.0",