Setting Up React Native Localization for Multi-Language Apps

React Native Localization (RNL) makes localization much easier to implement, significantly shortening development time. This is a step-by-step guide to setting up RNL, plus some tips for implementation with multi-language apps.

Setting Up React Native Localization

1. It only takes two commands to get the library installed:

   
   yarn add react-native-localization
   cd ios && pod install
   

2. Next, we’ll need to define our strings. This can either be a list of strings for each locale, or we can create a structure for accessing them. That structure could look like this:

   
   {
     “en”: {
       hello: “Hello!”,
       goodMorning: “Good morning”
     },
     “es”: {
       hello: “¡Hola!”,
       goodMorning: “Buenos días”
     }
   }
   

3. I prefer to keep the translation split into files based on language. For this example, I’d have en.ts for English and es.ts for Spanish.

   
   // en.ts
   export default {
     hello: “Hello!”,
     goodMorning: “Good morning”
   } 
   
   // es.ts
   export default {
     hello: “¡Hola!”,
     goodMorning: “Buenos días”
   }
   

4. Next, we can import these files into our strings file and use them similarly to the example above.

   
   import LocalizedStrings from "react-native-localization";
   import english from './en'
   import spanish from './es'
   
   export const strings = new LocalizedStrings({
     "en": english,
     "es": spanish
   });
   

5. To access the strings, we can simply ask the LocalizedStrings object for them. The React Native Localization library will use the device’s set locale to determine what language to use.

   
   export class Title extends PureComponent {
     render() {
       return (
         <View>
           <Text>
             {strings.hello}
           </Text>
         </View>
       );
     }
   }
   

   If our device’s language was set to English, this would display as “Hello!” If the language was set to Spanish, it would display as “¡Hola!”

Tips & Tricks

Determine the Device’s Language

To retrieve the device location (or interface language) from the library, run:

strings.getInterfaceLanguage();

Force a Language Programmatically

With RNL, it’s possible to programmatically set the language, even to one that’s different from the device’s language.

strings.setLanguage("es");

Once the language is set, we can get the app language from the library. This is different from the interface language mentioned above.

strings.getLanguage();

Default Language

In some cases, there may not be a translation for a specific word. When this happens, the library will choose a string from the default language. The default language is simply the first language that comes in the list passed to the constructor of LocalizedStrings. In the example above, our default language would be English.

React Native Localization is a great tool. Please let me know in the comments if you have any tips and tricks to get more out of it.