JSPM

react-native-phrase-sdk

1.2.0-rc1
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 3891
    • Score
      100M100P100Q122337F
    • License SEE LICENSE IN LICENSE.txt

    Phrase over-the-air translations library for React Native

    Package Exports

    • react-native-phrase-sdk
    • react-native-phrase-sdk/phrase.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-phrase-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Phrase OTA for React Native

    Library for Phrase over-the-air translations. Currently works only in tandem with react-i18next 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
    import Phrase from "react-native-phrase-sdk";
    
    let phrase = new Phrase(
        "YOUR_DISTRIBUTION_ID",
        "YOUR_ENVIRONMENT_ID",
        "YOUR_APP_VERSION",
        "i18next"
    );
    1. 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)
    1. Initialize i18n with Phrase backend
    i18n
      .use(ChainedBackend)
      .use(initReactI18next)
      .init({
        backend: {
            backends: [backendPhrase, backendFallback]
        }
        //...
      });
    Example of `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
        }
      });
    
    

    Contribution

    To publish a new version:

    • npm login
    • npm publish