CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Internationalization

Combine i18next, useTranslation and language switching to write a multilingual app.

Summary - Internationalization

In this group you saw i18n, i18next, translation files, useTranslation and language switching. A multi language app works like this: i18next.init starts it, translations live in JSON files, components get t through useTranslation, the user picks a language with changeLanguage.

In the last lesson you will write a component that joins all pieces. It will use useTranslation, translate a string and hold a language switch button. This way you see the multi language flow end to end.

Practice Write a multi language component

Write an App component. Take t and i18n from useTranslation. Show t('greeting') in a Text. In a TouchableOpacity's onPress call i18n.changeLanguage('en').

Starter code

App.js
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';

function App() {
  // add useTranslation and components
  return <View />;
}

Sample solution

App.js
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  return (
    <View>
      <Text>{t('greeting')}</Text>
      <TouchableOpacity onPress={() => i18n.changeLanguage('en')}>
        <Text>EN</Text>
      </TouchableOpacity>
    </View>
  );
}

Practice Extend the translation file

Write the content of a tr.json. The "greeting" key carries "Merhaba", the "farewell" key carries "Hoşça kal".

Starter code

App.js
{
  // add translation keys here
}

Sample solution

App.js
{
  "greeting": "Merhaba",
  "farewell": "Hoşça kal"
}

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which method switches the language?

App.js
i18n.changeLanguage(?)
  • changeLanguage Correct answer
  • useTranslation
  • init
  • fallbackLng

Explanation: changeLanguage switches the language.

2 Match each piece to its role

Term Meaning
i18next.init Initialization
useTranslation Gives t
changeLanguage Switches language
tr.json Turkish strings

All lessons in Expert

1 New architecture

  1. What is the new architecture?
  2. JSI
  3. Fabric
  4. TurboModules
  5. Codegen
  6. Summary - New architecture

2 Performance engineering

  1. Profiling
  2. React Profiler
  3. Bottleneck
  4. List optimization
  5. Memory leaks
  6. Summary - Performance engineering

3 App architecture

  1. Feature-based
  2. Layered
  3. Clean architecture
  4. Repository pattern
  5. Dependency injection
  6. Summary - App architecture

4 Monorepo

  1. What is a monorepo?
  2. Yarn workspaces
  3. npm workspaces
  4. Turborepo
  5. Shared packages
  6. Summary - Monorepo

5 Accessibility

  1. accessibilityLabel
  2. accessibilityRole
  3. accessibilityHint
  4. accessibilityState
  5. VoiceOver and TalkBack
  6. Summary - Accessibility

6 Internationalization

  1. What is i18n?
  2. i18next
  3. Translation files
  4. useTranslation
  5. Language switching
  6. Summary - Internationalization

7 Security

  1. Code obfuscation
  2. API key security
  3. Certificate pinning
  4. Anti-tamper
  5. Secure coding
  6. Summary - Security

8 Expert final

  1. Project design
  2. New architecture
  3. Performance
  4. Monorepo
  5. Putting it together