gregory
gregory

Reputation: 253

React native - rtl in ios

firstly i worked on android and the RTL working good, i added the following code:

   I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
   sharedI18nUtilInstance.setAllowRTL(context, true);

to MainActivity.java and

android:supportsRtl="true"

to AndroidManifest.xml

and in the js code:

I18nManager.forceRTL(true);

Now is the problem: i tried to set rtl on ios but its not working i added

 // in AppDelegate.m
   [[RCTI18nUtil sharedInstance] allowRTL:YES];

and

I18nManager.forceRTL(true);

in js code but all the text and flex are still ltr... what can i do?

Upvotes: 7

Views: 7149

Answers (3)

omar abu alhija
omar abu alhija

Reputation: 61

in my case add

#import <React/RCTI18nUtil.h> //in top page AppDelegate.m

and in didFinishLaunchingWithOptions add this in the top // page AppDelegate.m

[[RCTI18nUtil sharedInstance] allowRTL:YES];

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
  [[RCTI18nUtil sharedInstance] allowRTL:YES];
...}

Upvotes: 3

nima
nima

Reputation: 8915

No need to add an RTL language to your project. just open your AppDelegate.m file in yourProject/ios/YourProject/AppDelegate.m

take care not to open another file that similar to this with .h extension

Now, add #import <React/RCTI18nUtil.h> to the top of code like this:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTI18nUtil.h>      <-- added here

Now restart and rebuild your application.

Now you can change the RTL direction of the whole app with I18nManager easily.

import {I18nManager} from "react-native"


I18nManager.forceRTL(true) // false for LTR direction

Upvotes: 9

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

My problem did not solve even by adding a new RTL language. Finally, I solved the issue by adding the following line to my AppDelegate.m file, inside didFinishLaunchingWithOptions function, under the allow RTL line [[RCTI18nUtil sharedInstance] allowRTL:YES];:

[[RCTI18nUtil sharedInstance] forceRTL:YES];

Upvotes: 5

Related Questions