Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

To enable RTL (Rightright-to-Leftleft (RTL) text capability direction for native apps, perform the following steps:

  1. For enabling RTL support, the RTL language bundles should must be added to your app. Arabic, Persian and Urdu are some of the languages , which possess RTL capabilitiesthat are written in RTL direction. 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:

    Code Block
    languagejava
    #// For Android, add 
    // in MainActivity.java
        
    I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
      
      sharedI18nUtilInstance.allowRTL(context, true);
    Code Block
    languageobjective-c
    #// For iOS, add // in AppDelegate.m
         [[RCTI18nUtil sharedInstance] allowRTL:YES];
  3. For an Android native app, specify android:supportsRtl="true" in the AndroidManifest.xml file. The following code snippet serves as a sample reference:

    Code Block
    languagejavahtml
    <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:

    Code Block
    <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.

...