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

what is RTL?

Why do we need this behavior in application development?

npx create-react-native-app my-project
npm install react-i18next i18next --save
[[RCTI18nUtil sharedInstance] allowRTL:YES];
#import "React/RCTI18nUtil.h"
I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();sharedI18nUtilInstance.allowRTL(getApplicationContext(), true);
import com.facebook.react.modules.i18nmanager.I18nUtil;
android:supportsRtl="true"
lng: I18nManager.isRTL ? "ar" : 'en',
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.

npm install --save react-native-restart
cd ios
pod install
import RNRestart from "react-native-restart";
RNRestart.Restart();

--

--

--

Software Engineer 2 at Arimac || Data science | Machine learning | Deep learning Enthusiast || SE Undergraduate

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why we need to use express.json(), express.urlencoded();

Reduce Your Arrays!

A story about reactive thinking

Programmatically sign in with Facebook into a web site

how to write a medium story

What happens when you type holbertonschool.com in your browser and press Enter.

App based file resolution in React Native — MultiApp Framework

Tree view implementation with vue.js without any external libraries

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shihara Dilshan

Shihara Dilshan

Software Engineer 2 at Arimac || Data science | Machine learning | Deep learning Enthusiast || SE Undergraduate

More from Medium

React Native: How To Navigate Between Screens

10 Reasons: Why to consider React Native while building an application from scratch [Detailed…

Swipe Navigation on React Native

Add AI Denoising to your Video Calls using the Agora React Native UIKit