locon 1.0.3 → 1.1.0

package/README.md

@@ -25,10 +25,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.
 
 ---
 
@@ -80,7 +89,7 @@ function App() {
     <Locon
       assets={{ en, de }}
       defaultLocale='en'
-      projectLocale='en'
+      projectLocale='de'
       autodetect
     >
       <NavigationContainer theme={theme}>
@@ -96,9 +105,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
@@ -113,12 +122,22 @@ function LanguageSwitcher() {
 
   return (
     <View>
+      {/* Localised value by key */}
       <Text>
         {l('current_language')}: {currentLocale}
       </Text>
-
-      <Button title='English' onPress={() => setLocale('en')} />
-      <Button title='Deutsch' onPress={() => setLocale('de')} />
+      {/* or by value in project- or default language */}
+      <Text>
+        {l('Current language')}: {currentLocale}
+      </Text>
+      <Button
+        title='English'
+        onPress={() => setLocale('en')}
+      />
+      <Button
+        title='Deutsch'
+        onPress={() => setLocale('de')}
+      />
     </View>
   )
 }
@@ -134,8 +153,8 @@ import { LText } from 'locon'
 function Welcome() {
   return (
     <View>
-      {/* Uses children as key */}
-      <LText>hello</LText>
+      {/* Uses children as value to find the key, with fallback children */}
+      <LText>Hello</LText>
 
       {/* Or explicit key with fallback children */}
       <LText assetKey='welcome_title'>Welcome</LText>
@@ -182,12 +201,12 @@ interface LoconProps extends PropsWithChildren {
 import { useLocon } from 'locon'
 
 const {
-  l,             // (key: string) => string
-  assets,        // all assets map
+  l, // (key/value: string) => string
+  assets, // all assets map
   currentLocale, // current language code
   defaultLocale, // default language code
-  autodetect,    // boolean
-  setLocale,     // (locale: string) => void
+  autodetect, // boolean
+  setLocale, // (locale: string) => void
 } = useLocon()
 ```
 
@@ -219,6 +238,39 @@ interface LTextProps extends ComponentProps<typeof Text> {
 
 ---
 
+### ESLint integration (`react-native/no-raw-text`)
+
+If you use `eslint-plugin-react-native` with the `react-native/no-raw-text`
+rule enabled, you may see errors like:
+
+> Raw text (Hello) cannot be used outside of a `<Text>` tag
+
+because the rule does not know that `LText` ultimately renders a React
+Native `<Text>` under the hood.
+
+To fix this, tell the rule to treat `LText` as an allowed wrapper:
+
+```js
+// .eslintrc.js
+module.exports = {
+  // ...
+  rules: {
+    // other rules...
+    'react-native/no-raw-text': [
+      'error',
+      {
+        skip: ['LText'],
+      },
+    ],
+  },
+}
+```
+
+This keeps the rule active for other components, but lets you freely use
+raw text inside `<LText>`.
+
+---
+
 ### TypeScript
 
 The published package contains:
@@ -235,4 +287,3 @@ support for `Locon`, `useLocon`, and `LText`.
 ### License
 
 `locon` is released under the **ISC** license.
-

package/dist/index.js

@@ -3,22 +3,37 @@
 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');
 
-// src/locon/index.tsx
+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);
 
-// src/locon/utils/getSystemLanguage.ts
+// src/locon/index.tsx
 function getSystemLanguage(availableLocales) {
+  if (!availableLocales?.length) return null;
   try {
-    const systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
-    if (!systemLocale) return null;
-    const languageCode = systemLocale.split("-")[0]?.toLowerCase();
-    if (!languageCode) return null;
-    const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
-    return supportedLanguage ? languageCode : null;
-  } catch (error) {
-    console.log("Could not detect system language:", error);
+    const best = RNLocalize__namespace.findBestLanguageTag(availableLocales);
+    return best?.languageTag ?? null;
+  } catch {
     return null;
   }
 }

package/dist/index.mjs

@@ -1,20 +1,15 @@
 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
-
-// src/locon/utils/getSystemLanguage.ts
 function getSystemLanguage(availableLocales) {
+  if (!availableLocales?.length) return null;
   try {
-    const systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
-    if (!systemLocale) return null;
-    const languageCode = systemLocale.split("-")[0]?.toLowerCase();
-    if (!languageCode) return null;
-    const supportedLanguage = availableLocales.find((locale) => locale === languageCode);
-    return supportedLanguage ? languageCode : null;
-  } catch (error) {
-    console.log("Could not detect system language:", error);
+    const best = RNLocalize.findBestLanguageTag(availableLocales);
+    return best?.languageTag ?? null;
+  } catch {
     return null;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locon",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "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,7 +30,16 @@
   "license": "ISC",
   "peerDependencies": {
     "react": ">=19.0.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.70.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",