From e4eb8b7f49c0d2cddccfa248a82a713c9f34fdb0 Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Sun, 10 Nov 2024 16:29:50 +0100
Subject: [PATCH] docs: add expo config plugin section

---
 README.md | 115 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 74 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 57c3b2a..1a14f65 100644
--- a/README.md
+++ b/README.md
@@ -28,56 +28,40 @@ or with yarn:
 yarn add react-native-localization-settings
 ```
 
-## API
+## Setup
 
-### getLanguage()
+To get started, define the languages your app will support. If you're using Expo, you can leverage the Expo config plugin to generate the necessary native configurations.
 
-Function to get current language.
+### Expo
 
-Returns Language in IETF BCP 47 format (like 'en-US')
+Simply add the config plugin to your `app.json` file and specify the list of supported languages:
 
-```ts
-getLanguage(); // 'en-US'
-```
-
-### setLanguage()
-
-Function to set the current language.
-It accepts a string with language code in IETF BCP 47 format (like 'en-US') or ISO 639-1 format (like 'en').
-
-```ts
-setLanguage("en-US");
-```
-
-## i18next
-
-This library is fully compatible with [i18next](https://www.i18next.com/).
-To use it with i18next, you need to use `ReactNativeLanguageDetector` before init function:
-
-```ts
-import { ReactNativeLanguageDetector } from 'react-native-localization-settings';
-
-i18next
-  .use(ReactNativeLanguageDetector)
-  .use(initReactI18next)
-  .init({
+```json
+{
+  "expo": {
     // ...
-  });
-```
-
-Then, if you want to create custom in-app language selector, you should be able to change the language (along with the
-settings per-app language) using standard i18next function:
-
-```ts
-i18next.changeLanguage('pl-PL');
+    "plugins": [
+      [
+        "react-native-localization-settings", 
+        { 
+          "languages": ["en", "pl"] 
+        }
+      ]
+    ]
+  }
+}
 ```
 
-## Define supported languages
+and run `npx expo prebuild`.
 
-To get started, you'll need to define the languages that your app supports.
+### Bare react-native app
 
-### iOS
+If your app isn’t using Expo, you’ll need to add the configuration manually.
 
+<details>
+<summary>
+iOS configuration
+</summary>
 Open your project in XCode, in Project Navigator select project, go to `Info` tab, and
 under `Localizations` section add languages you want to support.
 
@@ -93,9 +77,13 @@ the popup.
 ![XCode screenshot](docs/configuration-xcode-3.png)
 
 Lastly, you need to select all elements in the section form previous step.
+</details>
 
-### Android
 
+<details>
+<summary>
+Android configuration
+</summary>
 Create new file in `android/app/src/main/res/xml` directory named `locales_config.xml`. and define supported languages:
 
 ```xml
@@ -115,6 +103,51 @@ Then, open `android/app/src/main/AndroidManifest.xml` and add following line to
         android:localeConfig="@xml/locales_config" <!-- this line -->
 >
 ```
+</details>
+
+## API
+
+### getLanguage()
+
+Function to get current language.
+
+Returns Language in IETF BCP 47 format (like 'en-US')
+
+```ts
+getLanguage(); // 'en-US'
+```
+
+### setLanguage()
+
+Function to set the current language.
+It accepts a string with language code in IETF BCP 47 format (like 'en-US') or ISO 639-1 format (like 'en').
+
+```ts
+setLanguage("en-US");
+```
+
+## i18next
+
+This library is fully compatible with [i18next](https://www.i18next.com/).
+To use it with i18next, you need to use `ReactNativeLanguageDetector` before init function:
+
+```ts
+import { ReactNativeLanguageDetector } from 'react-native-localization-settings';
+
+i18next
+  .use(ReactNativeLanguageDetector)
+  .use(initReactI18next)
+  .init({
+    // ...
+  });
+```
+
+Then, if you want to create custom in-app language selector, you should be able to change the language (along with the
+settings per-app language) using standard i18next function:
+
+```ts
+i18next.changeLanguage('pl-PL');
+```
 
 ## Why?