Unlocking Global Audiences: Mastering Internationalization with React Native

Table of Content

1. Understanding the Benefits of Internalization

2. Setting it up with React Native

3. Translation Management

4. Pluralization

5. Dynamic Content

6. Conclusion

Understanding Internalization

Internalization is a crucial aspect of software development that allows applications to adapt to different languages, regions, and culture and is often abbreviated as i18n. It is a software technique that helps your application reach and accommodate a global audience.

In order to achieve this, there is a term called localization which we are going to discuss.

Localisation involves adapting an application to a specific language and region. In react native, we have various libraries that provides support for localisation. They facilitate the retrieval of information such as user's language, time zone and even currency.

We are going to be using

1. react-i18next

2. i18next

3. intl-pluralrules

To get started lets setup an empty react native project and install all the libraries needed

npx react-native init Internalization

yarn add react-i18next i18next intl-pluralrules

PS: Build you react native project before installing any library.

Once the setup has been completed, we can use it to access locale information and adjust our applications content accordingly.

Setting Up Internationalization

For best practice, we are going to create a folder called i18n, that is where we will put our modules/files.

1. Internalization.tsx

2. index.ts

3. en.json

4. fr.json

Translation Management

It is a key to maintaining an internationalized React Native app and it provides a mechanism for managing translations and switching between different locales dynamically. These tools enable developers to organize and update translations seamlessly. To do so, we create a module Internatization.tsx

import i18next from '../i18n';
import React, { ReactNode, useEffect } from 'react';
import { NativeModules, Platform } from 'react-native';
import 'intl-pluralrules';

const Internationalization = ({ children }: { children: ReactNode }) => {
  const fetchAppLang = async () => {
    const locale = Platform.select({
      ios:
        NativeModules.SettingsManager?.settings?.AppleLocale ||
        NativeModules.SettingsManager?.settings?.AppleLanguages[0],
      android: NativeModules.I18nManager.localeIdentifier,
    });

    if (locale.includes('en')) {
      i18next.changeLanguage('en');
    } else {
      i18next.changeLanguage('fr');
    }
  };

  useEffect(() => {
    fetchAppLang();
  }, []);

  return <>{children}</>;
};

export default Internationalization;

Pluralization

Languages differ in how they handle pluralization. i18next and react-i18next offers built-in support for these language-specific nuances. Here we can add list of languages we want to support for a broader audience and to do so we create a module index.ts were we configure the setup.

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

import english from './en.json';
import french from './fr.json';

const languageResources = {
  en: {
    translation: english,
  },
  fr: {
    translation: french,
  },
};

i18next.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  lng: 'en',
  fallbackLng: 'en',
  resources: languageResources,
});

export default i18next;

en.json

{
    "Greeting": "Good Morning"
}

fr.json

{
  "Greeting": "Bonjour",
}

Dynamic Content

React Native allows developers to load content dynamically, enabling the app to fetch the appropriate translations based on the user's preferences. This dynamic approach ensures that the application can adapt to changes in language or region without requiring a full app reload. To do so, we need to wrap our App.tsx content inside our Internalization component

import React from 'react';
import {Text} from 'react-native';
import Internationalization from './src/i18n/Internationalization';
import { useTranslation } from 'react-i18next';

function Main(): JSX.Element {
    const { t } = useTranslation();

    return (
        <Text>{t("Greeting")}</Text>
    )
}

function App(): JSX.Element {
  return (
       <Internationalization>
          <Main />
       </Internationalization>
  );
}

export default App;

Conclusion

In conclusion, Internalization is a crucial consideration for React Native developers aiming to reach a diverse global audience. By incorporating localization, message formatting, translation management and addressing language specific nuances, developers can create applications that resonate with users from various linguistics backgrounds.

If you found this help, feel free to share ❤️❤️❤️