Localization means adapting your app’s translations to suite your customers’ specific country or region. Supporting multiple languages (including RTL) is a critical feature for any successful mobile app, since it opens up the user base to a much larger pool of people, and also improves the user experience tremendously. Localization in React Native could be a little tricky, which is why we are writing this tutorial. Let’s see how you can localize your elegantly. React Native apps Installation is an Expo library that is used to fetch information about the locale of the user and localize your app. It provides information about the user’s locale, timezone, region, and currency Code all of which can help you customize the user experience of your app. Let’s install this package by running: expo-localization expo expo-localization install works hand in hand with to achieve localization in React Native mobile & web apps. i18n-js expo-localization It’s a small library to provide the Rails I18n translations on the JavaScript. yarn add i18n-js is another library we will need to help us cache translations. Let’s install it as well: lodash.memoize yarn add lodash.memoize Create your translation config files Let’s assume we want to support 3 languages in our React Native app: French, English and Spanish. Let’s add a configuration json file for each of them, as follows: fr.json { : } "welcome" "Bienvenue dans le didacticiel de traduction" en.json { : ,
} //en.json "welcome" "Welcome to translation tutorial" es.json { : ,
} //es.json "welcome" "Bienvenida al tutorial de traducción" React Native Localization — The Code Magic Now that we have the config files ready and that we installed the required dependencies, let’s do the actual implementation for localizing our React Native app. Let’s create a file called and add the following code snippet. As you’ve probably guessed, at , we are using exactly the same mechanism to localize our React Native apps, which is where we got this code snippet from. Feel free to rename IMLocalized into your own original name, but we’re going with it for this tutorial (the IM prefix stands for ). IMLocalized.js Instamobile Instamobile memoize ; i18n ; * Localization ; { I18nManager } ; translationGetters = { : ( ), : ( ), : ( ),
}; IMLocalized = memoize( i18n.t(key, config).includes( ) ? key : i18n.t(key, config),
  (key, config) => (config ? key + .stringify(config) : key),
); init = { localeLanguageTag = Localization.locale; isRTL = Localization.isRTL;

  IMLocalized.cache.clear(); I18nManager.forceRTL(isRTL); i18n.translations = {
    [localeLanguageTag]: translationGetters[localeLanguageTag](),
  };
  i18n.locale = localeLanguageTag;
}; import from 'lodash.memoize' // Use for caching/memoize for better performance import from 'i18n-js' import as from 'expo-localization' import from 'react-native' export const 'es-US' => () require './es.json' 'en-US' => () require './en.json' 'fr-FR' => () require './fr.json' export const ( ) => key, config 'missing' JSON export const => () let let // update layout direction // set i18n-js config a breakdown on the functions: figures out the user’s locale and configures i18n accepts keys of string values stored in our config file and fetches their values and helps to cache the retrieved value (huge performance benefits) fetches the correct config files depending on the user’s localeCreate your views init() IMLocalized() lodash.memoize translationGetters() To test our app, let’s build a simple custom UI, in order to showcase the powerful localization component. React ; {IMLocalized, init} ; { View, StyleSheet, Text } ; {
    init(); ( <Text style={styles.welcomeText} >
                {IMLocalized('welcome')}
            </Text> )
} styles = StyleSheet.create({ : { : , : , : }, : { : ,
    }
}) import from 'react' import from './IMLocalized' import from 'react-native' export ( ) function WelcomeScreen params return < = > View style {styles.container} </ > View const container flex 1 justifyContent "center" alignItems "center" welcomeText fontSize 16 Notice the use of . Instead of providing a simple “Welcome” string to the Text component, we wrap it in an call. This is the key part of how we achieve React Native Localization for supporting multiple languages, including RTL. The app will magically display the “Welcome” string into the correct language (based on user’s device setting), rather than showing a hardcoded English string. IMLocalized IMLocalized Running your app should look like this: English Change your device’s settings to Spanish, and reopen the app. Notice how the string is now in Spanish: Spanish Change the device settings one more time, to French: French Conclusion Localizing your application is very important to reach a wider range of customers from various parts of the world. Localizing your application is not a gruesome process to undertake as we have seen above. By using our method, you can simply translate all the strings you have in our app, by wrapping them in an call. You can follow a similar pattern in all the other mobile programming languages, such as , or . IMLocalized IMLocalized Swift Flutter Kotlin Adding support for multiple languages (including RTL) is pretty straightforward once you set up the infrastructure groundwork. Simply wrapping the hardcoded strings into a translation method is enough.

Fetch

Premium Chat Module For Your React Native App

How to Create Different Gradient Backgrounds in React Native Application

Localizing Your React-Native App [A How-To Guide]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Beginner's Guide To Using React Native Camera

How to Localize Your iOS App and Reach a Global Audience?

The IT Product Localization Guide

What No One Told Me About Being a Product Manager at an Early Stage Startup

What Are Convolution Neural Networks? [ELI5]

Rules of Thumb for Software Engineering

A Beginner's Guide To Using React Native Camera

How to Localize Your iOS App and Reach a Global Audience?

The IT Product Localization Guide

What No One Told Me About Being a Product Manager at an Early Stage Startup

What Are Convolution Neural Networks? [ELI5]

Rules of Thumb for Software Engineering

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps