How to use i18n-js - 10 common examples

import lang from 'i18n-js';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/configureStore';
import App from './dapp';
import init from './store/init';
import translations from './languages';
import './dapp.css';

// Init i18n translation
lang.defaultLocale = 'en';
lang.locale = navigator.language;
lang.fallbacks = true;
lang.translations = translations;

// Init Redux store
init();

render(
  
    
  ,
  document.getElementById('app')
);

import lang from 'i18n-js';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/configureStore';
import App from './dapp';
import init from './store/init';
import translations from './languages';
import './dapp.css';

// Init i18n translation
lang.defaultLocale = 'en';
lang.locale = navigator.language;
lang.fallbacks = true;
lang.translations = translations;

// Init Redux store
init();

render(
  
    
  ,
  document.getElementById('app')
);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean } from '@storybook/addon-knobs';
import i18n from 'i18n-js';
import { dlsThemeSelector, classicThemeSelector } from '../../../.storybook/theme-selectors';
import { notes, Info } from './documentation';
import I18nComponent from './i18n';
import getDocGenInfo from '../../utils/helpers/docgen-info';

I18nComponent.__docgenInfo = getDocGenInfo(
  require('./docgenInfo.json'),
  /i18n\.js(?!spec)/
);

// eslint-disable-next-line dot-notation
i18n.translations.en['my'] = {
  example: '# My __example__ translation.'
};

function makeStory(name, themeSelector) {
  const component = () => {
    const markdown = boolean('markdown', true);
    const inline = markdown ? boolean('inline', I18nComponent.defaultProps.inline) : undefined;
    const scope = text('scope', 'my.example');
    return (
      
    );
  };

const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationPaths)) ||
    fallback;

  const fileContent = await (Platform.OS === "android"
    ? RNFS.readFileAssets(translationPaths[languageTag], "utf8")
    : RNFS.readFile(translationPaths[languageTag], "utf8"));

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);

  // set i18n-js config
  i18n.translations = { [languageTag]: JSON.parse(fileContent) };
  i18n.locale = languageTag;
};

// @flow

import { getDeviceLocale } from 'react-native-device-info';
import I18n from 'i18n-js';

import locales from 'locales';

I18n.fallbacks = true;
I18n.locale = getDeviceLocale();
I18n.translations = locales;

I18n.pluralization['ru'] = function (count) {
    const key = count % 10 == 1 && count % 100 != 11 ? 'one' : [2, 3, 4].indexOf(count % 10) >= 0 && [12, 13, 14].indexOf(count % 100) < 0 ? 'few' : count % 10 == 0 || [5, 6, 7, 8, 9].indexOf(count % 10) >= 0 || [11, 12, 13, 14].indexOf(count % 100) >= 0 ? 'many' : 'other';
    return [key];
};

export const __ = I18n.t.bind(I18n);

export default I18n;

import en from './locales/en';
import pt from './locales/pt-BR';

// tslint:disable-next-line:no-require-imports
const I18nCreator = require('i18n-js');

I18nCreator.defaultLocale = 'en';
I18nCreator.fallbacks = true;

I18nCreator.translations = {
  en: {...I18nCreator.translations.en, notification: en},
  'pt-BR': {...I18nCreator.translations['pt-BR'], notification: pt},
};

export const I18n = I18nCreator;

// TODO
// don't load all translations in memory, when we have a lot of translations
// see
// https://github.com/react-native-community/react-native-localize/blob/master/example/src/AsyncExample.js

import * as RNLocalize from 'react-native-localize'
import I18n from 'i18n-js'

const de = require('./de.json')
const nl = require('./nl.json')

I18n.defaultLocale = 'en'
I18n.fallbacks = true
I18n.missingTranslation = scope => scope
I18n.translations = {
  de,
  nl,
}
export const locales = ['en', 'de', 'nl']

const fallback = { languageTag: 'en', isRTL: false }
const { languageTag } =
  RNLocalize.findBestAvailableLanguage(locales) || fallback
I18n.locale = languageTag

const localeSpecificImages = {
  en: {
    '01.jpg': require('src/resources/img/en/01.jpg'),
    '02.jpg': require('src/resources/img/en/02.jpg'),

export const appDidMount = app => {
  // Load the current locale from extension settings
  const state = app.getState();
  const defaultLocale = 'en';
  const { locale = defaultLocale } = getExtensionSettings(state, ext());

  I18n.fallbacks = defaultLocale;
  I18n.defaultLocale = defaultLocale;
  I18n.locale = locale;

  // Configure the moment library to use the same locale as the app
  moment.locale(locale);
};

loadAudio = ({
    audioID,
    audioUUID,
    localeOrder,
    playAudioAfterLoad,
    autoPlay,
  }) => {
    if (localeOrder == null) {
      // Fallback to default locale, else play audio in Swedish.
      localeOrder = [i18n.locale, i18n.defaultLocale, 'sv'];
    }

    return new Promise((resolve, reject) => {
      const locale = localeOrder.shift();
      const audioUrl = Platform.select({
        ios: `audio/${audioID}/${audioID}${locale}.mp3`,
        android: `audio_${audioID}${locale.toLowerCase()}.mp3`,
      });

      this.unloadAudio();
      this._loadedSound = new Sound(audioUrl, Sound.MAIN_BUNDLE, error => {
        if (error) {
          this.unloadAudio();

          if (localeOrder.length === 0) {
            reject(`Cannot load file: ${audioUrl}`);

import en from './locales/en';
import pt from './locales/pt-BR';

// tslint:disable-next-line:no-require-imports
const I18nCreator = require('i18n-js');

I18nCreator.defaultLocale = 'en';
I18nCreator.fallbacks = true;

I18nCreator.translations = {
  en: {...I18nCreator.translations.en, notification: en},
  'pt-BR': {...I18nCreator.translations['pt-BR'], notification: pt},
};

export const I18n = I18nCreator;