Add expo config plugin

alextoudic · alextoudic · commit 1531c0fad134 · 2025-07-02T00:34:24.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -48,6 +48,9 @@ yarn-error.log
 # Bob
 dist/
 
+# Expo plugin
+!plugin/build
+
 # mock
 mock/*.d.ts
 mock/*.js
diff --git a/README.md b/README.md
@@ -340,6 +340,7 @@ Opens the app language settings.
 > [!WARNING]
 >
 > This feature is available only on Android 13+ and require [configuring your app's supported locales](https://developer.android.com/guide/topics/resources/app-languages#use-localeconfig).
+> If you're using Expo, you can do this with [the config plugin](#usage-with-expo).
 
 #### Method type
 
@@ -397,6 +398,8 @@ You can add / remove supported localizations in your Xcode project infos:
 
 ![](./docs/xcode-adding-locales.png)
 
+If you're using Expo, you can do this with [the config plugin](#usage-with-expo).
+
 ## How to test your code
 
 Because it's a native module, you need to mock this package.<br />
@@ -407,6 +410,55 @@ The package provides a default mock you may import in your `__mocks__` directory
 export * from "react-native-localize/mock"; // or "react-native-localize/mock/jest"
 ```
 
+## <a name="usage-with-expo"></a>Usage with Expo
+
+If you're using Expo, you can specify the supported locales in your app.json or app.config.js using the config plugin.
+This enables Android 13+ and iOS to display the available locales in the system settings, allowing users to select their preferred language for your app.
+
+```js
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-localize",
+        {
+          "supportedLocales": [
+            "en",
+            "fr"
+          ]
+        }
+      ]
+    ]
+  }
+}
+```
+
+Alternatively, if you want to define different locales for iOS and Android, you can use:
+
+```js
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-localize",
+        {
+          "supportedLocales": {
+            ios: [
+              "en",
+              "fr"
+            ],
+            android: [
+              "en",
+              "fr"
+            ]
+          }
+        }
+      ]
+    ]
+  }
+}
+```
+
 ## Sponsors
 
 This module is provided **as is**, I work on it in my free time.
diff --git a/app.plugin.js b/app.plugin.js
@@ -0,0 +1 @@
+module.exports = require('./plugin/build');
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "/ios",
     "/mock",
     "/src",
+    "/plugin/build",
     "RNLocalize.podspec",
     "package.json"
   ],
@@ -34,6 +35,7 @@
     "format": "prettier '**/*' -u -w",
     "typecheck": "tsc --noEmit",
     "build": "yarn clean && bob build && rm -rf dist/*/package.json && tsc mock/{index,jest}.ts -d -m commonjs -t es2015 --skipLibCheck",
+    "build:plugin": "expo-module build plugin",
     "prepack": "prettier '**/*' -u -c && yarn typecheck && yarn build"
   },
   "react-native-builder-bob": {
@@ -65,6 +67,8 @@
     "@babel/preset-env": "^7.25.3",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.1.0",
+    "expo": "^53.0.15",
+    "expo-module-scripts": "^4.1.8",
     "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "19.1.0",
diff --git a/plugin/build/index.d.ts b/plugin/build/index.d.ts
@@ -0,0 +1,9 @@
+import type { ExpoConfig } from 'expo/config';
+type ConfigPluginProps = {
+    supportedLocales: string[] | {
+        ios?: string[];
+        android?: string[];
+    };
+};
+declare function withAppLanguageSetting(config: ExpoConfig, data: ConfigPluginProps): ExpoConfig;
+export default withAppLanguageSetting;
diff --git a/plugin/build/index.js b/plugin/build/index.js
@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("expo/config-plugins");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const utils_1 = require("./utils");
+function withAppLanguageSettingAndroid(config, data) {
+    const { supportedLocales } = data;
+    const androidLocales = Array.isArray(supportedLocales) ? supportedLocales : supportedLocales.android;
+    if (androidLocales) {
+        config = (0, config_plugins_1.withDangerousMod)(config, [
+            'android',
+            (config) => {
+                const projectRootPath = path_1.default.join(config.modRequest.platformProjectRoot);
+                const folder = path_1.default.join(projectRootPath, 'app/src/main/res/xml');
+                fs_1.default.mkdirSync(folder, { recursive: true });
+                fs_1.default.writeFileSync(path_1.default.join(folder, 'locales_config.xml'), [
+                    '<?xml version="1.0" encoding="utf-8"?>',
+                    '<locale-config xmlns:android="http://schemas.android.com/apk/res/android">',
+                    ...androidLocales.map((locale) => `  <locale android:name="${locale}"/>`),
+                    '</locale-config>',
+                ].join('\n'));
+                return config;
+            },
+        ]);
+        config = (0, config_plugins_1.withAndroidManifest)(config, (config) => {
+            const mainApplication = config_plugins_1.AndroidConfig.Manifest.getMainApplicationOrThrow(config.modResults);
+            mainApplication.$ = {
+                ...mainApplication.$,
+                'android:localeConfig': '@xml/locales_config',
+            };
+            return config;
+        });
+        config = (0, config_plugins_1.withAppBuildGradle)(config, (config) => {
+            if (config.modResults.language === 'groovy') {
+                config.modResults.contents = (0, utils_1.appendContentsInsideDeclarationBlock)(config.modResults.contents, 'defaultConfig', `    resourceConfigurations += [${androidLocales.map((lang) => `"${lang}"`).join(', ')}]\n    `);
+            }
+            else {
+                config_plugins_1.WarningAggregator.addWarningAndroid('react-native-localize languages', `Cannot automatically configure app build.gradle if it's not groovy`);
+            }
+            return config;
+        });
+    }
+    return config;
+}
+function withAppLanguageSettingIos(config, data) {
+    if (!config.ios) {
+        config.ios = {};
+    }
+    if (!config.ios.infoPlist) {
+        config.ios.infoPlist = {};
+    }
+    const { supportedLocales } = data;
+    const iosLocales = Array.isArray(supportedLocales) ? supportedLocales : supportedLocales.ios;
+    config.ios.infoPlist.CFBundleLocalizations = iosLocales;
+    return config;
+}
+function withAppLanguageSetting(config, data) {
+    return (0, config_plugins_1.withPlugins)(config, [
+        [withAppLanguageSettingIos, data],
+        [withAppLanguageSettingAndroid, data],
+    ]);
+}
+exports.default = withAppLanguageSetting;
diff --git a/plugin/build/utils.d.ts b/plugin/build/utils.d.ts
@@ -0,0 +1,8 @@
+export declare function appendContentsInsideDeclarationBlock(srcContents: string, declaration: string, insertion: string): string;
+type LeftBrackets = ['(', '{'];
+type RightBrackets = [')', '}'];
+type LeftBracket = LeftBrackets[number];
+type RightBracket = RightBrackets[number];
+type Bracket = LeftBracket | RightBracket;
+export declare function findMatchingBracketPosition(contents: string, bracket: Bracket, offset?: number): number;
+export {};
diff --git a/plugin/build/utils.js b/plugin/build/utils.js
@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appendContentsInsideDeclarationBlock = appendContentsInsideDeclarationBlock;
+exports.findMatchingBracketPosition = findMatchingBracketPosition;
+function appendContentsInsideDeclarationBlock(srcContents, declaration, insertion) {
+    const start = srcContents.search(new RegExp(`\\s*${declaration}.*?[\\(\\{]`));
+    if (start < 0) {
+        throw new Error(`Unable to find code block - declaration[${declaration}]`);
+    }
+    const end = findMatchingBracketPosition(srcContents, '{', start);
+    return insertContentsAtOffset(srcContents, insertion, end);
+}
+function insertContentsAtOffset(srcContents, insertion, offset) {
+    const srcContentsLength = srcContents.length;
+    if (offset < 0 || offset > srcContentsLength) {
+        throw new Error('Invalid parameters.');
+    }
+    if (offset === 0) {
+        return `${insertion}${srcContents}`;
+    }
+    else if (offset === srcContentsLength) {
+        return `${srcContents}${insertion}`;
+    }
+    const prefix = srcContents.substring(0, offset);
+    const suffix = srcContents.substring(offset);
+    return `${prefix}${insertion}${suffix}`;
+}
+function findMatchingBracketPosition(contents, bracket, offset = 0) {
+    // search first occurrence of `bracket`
+    const firstBracketPos = contents.indexOf(bracket, offset);
+    if (firstBracketPos < 0) {
+        return -1;
+    }
+    let stackCounter = 0;
+    const matchingBracket = getMatchingBracket(bracket);
+    if (isLeftBracket(bracket)) {
+        const contentsLength = contents.length;
+        // search forward
+        for (let i = firstBracketPos + 1; i < contentsLength; ++i) {
+            const c = contents[i];
+            if (c === bracket) {
+                stackCounter += 1;
+            }
+            else if (c === matchingBracket) {
+                if (stackCounter === 0) {
+                    return i;
+                }
+                stackCounter -= 1;
+            }
+        }
+    }
+    else {
+        // search backward
+        for (let i = firstBracketPos - 1; i >= 0; --i) {
+            const c = contents[i];
+            if (c === bracket) {
+                stackCounter += 1;
+            }
+            else if (c === matchingBracket) {
+                if (stackCounter === 0) {
+                    return i;
+                }
+                stackCounter -= 1;
+            }
+        }
+    }
+    return -1;
+}
+function isLeftBracket(bracket) {
+    const leftBracketList = ['(', '{'];
+    return leftBracketList.includes(bracket);
+}
+function getMatchingBracket(bracket) {
+    switch (bracket) {
+        case '(':
+            return ')';
+        case ')':
+            return '(';
+        case '{':
+            return '}';
+        case '}':
+            return '{';
+        default:
+            throw new Error(`Unsupported bracket - ${bracket}`);
+    }
+}
diff --git a/plugin/src/index.ts b/plugin/src/index.ts
@@ -0,0 +1,112 @@
+import type { ExpoConfig } from 'expo/config';
+import {
+  WarningAggregator,
+  withAndroidManifest,
+  withAppBuildGradle,
+  withDangerousMod,
+  withPlugins,
+  AndroidConfig,
+  createRunOncePlugin,
+} from 'expo/config-plugins';
+
+import fs from 'fs';
+import path from 'path';
+
+import { appendContentsInsideDeclarationBlock } from './utils';
+
+const pkg = require('react-native-localize/package.json');
+
+type ConfigPluginProps = {
+  supportedLocales: string[] | {
+    ios?: string[];
+    android?: string[];
+  };
+};
+
+function withAppLanguageSettingAndroid(config: ExpoConfig, data: ConfigPluginProps) {
+  const { supportedLocales } = data;
+  const androidLocales = Array.isArray(supportedLocales) ? supportedLocales : supportedLocales.android;
+
+  if (androidLocales) {
+    config = withDangerousMod(config, [
+      'android',
+      (config) => {
+        const projectRootPath = path.join(config.modRequest.platformProjectRoot);
+        const folder = path.join(projectRootPath, 'app/src/main/res/xml');
+
+        fs.mkdirSync(folder, { recursive: true });
+        fs.writeFileSync(
+          path.join(folder, 'locales_config.xml'),
+          [
+            '<?xml version="1.0" encoding="utf-8"?>',
+            '<locale-config xmlns:android="http://schemas.android.com/apk/res/android">',
+            ...androidLocales.map((locale) => `  <locale android:name="${locale}"/>`),
+            '</locale-config>',
+          ].join('\n')
+        );
+
+        return config;
+      },
+    ]);
+    config = withAndroidManifest(config, (config) => {
+      const mainApplication = AndroidConfig.Manifest.getMainApplicationOrThrow(config.modResults);
+
+      mainApplication.$ = {
+        ...mainApplication.$,
+        'android:localeConfig': '@xml/locales_config',
+      };
+
+      return config;
+    });
+    config = withAppBuildGradle(config, (config) => {
+      if (config.modResults.language === 'groovy') {
+        config.modResults.contents = appendContentsInsideDeclarationBlock(
+          config.modResults.contents,
+          'defaultConfig',
+          `    resourceConfigurations += [${androidLocales.map((lang) => `"${lang}"`).join(', ')}]\n    `
+        );
+      } else {
+        WarningAggregator.addWarningAndroid(
+          'react-native-localize languages',
+          `Cannot automatically configure app build.gradle if it's not groovy`
+        );
+      }
+
+      return config;
+    });
+  }
+
+  return config;
+}
+
+function withAppLanguageSettingIos(
+  config: ExpoConfig,
+  data: ConfigPluginProps
+) {
+  if (!config.ios) {
+    config.ios = {};
+  }
+
+  if (!config.ios.infoPlist) {
+    config.ios.infoPlist = {};
+  }
+
+  const { supportedLocales } = data;
+  const iosLocales = Array.isArray(supportedLocales) ? supportedLocales : supportedLocales.ios;
+  config.ios.infoPlist.CFBundleLocalizations = iosLocales;
+
+  return config;
+}
+
+  
+function withAppLanguageSetting(
+  config: ExpoConfig,
+  data: ConfigPluginProps
+) {
+  return withPlugins(config, [
+    [withAppLanguageSettingIos, data],
+    [withAppLanguageSettingAndroid, data],
+  ]);
+}
+
+export default createRunOncePlugin(withAppLanguageSetting, pkg.name, pkg.version);
diff --git a/plugin/src/utils.ts b/plugin/src/utils.ts
diff --git a/plugin/tsconfig.json b/plugin/tsconfig.json
diff --git a/plugin/tsconfig.tsbuildinfo b/plugin/tsconfig.tsbuildinfo
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('./plugin/build');`