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 dir prop
• 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: 16 moves 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: translateX and scaleX are negated (including Animated.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

• GitHub
• npm

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.