Adding RTL Language Support in Mendix Native

Adding RTL Language Support in Mendix Native

My Experience and Best Practices

As a developer working with Mendix Native, I have always appreciated the platform’s ability to simplify mobile application development. However, when I was tasked with implementing support for right-to-left (RTL) languages like Arabic and Hebrew, I quickly realized that it wasn’t as straightforward as I initially thought.

Cover image

Multilingual support is essential for any business expanding into global markets. While Mendix provides excellent language translation capabilities, ensuring a seamless RTL experience required a combination of JavaScript actions, CSS adjustments, and careful UI design considerations. In this article, I’ll share my journey, the challenges I faced, and the solutions I discovered along the way.

Getting Started with Language Translations

The first step in making an app multilingual is handling text translations. Mendix offers built-in language settings where we can define translations for every text element in the app. Since we already had English and Spanish translations, I decided to export the English version as a JSON file and use it as a template for Arabic.

If you’re just starting, you can manually enter translations using Mendix’s App Settings > Languages menu. Alternatively, translation tools can automate this process. But while translating text is easy, getting the UI to display correctly for RTL languages was where the real work began.

Another challenge was ensuring that dynamic text updates correctly. Some elements, such as buttons and labels, need to change their text direction dynamically based on the selected language. Mendix provides some built-in support for this, but in cases where custom widgets are used, additional adjustments are required.

The Challenge of RTL Layouts in Mendix Native

One of the biggest challenges I encountered was adjusting the UI layout for RTL languages. Unlike left-to-right (LTR) languages, where text and elements naturally align from left to right, RTL layouts require mirroring. This means text alignment, navigation, and even icons need to be adjusted.

In Mendix Native, which is built on React Native, there are no direct RTL layout settings in the visual editor. Instead, adjustments need to be made using styles and JavaScript logic. This included flipping flexbox alignment, adjusting margins and paddings, and ensuring that animations behaved correctly.

Additionally, some third-party UI components did not support RTL by default. This required deeper modifications, including manually setting styles and using conditional logic to determine layout direction dynamically.

Why We Needed to Use I18nManager and this method

At first, it seemed like setting the language in Mendix would be enough to handle the RTL switch. However, I quickly ran into an issue: when the device language was English (LTR) and we switched the Mendix app language to an RTL language, everything worked as expected. But if the device language was already RTL and we changed the Mendix app language to an LTR language, problems arose.

In this case, even English text started rendering in the wrong (RTL) direction. Additionally, certain widgets, such as rating components, sliders, and toggle switches, also followed the incorrect direction, causing usability issues. To correct this behavior, we had to explicitly force the layout direction using I18nManager.

Furthermore, certain native behaviors, such as text input fields and placeholders, required additional handling to ensure they appeared correctly. Without I18nManager, users would experience inconsistent UI behavior depending on their device’s default language settings.

Implementing RTL Layout with I18nManager

In this nanoflow, we are checking if the new language is English. Then, to force the UI into RTL mode dynamically, I used the following JavaScript action:

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";
import { I18nManager } from 'react-native';
import * as RNLocalize from "react-native-localize";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * @param {boolean} isEng
 * @returns {Promise.<void>}
 */
export async function OnChangeLanguageSetRTL(isEng) {
 // BEGIN USER CODE
 console.error("RTL setting is currently  " +I18nManager.isRTL)
  const locales = RNLocalize.getLocales();
    let lang =locales[0].languageCode;
 console.error("Device language " +lang)
 if(lang==='ar')
 {
  I18nManager.forceRTL(isEng);
 }
 else
 {
  I18nManager.forceRTL(!isEng);
 }
 // END USER CODE
}

This script detects the device’s current language and applies the appropriate RTL or LTR setting. However, changing the layout dynamically required an app reload.

Ensuring Proper UI Rendering

After forcing the layout change, I noticed that some UI components did not immediately reflect the updates. The best way to ensure a smooth transition was to clear the cache and refresh the application. I achieved this with a simple Mendix Clear cached session data and reload activity that is provided by Mendix out-of-box, which clears the cache and triggers a reload one by one:

Clear cache:

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * Clears saved session data from the local storage for offline native and PWAs.
 * @returns {Promise.<void>}
 */
export async function ClearCachedSessionData() {
 // BEGIN USER CODE
    if (mx.session && mx.session.clearCachedSessionData === undefined) {
        return Promise.reject(new Error("JS action 'Clear cached session data' is not supported prior to Mendix client v9.14"));
    }
    await mx.session.clearCachedSessionData();
 // END USER CODE
}

Reload:

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * Reloads web and native applications.
 * @returns {Promise.<void>}
 */
export async function Reload() {
 // BEGIN USER CODE
    mx.reload();
    return new Promise(() => {
        // Never resolve this pormise to ensure that the next action in the nanoflow (if any)
        // will not be executed before the actual reload is happended.
    });
 // END USER CODE
}

Lessons Learned and Best Practices

Throughout this process, I picked up several key lessons that made implementing RTL support in Mendix Native much smoother:

• Use I18nManager for global layout adjustments. This ensures proper alignment across the entire app.
• Test UI components in both LTR and RTL modes. Some elements behave differently and require manual tweaking.
• Ensure text input fields support both LTR and RTL text direction. This is especially important for bilingual users.
• Optimize performance. Overusing CSS transformations can affect performance, particularly on mobile devices.
• Validate third-party libraries. Some UI components may require modifications to work correctly in RTL mode.

Final Thoughts

Adding RTL support in Mendix Native was a challenging but rewarding experience. While the platform provides great multilingual capabilities, achieving full RTL compliance required additional effort, including JavaScript modifications, CSS adjustments, and UI restructuring.

This experience taught me the importance of testing with real users who rely on RTL languages daily. Their feedback helped refine the UI and improve the overall usability of the application.

By sharing my journey, I hope to help other developers facing similar challenges. If you’re working on RTL support in Mendix Native and have insights or questions, I’d love to hear from you. Let’s make our applications more accessible to users around the world.

Read more

[embed]Language Settings Introduction Mendix is designed to be used by users in multiple languages. The Languages tab of the App Settings allows…docs.mendix.com

[embed]Translating Your App Content Introduction Delivering your Mendix app in multiple languages is an important capability for reaching a wide audience…docs.mendix.com

[embed]Batch Translate Introduction Batch translate allows you to enter texts in one language which correspond to texts in another language…docs.mendix.com

From the Publisher -

Inspired by this article to bring your ideas to life with Mendix? Sign up for a free account! You’ll get instant access to the Mendix Academy, where you can start building your skills.

For more articles like this one, visit our Medium page. And you can find a wealth of instructional videos on our community YouTube page.

Speaking of our community, join us in our Slack community channel. We’d love to hear your ideas and insights!