RTL(Right To Left) support with internationalization for React Native Applications.

Hello every one!, I hope you all are doing great. After having some break I decided to get back into a article which been requested by several peoples in last few months. So it’s all about RTL(Right To Left) support.

what is RTL?

Basically RTL is flipping your view or screen. Imagine your self being in front of a mirror. What are you gonna see?

Yeah that’s right. You will see your self from the mirror but with one exception. Everything in your right side will be shown in your left side. At the same time everything in your left side will be shown in your right side.

Why do we need this behavior in application development?

Imagine your self being in a development team that currently working on a project which uses internationalization with several language support. Most of the languages and countries normally start reading left to right but some countries such as UAE are start reading right to left. So when it some to implement screens, it is almost impossible to recreate each and every screen for the second time with the different layout. That when the RTL support comes into the picture. In this particular article we are only going to talk about specifically for React Native Applications but keep in mind this RTL support can be added to any font end applications.

Okay enough with the introduction let’s move on to a real react native application and will see the actual implementation.

1. Initialize React Native Application

npx create-react-native-app my-project

2. Create a simple screen which display a single text. (I suggest you to not use render the text in center of the screen instead render it left side of the screen)

3. Add internalization library-(i18next)

npm install react-i18next i18next --save

4. Create a new file i18n.js beside your index.js containing following content.

There are several ways that we can Translate our content

a. Using the hook : Using the hook in functional components is one of the options you got. The t function is the main function in i18next to translate content

b. Using the HOC : Using higher order components is one of the most used method to extend existing components by passing additional props to them.The t function is the main function in i18next to translate content

c. Using the render prop : The render prop enables you to use the t function inside your component.

d. Using the Trans component : The Trans component is the best way to translate a JSX tree in one translation. This enables you to eg. easily translate text containing a link component or formatting like <strong>

You can refer more about this in here : https://react.i18next.com/guides/quick-start

In this particular example we are going to use the hook

5. Add useTranslation hook to App.js

Since we have added the language support for both English and Arabic let’s add click event to the app. Also we will add additional changes which required in order to move between two languages.

6. Let’s add the button to change the language with other configurations to translate texts with the help i18next

As you can see the when we handle language translation it’s automatically add the RTL support. That’s because the <Text> component supports RTL ou of the box. But for the other view we have to add manually RTL support.

7. Let’s add the native configurations for RTL support in our react native app(Making an App RTL-ready: more reference here : https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps)

in IOS add this line to in AppDelegate.m file

[[RCTI18nUtil sharedInstance] allowRTL:YES];

also don’t forget to import this line in AppDelegate.m file

#import "React/RCTI18nUtil.h"

in Android add this 2 lines to in MainApplication.java

I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
sharedI18nUtilInstance.allowRTL(getApplicationContext(), true);

also don’t forget to import this line in MainApplication.java

import com.facebook.react.modules.i18nmanager.I18nUtil;

finally add this line to AndroidManifest.xml

android:supportsRtl="true"

8. Now we can call forceRTL() to flip between left an right views. This forceRTL() function requires a boolean also it is imported from I18nManager package from react native. Add this line to onClick method of change language button.

9. Modify the i18.js file in order to define default language to Arabic when RTL mode is on.

lng: I18nManager.isRTL ? "ar" : 'en',

after do this modification i18.js file will look like this

Now we are almost done. Now you can restart your application by running

react-native run-android or react-native run-ios

But you will realize that when click change language button the RTL functionally does not work. Actually it’s working but in order to see the changes you have to press R to reload the metro blunder. we will fix this after checking the result.

So it works. 😁

10. As the final step let’s fix that bug.Which not seeing results immediately when click change language button. The reason behind that is React Native does not actually register the change until we restart the bundle. We can fix this by using package react-native-restart. By using this package we can restart our instance.

npm install --save react-native-restart

If you are using IOS device

cd ios
pod install

If you are using Android device No further steps should be taken

Now in App.js import the package

import RNRestart from "react-native-restart";

Then add this line to onPress call back function in change language button.

RNRestart.Restart();

Now we are done. Everything works fine. You can find the GitHub repository to this project in here : https://github.com/Shihara-Dilshan/React-Native-RTL

Thanks for reading. 😍