React Native Arabic guide 1: translation and direction setup

Arabic support has two separate layers. i18next controls content language. React Native controls native layout direction through I18nManager. Changing one does not automatically complete the other.

Install the minimum

npm install i18next react-i18next

Keep translation files small at first, then initialize one shared instance:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import ar from "./locales/ar.json";
import en from "./locales/en.json";

await i18n.use(initReactI18next).init({
  resources: { ar: { translation: ar }, en: { translation: en } },
  lng: "ar",
  fallbackLng: "en",
  interpolation: { escapeValue: false },
});

Current i18next releases rely on Intl.PluralRules. Check the JavaScript engine used by the supported React Native version before adding a polyfill.

Own language state in one place

Persist a language code, not several direction flags. Derive direction from that value and expose it through one app-level provider. Components should consume the decision rather than call I18nManager independently.

const direction = language === "ar" ? "rtl" : "ltr";
const isRTL = direction === "rtl";

If the native direction must change, explain that a restart may be required and preserve the user’s current work. Do not force a restart for a simple text-language change when the layout can update safely.

Test missing translations correctly

Fallbacks are useful in production but can hide missing Arabic keys in tests. Check the requested language with fallback disabled:

const existsInLanguage = i18n.exists(key, {
  lng: language,
  fallbackLng: false,
});

Finish setup by testing first launch, restored language, language switching, plural forms, and a missing-key case. A visible Arabic home screen is only the beginning.