React Native : Internationalisation

Dans cet article nous allons voir comment internationaliser une application ReactNative afin de proposer cette dernière dans diverses langues.

Commençons par créer un nouveau projet

react-native init I18N_Sample
cd I18N_Sample

Pour internationaliser notre application nous allons utiliser la librairie react-native-i18n.

yarn add react-native-i18n
rnpm link

Le principe de fonctionnement de cette librairie est le suivant :

  1. Il faut d'abord importer la librairie react-native-i18n quand on a besoin d'utiliser une traduction.
import I18n from 'react-native-i18n'
  1. Il faut définir l'ensemble des traductions que l'on va utiliser.
I18n.fallbacks = true
I18n.translations = {
  en: {
    greeting: 'Hi!',
  },
  'en-GB': {
    greeting: 'Hi from the UK!',
  },
  fr: {
    greeting: 'Bonjour!',
  },
}

Ici sur un périphérique en Français la valeur retournée sera "Bonjour!", sur un périphérique Anglais Royaume-Uni la valeur sera "Hi from the UK!" et pour le reste sa sera "hi!".

  1. Enfin il faut remplacer nos textes par leurs traductions.
<Text>{I18n.t('greeting')}</Text>

Voici un exemple complet d'un composant utilisant la traduction :

import I18n from 'react-native-i18n'

class Demo extends React.Component {
  render() {
    return <Text>{I18n.t('greeting')}</Text>
  }
}

I18n.fallbacks = true

I18n.translations = {
  en: {
    greeting: 'Hi!',
  },
  'en-GB': {
    greeting: 'Hi from the UK!',
  },
  fr: {
    greeting: 'Bonjour!',
  },
}

Dans notre cas plutôt que de devoir importer la librairie et gérer les traductions pour chaque composant, nous allons faire en sorte de gérer toutes les traductions au même endroit.

Créons un fichier strings.js à la racine du projet.

touch strings.js

Et ajoutez-y le code suivant :

var I18n = require('react-native-i18n')

I18n.fallbacks = true

I18n.translations = {
  en: {
    instruction1: 'Welcome to React Native!',
    instruction2: 'To get started, edit index.js',
    instruction3: 'Press Cmd+R to reload \n Cmd+D or shake for dev menu',
  },
  fr: {
    instruction1: 'Bienvenue sur React Native!',
    instruction2: 'Pour commencer, éditez index.js',
    instruction3:
      'Appuyez sur Cmd+R pour recharger \n Cmd+D ou agitez pour le menu dev',
  },
}

const AppString = {
  //screens Title
  instruction1: I18n.t('instruction1'),
  instruction2: I18n.t('instruction2'),
  instruction3: I18n.t('instruction3'),
}
export default AppString

Dans ce fichier comme dans l'exemple que nous avons vu précédemment, on importe la libraire et on définit nos traductions.

Cependant une fois nos traductions définies, on exporte une constante nommée AppStrings qui regroupe l'ensemble des traductions.

De cette manière nous n'aurons plus besoin d'utiliser la librairie react-native-i18n dans nos composants. Nous importerons seulement AppStrings.

Voici l'exemple de l'écran index.ios.js et index.android.js

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
import strings from './strings'

export default class I18N_Sample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{strings.instruction1}</Text>
        <Text style={styles.instructions}>{strings.instruction2}</Text>
        <Text style={styles.instructions}>{strings.instruction3}</Text>
      </View>
    )
  }
}

Voila nous avons vue comment internationaliser une application React Native.

Vous pouvez retrouver le code source ici.