Sunday 14 April 2024

internationalization & Localization (i18n) in a React Native Mobile Application using expo

 Implementing internationalization (i18n) in a React Native app using Expo can be achieved using libraries such as expo-localization and i18n-js. Here's a step-by-step guide:

                expo install expo-localization i18n-js


  • Create translation files: Create a translations folder in your project root. Inside this folder, create a file for each language you want to support (e.g., en.js, es.js). Each file should export an object where the keys are the same across all files, and the values are the translations.



// en.js

export default {

  greeting: 'Hello',

};


// es.js

export default {

  greeting: 'Hola',

};



  • Configure i18n-js: In your app's entry point file (usually App.js), import i18n from i18n-js, import translations from your translations files, and import Localization from expo-localization. Then, set the translations and locale for i18n.



import * as Localization from 'expo-localization';

import i18n from 'i18n-js';


import en from './translations/en';

import es from './translations/es';


i18n.translations = {

  en,

  es,

};


i18n.locale = Localization.locale;



  • Use i18n.t to translate text: Now, you can use i18n.t to translate text in your app. The argument to i18n.t should be the key of the translation you want to use.



import i18n from 'i18n-js';


<Text>{i18n.t('greeting')}</Text>



Remember, not all users may want to use the system-wide language. Consider providing an option in your app's settings to override the system-wide language.



No comments:

Post a Comment