2

I'm trying to make an screen with Arabic text in it. It is basically a big that include smaller components nested into it. (the container is like the page, while the smaller ones are parts that need their own even handling onPress...etc). I want to make the text shown in justified way with lines starting/ending uniformly. So I went to the parent and added this style: textContainer: { direction: "rtl", textAlign: "justify", }, and it works really fine except the last line, it starts from the left instead of the right. So, is there a way to tell the to justify and also make the last line start from right? Here is how it looks(https://pasteboard.co/JMDRj1e.png) if you look at the last line it starts from left and not from right, I think this is a bug in react native.

Tysseer
  • 31
  • 1
  • 5

2 Answers2

2

The following worked for me, For iOS, I gave the text style writingDirection: 'rtl' and by importing #import <React/RCTI18nUtil.h> in AppDelegate.m, added these two lines in didFinishLaunchingWithOptions: ,

[[RCTI18nUtil sharedInstance] allowRTL:TRUE];
[[RCTI18nUtil sharedInstance] forceRTL:TRUE];

and for android you can refer here, How to set direction property of a View to RTL in React Native. Also, you need to add transform: [{scaleX: -1}] and flexDirection: row-reverse.

varsha94
  • 249
  • 1
  • 6
  • 22
1

Your implementation will only align the first line. in order to align an Arabic paragraph / or more than one line, you can do the following:

import I18nManager from react native in your app.js

import { I18nManager } from "react-native";

then add this line below the import to allow RTL

I18nManager.allowRTL(true);

finnaly you can add writingDirection: "rtl" to the style of the arabic text and it should be aligned the correct way

Amer NM
  • 159
  • 2
  • 7