Why Does React Native Make You Restart the App Just to Switch Language? I Fixed It.
The frustration that started this
I’ve always wondered: why do I need to restart my entire app just to switch from English to Arabic?
On the web, you set dir="rtl" on any element and it just works. You can have LTR and RTL on the same page. You can switch direction at runtime without refreshing. It’s been this way for decades.
Then you come to React Native and the story is:
I18nManager.forceRTL(true);
// Now restart your app. Yes, the whole thing.
That’s it. That’s the API. A global flag that requires a full app restart. No per-component control. No mixing LTR and RTL on the same screen. And if you’re building an app for Arabic, Hebrew, Persian, or Urdu users — this is what you’re stuck with.
I always wished React Native had RTL capabilities similar to the web. So I built it.
Introducing expo-rtl
expo-rtl brings web-like RTL support to Expo and React Native:
-
Per-component direction — flip individual components or subtrees with a
dirprop - No restart required — switch locale and direction at runtime, instantly
- Automatic style flipping — margins, padding, borders, flexDirection, transforms — all handled
- Built-in i18n — translations, pluralization, locale detection, persistence
- NativeWind / Tailwind support — className styles flip automatically
-
22 drop-in components —
View,Text,FlatList,ScrollView, and more
npm install expo-rtl
The problem with I18nManager
Let’s be honest about what I18nManager.forceRTL() gives you:
I18nManager.forceRTL() |
expo-rtl |
|
|---|---|---|
| Granularity | App-wide only | Per-component |
| Restart required | Yes | No |
| Mix LTR + RTL | Not possible | Nested direction overrides |
| NativeWind support | Manual | Automatic |
| i18n built-in | No | Translations, pluralization, formatting |
| Style flipping | Partial (logical props only) | All physical + logical + transforms |
The core issue: I18nManager is a native module that sets direction at the app level. Changing it requires restarting the JavaScript bridge. There’s no way around it — it’s a fundamental limitation of the API.
expo-rtl takes a completely different approach. Instead of a native flag, it uses React context to propagate direction down the component tree, and flips styles in JavaScript before they reach the native layer.
Quick setup
1. Wrap your app
import { RTLProvider } from "expo-rtl";
const translations = {
en: {
greeting: "Hello {{name}}!",
items_one: "{{count}} item",
items_other: "{{count}} items",
},
ar: {
greeting: "!{{name}} مرحبا",
items_one: "عنصر {{count}}",
items_other: "{{count}} عناصر",
},
};
export default function App() {
return (
<RTLProvider
defaultLocale="en"
fallbackLocale="en"
persistLocale
translations={translations}
>
<MyApp />
</RTLProvider>
);
}
2. Use the components
import { View, Text, Image, useRTL } from "expo-rtl";
function HomeScreen() {
const { t, direction, setLocale, formatNumber } = useRTL();
return (
<View style={{ flexDirection: "row", gap: 12, paddingLeft: 16 }}>
<Image
flip
source={require("./arrow-right.png")}
style={{ width: 24, height: 24 }}
/>
<Text>{t("greeting", { name: "Ali" })}</Text>
<Text>{formatNumber(1234.56)}</Text>
</View>
);
}
When direction is "rtl":
-
flexDirection: "row"becomes"row-reverse" -
paddingLeft: 16moves to the right side - The arrow image mirrors horizontally
- Text renders in Arabic with correct alignment
No restart. No global state. Just React.
Per-component direction — the killer feature
This is the thing I wanted most from the web. On the web you can do:
<div dir="rtl">
<p>هذا النص بالعربية</p>
<div dir="ltr">
<p>This stays left-to-right</p>
</div>
</div>
Now you can do the same in React Native:
import { View, Text } from "expo-rtl";
// Arabic RTL screen with an embedded LTR code block
<View dir="rtl" style={{ padding: 16 }}>
<Text>هذا النص بالعربية</Text>
<View dir="ltr" style={{ flexDirection: "row" }}>
<Text>This section stays LTR — code snippets, phone numbers, etc.</Text>
</View>
</View>
Every component accepts a dir prop. Set it once and all children inherit the direction. Mix and match freely on the same screen.
What gets flipped automatically
You don’t need to think about any of this — it just works:
-
Margins & padding:
marginLeft↔marginRight,paddingLeft↔paddingRight -
Positioning:
left↔right - Borders: widths, colors, and border-radius all swap sides
-
Flex direction:
"row"↔"row-reverse" -
Text alignment:
"left"↔"right" -
Transforms:
translateXandscaleXare negated (includingAnimated.Value) -
Logical properties:
marginStart↔marginEnd,paddingStart↔paddingEnd
And if you have one component that should not flip (like a media player or a chart), just add noFlip:
<View noFlip style={{ flexDirection: "row" }}>
{/* This stays LTR even inside an RTL parent */}
</View>
NativeWind / Tailwind CSS support
If you use NativeWind, all your Tailwind classes flip automatically:
import "expo-rtl/nativewind"; // one-time setup in your entry file
import { View, Text, Image } from "expo-rtl";
<View className="flex-row gap-4 pl-4">
<Image flip source={chevron} className="w-4 h-4" />
<Text className="text-left flex-1">Flips to right in RTL</Text>
</View>
Classes like pl-4, mr-2, text-left, flex-row, rounded-l-lg, border-r-2 — all flip. Logical classes (ms-*, me-*, ps-*, pe-*, start-*, end-*) work too.
Built-in i18n
expo-rtl includes a full i18n system so you don’t need a separate translation library:
Interpolation:
t("greeting", { name: "Ali" }); // "Hello Ali!" or "!Ali مرحبا"
Pluralization (uses Intl.PluralRules for locale-correct categories):
t("items", { count: 1 }); // "1 item"
t("items", { count: 5 }); // "5 items"
// Arabic has six plural forms — all handled automatically
Nested keys:
t("settings.profile"); // dot notation for nested objects
Type-safe keys with autocomplete:
const { t } = useRTL<TranslationKeys<typeof translations>>();
t("settings.profile"); // autocomplete works
t("typo"); // TypeScript error
Locale-aware formatting:
formatNumber(1234.56); // "1,234.56" (en) / "١٬٢٣٤٫٥٦" (ar)
formatDate(new Date()); // "3/29/2026" (en) / "٢٩/٣/٢٠٢٦" (ar)
Auto-detection, persistence, fallback chains:
<RTLProvider
fallbackLocale="en" // fallback when key is missing
persistLocale // saves to AsyncStorage
translations={translations}
>
{/* Locale auto-detected from device via expo-localization */}
</RTLProvider>
When should you use this?
expo-rtl is for you if:
- You’re building an app that supports Arabic, Hebrew, Persian, or Urdu
- You need to switch language/direction at runtime without restarting
- You want per-component RTL control (not just global)
- You use NativeWind and need your Tailwind classes to flip
- You want i18n + RTL in one package instead of juggling multiple libraries
- You’re tired of
I18nManager.forceRTL()and its limitations
Try it
npm install expo-rtl
If this solves a problem for you, a GitHub star helps other developers find it. And if you have feedback or feature requests, open an issue — I’d love to hear from you.
Built by Ibrahim Tarhini because RTL in React Native deserved better.
Teknoloji devlerinden Meta, reçeteli lens kullanıcılarına özel Ray-Ban akıllı gözlüklerini hazırlıyor. Yeni modeller, yapay zekâ ve Wi-Fi 6 desteğiyle geliyor. İşte tüm detaylar: