Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add expo config plugin section #26

Merged
merged 1 commit into from
Nov 10, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading