Right to left for specific text in react-native RTL

Question

I am developing app in arabic in react native , i have used the tabs and menu from native base. i have aligned right because there is only single word . but now i have to write sentence which is right to left aligned. Is there way to set RTL format for specific text because when i set the I18nManager.forceRTL(true); it changed it for whole app and my previous work is all ruined and tabs not work correctly . please help .

Solution

The React Native version is 0.57 now, And there is no react native configuration for RTL support yet.

But there is a native solution for it. for IOS and Android use below configuraion:

IOS:

search for AppDeligete.m file in your project path, then import RCTI18nUtil library from React and put RTL configuration inside didFinishLaunchingWithOptions class. After putting my configs, you will have below code:

/* AppDeligete.m */
#import <React/RCTI18nUtil.h> //<== AmerllicA config
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [[RCTI18nUtil sharedInstance] allowRTL:YES]; //<== AmerllicA config
  [[RCTI18nUtil sharedInstance] forceRTL:YES]; //<== AmerllicA config

  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"rntest"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Android:

search for MainApplication.java file in your project path, then import I18nUtil class from com.facebook.react.modules.i18nmanager and put RTL configuration inside MainApplication after onCreate function. After putting my configs, you will have below code:

/* MainAppliaction.java */

package com.rntest;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import com.facebook.react.modules.i18nmanager.I18nUtil; //<== AmerllicA config


public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new VectorIconsPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance(); //<== AmerllicA config
        sharedI18nUtilInstance.forceRTL(this, true); //<== AmerllicA config
        sharedI18nUtilInstance.allowRTL(this, true); //<== AmerllicA config

        SoLoader.init(this, /* native exopackage */ false);
    }
}

Now rerun your react native stacks. these configurations need to restart the development process. After the restart, the project is ready for RTL, for my project all FlexBox behavior change to right to left. I repeat it, ALL OF BEHAVIOR.

NOTE: In Android, all of react native components will change to RTL direction but in IOS for the right to left direction of react native Text component, use writingDirection: 'rtl' style code.

ATTENTION: Using textAlign: 'right/left/center' is a different concept The RTL/LTR direction.