Rename the project to react-native-localize

[zoontek]

Hello everyone,

This project started from a PR I made to the react-native to polyfill browser navigator.languages and navigator.language.

Original PR: facebook/react-native#14568
MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage

But recently, as this lib got more users, some of you expressed some difficulties about handling serious app localization: loading the proper translation (using deviceLocale and fallback to "en" when translation is not available isn't what the user expect), detecting RTL layout need, but also currencies, date format, etc.

For this multiples reasons and because the current name doesn't reflect the new possibilities of this lib, I chose to rename this package to react-native-localize.

Update should be smooth. If you follow the previous example:

import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from './translations/en.json';
import fr from './translations/fr.json';
import de from './translations/de.json';

i18n.locale = RNLanguages.language;
i18n.fallbacks = true;
i18n.translations = { en, fr, de };

export default i18n;

Unlink (with react-native unlink react-native-languages) and uninstall react-native-languages, then install and link react-native-localize.

import { I18nManager } from "react-native";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";

import en from './translations/en.json';
import fr from './translations/fr.json';
import de from './translations/de.json';

i18n.translations = { en, fr, de };
i18n.fallbacks = false;

const fallback = { languageTag: "en", isRTL: false };
const { languageTag, isRTL } = RNLocalize.findBestAvailableLanguage(Object.keys(i18n.translations)) || fallback;

I18nManager.forceRTL(isRTL); // optional, you might not want to handle RTL
i18n.locale = languageTag;

export default i18n;

More complex and performant examples are available in the /example folder (to avoid loading all your translations in memory or even load translations from the file system - not from our JS bundle)

It's also the occasion to switch to getters functions. "Constants" updated at runtime was a weird choice driven by the current NavigatorLanguage API.

New API offers:

type getLocales = () => Array<{
  languageCode: string;
  scriptCode?: string;
  countryCode: string;
  languageTag: string;
  isRTL: boolean;
}>;

type getCurrencies = () => Array<string>;
type getCountry = () => string;
type getCalendar = () => "gregorian" | "japanese" | "buddhist";
type getTemperatureUnit = () => "celsius" | "fahrenheit";
type getTimeZone = () => string;
type uses24HourClock = () => boolean;
type usesMetricSystem = () => boolean;

type addEventListener = (type: "change", handler: Function) => void;
type removeEventListener = (type: "change", handler: Function) => void;

type findBestAvailableLanguage = (
  languageTags: Array<string>,
) => { languageTag: string; isRTL: boolean } | void;

Which should simplify your l20n needs.
Feel free to make any feedback.

[danilobuerger]

@zoontek Is there any reason why the Podspec was removed?

[zoontek]

@danilobuerger It is not removed, but moved in the /ios folder. Some users had a hard time mixing react-native link and CocoaPods. Fortunately, it will be easier in the future because the core team plan to switch entirely to pod installs

[danilobuerger]

Ah thanks @zoontek !

[Abramovick]

For anyone interested in mocking it with jest...

I've got it working as

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

// Mock React Native Localize
jest.mock('react-native-localize', () => ({
  findBestAvailableLanguage: ([language = 'en']) => ({
    languageTag: language,
    isRTL: false,
  }),
}));

[ducsilva]

For anyone interested in mocking it with jest...

I've got it working as

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

// Mock React Native Localize
jest.mock('react-native-localize', () => ({
  findBestAvailableLanguage: ([language = 'en']) => ({
    languageTag: language,
    isRTL: false,
  }),
}));

which folder did you use?