# Phrase OTA for React Native

Library for Phrase over-the-air translations.
Currently works only in tandem with [react-i18next](https://react.i18next.com/) library.

## Installation
`$ npm install react-native-phrase-sdk --save`

## Usage with i18next

In order to add Phrase OTA support to your project you need to make some changes in your `i18next.js` file:
1. Initialize Phrase
```javascript
import Phrase from "react-native-phrase-sdk";

let phrase = new Phrase(
    "YOUR_DISTRIBUTION_ID",
    "YOUR_ENVIRONMENT_ID",
    "YOUR_APP_VERSION",
    "i18next"
);
```

2. Create i18next backend based on Phrase instance
```javascript
import resourcesToBackend from "i18next-resources-to-backend";

const backendPhrase = resourcesToBackend((language, namespace, callback) => {
    phrase.requestTranslation(language)
        .then((remoteResources) => {
            callback(null, remoteResources);
        })
        .catch((error) => {
            callback(error, null);
        });
});

const backendFallback = resourcesToBackend(localResources)
```

3. Initialize `i18n` with Phrase backend
```javascript
i18n
  .use(ChainedBackend)
  .use(initReactI18next)
  .init({
    backend: {
        backends: [backendPhrase, backendFallback]
    }
    //...
  });
```

<details>
  <summary><b>Example of `i18next.js` file</b></summary>

```javascript
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import ChainedBackend from "i18next-chained-backend";
import resourcesToBackend from "i18next-resources-to-backend";
import translationEN from "./locales/en/translation.json";
import translationRU from "./locales/ru/translation.json";
import Phrase from "react-native-phrase-sdk";

const localResources = {
  en: {
    translation: translationEN,
  },
  ru: {
    translation: translationRU,
  },
};

let phrase = new Phrase(
    "YOUR_DISTRIBUTION_ID",
    "YOUR_ENVIRONMENT_ID",
    require('./package.json').version,
    "i18next"
);

const backendPhrase = resourcesToBackend((language, namespace, callback) => {
    phrase.requestTranslation(language)
        .then((remoteResources) => {
            callback(null, remoteResources);
        })
        .catch((error) => {
            callback(error, null);
        });
});

const backendFallback = resourcesToBackend(localResources)

i18n
  .use(ChainedBackend)
  .use(initReactI18next)
  .init({
    backend: {
        backends: [backendPhrase, backendFallback]
    },
    debug: true,
    lng: "en",
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


```
</details>

## AsyncStorage note

This library stores its internal data (e.g. translations, unique ID) in AsyncStorage of your app. This means that you should be careful when manipulating the storage in your app: if you completely clear the AsyncStorage (for example on user logout), the app will have to download the translations again and regenerate the unique ID, so your account will show inflated number of unique users.

## Contribution

To publish a new version:

* `npm login`
* `npm publish`