Right-to-left Text Capability

To enable RTL (Right-to-left) text capability for native apps, perform the following steps:

1. For enabling RTL support, the RTL language bundles should be added to your app. Arabic, Persian and Urdu are some of the languages, which possess RTL capabilities. For detailed information on adding the RTL language bundles for Android and iOS apps, refer Android and iOS guides respectively.

2. Ensure that the allowRTL () function is called at the beginning of the native code to enable the RTL layout for your app. The following code snippets serve as sample references for Android and iOS apps respectively:

   # For Android 
   
   // in MainActivity.java
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(context, true);

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

3. For an Android app, specify android:supportsRtl="true" in the AndroidManifest.xml file. The following code snippet serves as a sample reference:

   <manifest ... >
       ...
       <application ...
           android:supportsRtl="true">
       </application>
   </manifest>

4. Recompile your app and change the default app language to an RTL language, e.g. Arabic, so as to enable the RTL text capability for your app.

5. To enable the flipping of image components for the RTL layout, add a transform style to the image source file for flipping the source image in accordance with the RTL direction. The following code snippet serves as a sample reference:

   <Image
     source={...}
     style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]}}
   />

6. Open the native application. Since the the language direction has been changed to the RTL, a new log-on is required.

7. Log on to the application. You can notice that the application home page is displayed in the RTL direction.

The following screen shot serves as a sample reference of a workspace displayed in Arabic, with the RTL direction: