Skip to content

Commit

Permalink
docs: add expo config plugin section (#26)
Browse files Browse the repository at this point in the history
  • Loading branch information
jakex7 authored Nov 10, 2024
1 parent 35ed4bf commit 4974d4f
Showing 1 changed file with 74 additions and 41 deletions.
115 changes: 74 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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?

Expand Down

0 comments on commit 4974d4f

Please sign in to comment.