1. Help Center
  2. Phrase Over the Air (OTA)

React Native SDK installation instructions

Learn how to install the Over the Air SDK for React Native.

Introduction

Phrase Over the Air for React Native lets you update translations in your React Native app without having to release it every single time. By including our SDK, your app will check for updated translations in Phrase regularly and download them in the background.

The library for Phrase Over-the-Air translations currently works only in tandem with the react-i18next library.

Installation & Usage with i18next

First, run the command:

$ npm install react-native-phrase-sdk --save

In order to add Phrase OTA support to your project you need to make some changes in your i18next.js file:

1. Initialize Phrase
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
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
i18n
.use(ChainedBackend)
.use(initReactI18next)
.init({
backend: {
backends: [backendPhrase, backendFallback]
}
//...
});
 

Example of a`i18next.js` file

 
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
}
});

Example app 

Here's an example app to give you some ideas.

https://github.com/phrase/react_native_sdk_example