◉RORK LABJP
●GPT-6.1 SOL — Added to Rork's model menu (09-29) with Low, Medium and High effort; included on Pro and Max●SONNET 5.5 — Claude Sonnet 5.5 is selectable: strong at UI design and faster than Sonnet 5 (09-28)●SDK 58 — Beta since 09/15 with no stable date yet; running projects in Expo Go has required login since 09/03●WIDGET — A write-up traces an iOS widget that renders black only in production builds●OBSERVE — EAS Observe now records native crashes too (SDK 57.0.21 or later, 10/07)●NEW — My App Open Ad Only Showed When the App…●GPT-6.1 SOL — Added to Rork's model menu (09-29) with Low, Medium and High effort; included on Pro and Max●SONNET 5.5 — Claude Sonnet 5.5 is selectable: strong at UI design and faster than Sonnet 5 (09-28)●SDK 58 — Beta since 09/15 with no stable date yet; running projects in Expo Go has required login since 09/03●WIDGET — A write-up traces an iOS widget that renders black only in production builds●OBSERVE — EAS Observe now records native crashes too (SDK 57.0.21 or later, 10/07)●NEW — My App Open Ad Only Showed When the App…
Articles/App Dev
◇ App Dev/2026-06-27Advanced

Your Arabic Users See an Unmirrored Layout — RTL in a Rork (Expo) App and the Reload Trap

You added Arabic to a Rork-generated Expo app, but the screen never flips and the back button stays on the wrong side. The cause is that I18nManager.forceRTL requires a relaunch. This walks through detecting direction with expo-localization, applying it reliably with Updates.reloadAsync, swapping to marginStart, and mirroring only the arrows — all with working code.

Rork585React Native239Expo219Localization8RTL
✦ Premium Article

A message from an Arabic-speaking user — "the back button is on the left and hard to reach" — arrived a few days after I added Arabic metadata to one of my wallpaper apps. The copy was genuinely Arabic. But the layout still ran left to right, and the back arrow that belongs in the top-right corner was sitting in the top-left. I had translated the strings and forgotten the right-to-left layout flip entirely.

The frustrating part was that calling I18nManager.forceRTL(true) in code changed nothing on screen. The logs said it was applied, yet the layout stayed left-to-right. As an indie developer I spent the better part of an hour staring at code that looked correct. The cause was simpler: React Native's RTL setting is handed to the native layout engine, so it doesn't switch until the app is rebuilt.

Using a Rork-generated Expo app as the example, here's how to get past that relaunch wall — and how to stop "the strings translated but the layout broke" from happening structurally — alongside the pitfalls I actually hit in my own apps.

Mirroring is automatic, but enabling it is manual

The first thing worth knowing is that once RTL is active, arrangements like flexDirection: 'row' flip automatically. You don't rebuild every screen by hand. The trouble is the act of enabling it.

RTL on/off is baked into the native view hierarchy, so toggling it mid-session doesn't touch screens that are already mounted. I18nManager gives you two calls:

APIRoleWhen it applies
I18nManager.allowRTL(bool)The base permission. If this is false, forceRTL has no effectNext launch
I18nManager.forceRTL(bool)Actually forces the RTL layoutNext launch (i.e. the app must be rebuilt)

"Next launch" is the catch for both. If you want the user to see the change right away, you have to trigger that rebuild yourself. In Expo, Updates.reloadAsync() from expo-updates is the most reliable way.

Read the device's text direction to set the launch orientation

Start by detecting whether the device is set to an RTL language such as Arabic or Hebrew. getLocales() from expo-localization returns a textDirection for each locale, so lean on that rather than maintaining your own list of RTL language codes — the OS won't miss edge cases the way a hand-rolled list does.

// lib/rtl.ts
import * as Localization from 'expo-localization';
import { I18nManager } from 'react-native';
import * as Updates from 'expo-updates';
 
// Is the device's top-priority locale RTL?
export function deviceWantsRTL(): boolean {
  const [primary] = Localization.getLocales();
  return primary?.textDirection === 'rtl';
}
 
// Call once on launch; if the direction disagrees, rebuild
export async function syncLayoutDirection(): Promise<void> {
  const wantsRTL = deviceWantsRTL();
 
  // Already in the desired direction? Do nothing (prevents an infinite reload)
  if (I18nManager.isRTL === wantsRTL) return;
 
  I18nManager.allowRTL(wantsRTL);
  I18nManager.forceRTL(wantsRTL);
 
  // Fast Refresh in dev sometimes ignores reload, so guard it
  if (!__DEV__) {
    await Updates.reloadAsync();
  }
}

The if (I18nManager.isRTL === wantsRTL) return; guard looks minor but matters. Without it you fall into "direction differs → reload → launches again → …" forever. I left it out the first time and watched the simulator restart itself in a loop.

Call it at the root, before any UI renders.

// app/_layout.tsx (Expo Router)
import { useEffect, useState } from 'react';
import { syncLayoutDirection } from '../lib/rtl';
 
export default function RootLayout() {
  const [ready, setReady] = useState(false);
 
  useEffect(() => {
    syncLayoutDirection().finally(() => setReady(true));
  }, []);
 
  if (!ready) return null; // stalls here if a reload is about to fire
  return <Stack /* ... */ />;
}

Allow RTL on the app.json side as well. Baking allowRTL in at build time keeps the first launch stable.

{
  "expo": {
    "extra": { "supportsRTL": true },
    "ios": { "infoPlist": { "CFBundleAllowMixedLocalizations": true } }
  }
}
✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN
✦Understand why switching to Arabic doesn't mirror the layout — I18nManager.forceRTL needs a relaunch — and ship a Updates.reloadAsync flow that applies it reliably
✦Replace hard-coded marginLeft/right and position:left with marginStart/end logical properties so your full-screen viewer's close button stops landing on the wrong side
✦Mirror only the back arrows and chevrons with a transform while leaving the wallpaper thumbnails untouched — the 'mirror the UI, not the content' line
Secure payment via Stripe · Cancel anytime
✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

or
Unlock all articles with Membership →
Share

Thank You for Reading

Rork Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.

  • ✦Copy-paste ready implementation code
  • ✦New advanced guides published daily
  • ✦$5/mo or $10 for lifetime access
View Membership →

Related Articles

◇ App Dev2026-08-16
My chart broke on day one, not at scale
A line chart that vanished for anyone with only a few days of data. The cause was a zero-height Y axis turning coordinates into NaN. Here is the measured behavior and the small normalization layer that fixed it.
◇ App Dev2026-08-06
Deciding overlay text legibility at ingest time instead of on device — four metrics measured side by side
Moving the question of whether text stays readable over a wallpaper out of the device and into the content pipeline. Four candidate metrics measured across 240 images, including what downscaled judging actually computes.
◇ App Dev2026-10-15
When adjustsFontSizeToFit Shrinks Just One Row, Suspect the Box Height, Not the String
Only the 10th row of a list drops to 4pt on iOS, though the data and strings are fine. I read the Yoga rounding and font-fit sources, then counted how often the box comes up short in Node.