Internationalization

🌍 Making Your App Speak Every Language

React Native Internationalization (i18n)

The Story: Building a Universal Translator

Imagine you built an amazing treehouse. It’s beautiful! But only kids who speak your language can read the signs inside. What if kids from Japan, France, or Brazil want to play too?

Internationalization (i18n) is like adding magic labels to your treehouse that automatically change to whatever language your visitor speaks! 🏠✨

Why “i18n”? Count the letters between ‘i’ and ‘n’ in “internationalization” — there are exactly 18! That’s why developers call it i18n.

🎯 What We’ll Learn

graph TD
    A["🚀 i18n Setup"] --> B["📁 Translation Files"]
    B --> C["🌐 Locale Formatting"]
    C --> D["🎉 Multi-Language App!"]

📦 Part 1: i18n Setup

What Is i18n Setup?

Think of i18n setup like installing a translator robot in your app. Before you can translate anything, you need to:

1. Bring in the translator (install the library)
2. Give it instructions (configure it)
3. Tell it which languages you know (set up resources)

Installing Your Translator Robot

First, we need to add the magic translation tools to our project:

npm install i18next
npm install react-i18next

What are these?

• i18next = The brain 🧠 (handles all translation logic)
• react-i18next = The arms 💪 (connects the brain to React Native)

Setting Up the Translator

Create a file called i18n.js in your project:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// Translation words for each language
const resources = {
  en: {
    translation: {
      welcome: "Welcome!",
      hello: "Hello"
    }
  },
  es: {
    translation: {
      welcome: "¡Bienvenido!",
      hello: "Hola"
    }
  }
};

// Set up the translator
i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en',        // Default language
    fallbackLng: 'en', // Backup language
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

Breaking It Down (Like Building Blocks)

Connecting to Your App

In your main App.js:

import './i18n'; // Just import it!
import React from 'react';
import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <View>
      <Text>{t('welcome')}</Text>
    </View>
  );
}

🎉 That’s it! The t() function is your magic wand — wave it at any word, and it transforms!

📁 Part 2: Translation Files

The Library of Languages

Imagine a library where each bookshelf holds words in a different language. That’s exactly what translation files are!

Organizing Your Translations

Instead of cramming everything into one file, smart developers organize like this:

📁 src/
  📁 locales/
    📁 en/
      📄 common.json
      📄 home.json
      📄 settings.json
    📁 es/
      📄 common.json
      📄 home.json
      📄 settings.json
    📁 fr/
      📄 common.json
      📄 home.json
      📄 settings.json

Creating Translation Files

English (en/common.json):

{
  "buttons": {
    "save": "Save",
    "cancel": "Cancel",
    "submit": "Submit"
  },
  "messages": {
    "success": "Great job!",
    "error": "Oops! Something went wrong"
  }
}

Spanish (es/common.json):

{
  "buttons": {
    "save": "Guardar",
    "cancel": "Cancelar",
    "submit": "Enviar"
  },
  "messages": {
    "success": "¡Buen trabajo!",
    "error": "¡Ups! Algo salió mal"
  }
}

Loading Multiple Translation Files

Update your i18n.js to load these files:

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

// Import all translation files
import enCommon from './locales/en/common.json';
import enHome from './locales/en/home.json';
import esCommon from './locales/es/common.json';
import esHome from './locales/es/home.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        common: enCommon,
        home: enHome
      },
      es: {
        common: esCommon,
        home: esHome
      }
    },
    lng: 'en',
    ns: ['common', 'home'], // namespaces
    defaultNS: 'common'
  });

Using Namespaces

Now you can access translations by namespace:

const { t } = useTranslation('common');

// Access nested keys with dots
t('buttons.save')     // → "Save"
t('messages.success') // → "Great job!"

// Or specify namespace inline
t('home:greeting')    // From home.json

Dynamic Values (The Magic Trick!)

What if you want to say “Hello, Sarah!” where the name changes?

Translation file:

{
  "greeting": "Hello, {{name}}!"
}

In your code:

t('greeting', { name: 'Sarah' })
// → "Hello, Sarah!"

It’s like Mad Libs for your app! 📝

Pluralization (Counting Made Easy)

Different languages handle plurals differently. i18next handles this beautifully:

{
  "apple": "{{count}} apple",
  "apple_plural": "{{count}} apples"
}

t('apple', { count: 1 })  // → "1 apple"
t('apple', { count: 5 })  // → "5 apples"

🌐 Part 3: Locale Formatting

Numbers, Dates, and Money — Oh My!

Here’s a mind-blowing fact:

Same information, totally different formats! 🤯

The Intl API: Your Formatting Friend

JavaScript has a built-in superhero called Intl (short for International):

Formatting Numbers

const number = 1234567.89;

// US Format
new Intl.NumberFormat('en-US')
  .format(number)
// → "1,234,567.89"

// German Format
new Intl.NumberFormat('de-DE')
  .format(number)
// → "1.234.567,89"

// Indian Format
new Intl.NumberFormat('en-IN')
  .format(number)
// → "12,34,567.89"

Formatting Currency

const price = 1234.5;

// US Dollars
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(price)
// → "$1,234.50"

// Euros in Germany
new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(price)
// → "1.234,50 €"

// Japanese Yen
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(price)
// → "¥1,235"

Formatting Dates

const date = new Date('2024-12-25');

// US Format
new Intl.DateTimeFormat('en-US')
  .format(date)
// → "12/25/2024"

// UK Format
new Intl.DateTimeFormat('en-GB')
  .format(date)
// → "25/12/2024"

// Japanese Format
new Intl.DateTimeFormat('ja-JP')
  .format(date)
// → "2024/12/25"

Custom Date Options

const date = new Date();

new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(date)
// → "Wednesday, December 25, 2024"

Creating Reusable Format Helpers

Make your life easier with helper functions:

// utils/formatters.js
export const formatNumber = (num, locale) => {
  return new Intl.NumberFormat(locale)
    .format(num);
};

export const formatCurrency = (amount, locale, currency) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

export const formatDate = (date, locale) => {
  return new Intl.DateTimeFormat(locale, {
    dateStyle: 'medium'
  }).format(new Date(date));
};

Using Formatters in Components

import { useTranslation } from 'react-i18next';
import { formatCurrency, formatDate } from './utils/formatters';

function ProductCard({ product }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;

  return (
    <View>
      <Text>{product.name}</Text>
      <Text>
        {formatCurrency(product.price, locale, 'USD')}
      </Text>
      <Text>
        Added: {formatDate(product.createdAt, locale)}
      </Text>
    </View>
  );
}

🎯 Putting It All Together

graph TD
    A["User Opens App"] --> B{Check Device Language}
    B --> C["Load Translation Files"]
    C --> D["Apply Locale Formatting"]
    D --> E["🎉 Localized Experience!"]

Quick Reference

🚀 You Did It!

You now know how to:

• ✅ Set up i18n in React Native
• ✅ Organize translation files like a pro
• ✅ Format numbers, dates, and money for any country

Your app can now travel the world and speak to everyone! 🌍✨

Remember: Internationalization isn’t just about translation — it’s about making everyone feel welcome in your app. That’s pretty amazing! 💜