RTL Language Support (Arabic, Hebrew) in Mobile Apps

What You Need to Know About RTL Language Support in Mobile Apps

Imagine: you enter the UAE market, launch an Arabic version of your app — and get a flood of negative reviews. The menu is misaligned, buttons are unclickable, text gets cut off. Launching the app in Arabic, you may find that the "Back" button points right, and slides come from the left. Users are accustomed to the opposite order — and this causes cognitive dissonance. Without proper RTL support, even a functionally identical app feels broken, leading to a 30% drop in retention (data from our projects). We've adapted over 20 projects for Arabic and Hebrew and know all the pitfalls. Our team is ready to take on the full audit and turnkey RTL implementation.

Simply changing the locale and setting layoutDirection = rtl is only 20% of the work. The rest is manual adaptation of every component: icons, animations, navigation, text, and even gestures (e.g., swipes). Here's what actually breaks:

Our approach with custom flipping transforms is 2x faster than traditional rewriting of all screens for RTL from scratch and reduces rework time by 40%. This saves 30–50% of the budget compared to a full overhaul — typically $1,000–$3,000 per platform. We use automated tests to verify mirroring, catching errors early and lowering QA costs.

Why Standard RTL Solutions Don't Cover All Cases?

The detailed table above shows typical issues. Additionally, on iOS custom draw() and Core Graphics require conditional flipping to mirror content. On Android autoMirrored works only for VectorDrawable, not for BitmapDrawable. In Flutter Directionality doesn't affect CustomPainter, so we manually apply canvas.scale(-1, 1). In React Native, check the version: on Android I18nManager.isRTL works only in RN >=0.63; otherwise, forceRTL with a reload is required. We also handle advanced Unicode bidirectional algorithm features like explicit override characters and BidiReordering for mixed scripts.

How We Implement RTL Support

1. Audit. Run the app on Arabic locale via adb shell setprop persist.sys.locale ar-AE (Android) and Settings → General → Language & Region (iOS Simulator). This reveals 80% of issues. Capture artifacts on each screen — typically 10–15 per app with 50 screens.

2. Classification. Divide problems into 4 types: layout, icons, text, animations. For each type, a specific fix recipe. For example, for icons we apply conditional flipping; for animations, replace absolute coordinates with relative ones.

3. Fixes. On iOS, rewrite custom draw() for conditional flipping, use UIView.appearance(whenContainedInInstancesOf:) for system inheritance of semanticContentAttribute. On Android, replace left/right with start/end in XML and programmatically via MarginLayoutParamsCompat. For Flutter, mirror CustomPainter via canvas.scale(-1, 1). For React Native, check I18nManager.isRTL in each component.

4. Testing. Always on real devices: Samsung with One UI changes VectorDrawable behavior, and on older iOS versions UIView.appearance may not work. Add screenshot tests with RTL locales in CI. Run on 3–4 physical devices to cover 95% of cases.

Что входит в работу

• Полный аудит кода и выявление артефактов на всех экранах
• Исправление верстки, иконок, текста, анимаций
• Адаптация кастомных компонентов (Canvas, Core Graphics, CustomPainter)
• Настройка интеграции с бэкендом для передачи контекста RTL
• Ручное тестирование на 4+ реальных устройствах
• Интеграция автоматических скриншотных тестов RTL в CI/CD
• Документация по поддержке RTL для команды
• Доступ к репозиторию с примерами реализаций
• Обучение команды работе с RTL (2 часа онлайн)
• Месяц технической поддержки после сдачи

How Long Does RTL Rework Take Per Platform?

Common Mistakes in RTL Development

• Hardcoded textAlign: 'left' in custom components instead of 'auto' or 'start'
• transform: [{scaleX: -1}] applied to icon without checking I18nManager.isRTL — icon always mirrors
• Number localization: ١٢٣ (eastern arabic numerals) vs 123 — depends on display context, need to explicitly set NSLocale / Locale
• Bidirectional text (Arabic + English name): NSAttributedString with explicit NSWritingDirectionAttributeName, otherwise word order breaks

How to Incorporate RTL in the Design Phase

The best approach is to use start/end instead of left/right from the beginning, avoid absolute coordinates in animations, and check custom Drawable for autoMirrored. If the project is already built, we conduct an audit and fix all inconsistencies. Our engineers ensure correct operation in Arabic and Hebrew on all supported devices with clean, maintainable code. Мы гарантируем совместимость с последними версиями iOS и Android, а наши сертифицированные специалисты имеют 5+ лет опыта в локализации.

Don't let your users get lost in a mirrored maze — contact us for an RTL audit consultation. Order a consultation — we'll calculate the timeline and cost. The investment pays off within 2-3 months after entering the market.

Apple recommends using UIView.appearance() for inheriting semantic attributes; for more details, see RTL (Right-to-Left) on Wikipedia.