Handling of Multiple Languages and Orientation Using React Native

Do you want your React Native app to automatically detect the language of your user’s device and display the text in the correct translation?
Do you want to lock your React Native app in portrait or landscape mode or recognize when the user tilts the device?

NOTE: If you want more articles like this, you might want to subscribe to my newsletter because you will get more content like this! 💌

In this tutorial, I will teach you how to add internationalization and orientation handling to your React Native app. If you already have a React Native project and only want to translate your app, skip to step two. Skip to step three for orientation lock. Let’s go!

Note: If you get an error at any point, check the GitHub repository here with commits for each step, or reach out to me on Twitter.

1. Getting a React Native Project

We start by cloning this repository. If you want to go through the steps of setting up the React Native project yourself, check out my tutorial “Using TypeScript With React Native”.

git clone https://github.com/janhesters/react-native-typescript-jest-enzyme.git

Next, inside the newly created react-native-orientation-internationalization/ directory, install the node modules by running:

npm install

Note: If you opened the project in your editor before installing the node modules, you might get linter warnings. Close and reopen the project to get rid of them.

2. Internationalization / Localization

It is fantastic to provide your app in multiple languages because your app becomes accessible to more users. We will use Stefano Falda’s React Native Localization package to translate our app in different languages.

2. a) Installing the Package

First, we need to install the package.

npm install react-native-localization --save

Then we need to link it.

react-native link react-native-localization

Note: This does not work on Windows. Windows users, please click here and come back after you’ve successfully installed the package.

Unfortunately, there aren’t any types for TypeScript for this package available.

2. b) Using the package

Luckily this package is easy to use. We need to import LocalizedStrings from the package. LocalizedStrings are objects that consist of keys for the languages (en, us, de, it, fr…), which have an object as it’s value. The respective language’s object consists of keys that contain the localized strings as their values.

Since code speaks louder than words, let me give you the code. In App.tsx (or App.js if you don’t use TypeScript) we will create a strings variable with LocalizedStrings. In my code example, I give you the German translations for React Native’s default welcome instructions because German happens to be my mother tongue. Feel free to use your native language.

Let’s take a look at strings. When running the app React Native will automatically detect the system’s language and load the correct object of the respective language. Note that the first key of strings — in our case en — is the default value. Its strings will be displayed when the device’s language didn’t match any language key.

What if we want to display a different sentence conditionally 🤔? Luckily the default React Native welcome instructions already cover such a case. In instructions a different string will be shown depending on the operating system of the device. To translate these strings too, replace the hardcoded value for the corresponding strings key.

Lastly for our changes to take effect, replace the hardcoded values in the <Text /> components with the corresponding strings key.

That’s it 🎉! Now switch your simulator to German (or the language that you used), run the app and enjoy your internationalized React Native App. You can tell that it worked if your simulator successfully displays the translated language instead of the default one 🙌🏻.

It worked 👏🏻!

3. Orientation handling

When creating apps, I often find myself having to lock the orientation of the app in portrait or landscape mode. Sometimes you also want to detect if the user has tilted the phone.
To handle the orientation, we will use Yamill Vallecillo’s React Native Orientation package.

3 a.) Installing the package

Install the node modules of the package.

npm install react-native-orientation –save

If you are using TypeScript also add the types.

npm install — save-dev @types/react-native-orientation

Next, we need to link its dependencies.

react-native link react-native-orientation

Now depending on your platform, you need to do different manual configuration. Relax about tinkering with the native code. It’s easier than it looks 😉. Let’s handle iOS first and then tackle Android.

For iOS add the following to your AppDelegate.m inside your app’s Xcode project. You can find that file in your project’s root directory under ios/<your_app_name>/AppDelegate.m.

For Android, we need to implement the onConfigurationChanged() method in our MainActivity.java. This file is located in our project’s root directory under android/app/src/main/java/<your>/<package>/<id>/MainActivity.java. If you’ve cloned the repository above, the file path translates to android/app/src/main/java/com/myapp/MainActivity.java.

That’s it for the native iOS and Android part.

3 b.) Usage the package

To lock the application in portrait or landscape mode, we have to import the orientation package and call the respective lockToPortrait() or lockToLandscape() method in the componentDidMount() lifecycle method. Furthermore, let’s add a listener that fire if the user tilts the device so we can detect that. We have to remove that listener in componentWillUnmount().

If you manually want to get the device’s orientation at some point use:

Awesome 👍🏻! Run your app on your simulator or device of choice. Tilt the device and watch it stay in portrait mode.

This image is not photoshopped (look at the shadow!) 😇

orientationDidChange will naturally NOT trigger if you’ve locked the device’s orientation.

Summary

1. We got a project by cloning it.
2. We added localization to our app to automatically translate it based on the language of the user’s device.
3. We added orientation handling to lock the app in portrait mode and detect if the user tilts it.

My name is Jan Hesters. I’m a Full Stack Developer specializing in JavaScript and Python, studied physicist, psychology-enthusiast, and alongside Nikolas, a founder of Full Stack Founders.

If you enjoyed this article, you might want to clap a bunch of times, because it helps me out a lot.
Thank you 🤗

NOTE: If you want more articles like this, you might want to subscribe to my newsletter because you will get more content like this! 💌