Implementing RTL (Right-to-Left) in React Native Expo - A Step-by-Step Guide

Supporting Right-to-Left (RTL) languages such as Arabic and Hebrew is a key part of building globally accessible mobile applications. While React Native offers native RTL capabilities through the I18nManager API, integrating this feature seamlessly in an Expo-managed project requires extra configuration. This is especially true when aiming to support real-time language switching, persistent preferences, and consistent layout behavior across platforms.

This guide provides a step-by-step approach to implementing RTL support using i18next for localization, AsyncStorage for storing language preferences, and I18nManager to manage layout direction. It also addresses platform-specific quirks—like the need for full app restarts on iOS—and outlines how to apply a patch for projects using older versions of React Native. By following this setup, developers can deliver a smooth, RTL-compatible experience without needing to upgrade or eject from Expo.

Step 1: Setting Up Translations

Start by organizing translations using JSON files. Two sample files might look like this:

translations/en.json

{
  "welcome": "Welcome",
  "login": "Login"
}

translations/ar.json

{
  "welcome": "مرحبا",
  "login": "تسجيل الدخول"
}

Step 2: Initializing i18next with React Native

To handle localization, i18next and react-i18next are configured alongside AsyncStorage to persist the selected language. Here's the implementation, broken into logical chunks:

Import necessary modules

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { I18nManager } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import en from '../translations/en.json';
import ar from '../translations/ar.json';

Define translation resources:

const resources = {
  en: { translation: en },
  ar: { translation: ar },
};

Retrieve stored language preference (or default based on layout direction):

const getLanguage = async () => {
  const storedLanguage = await AsyncStorage.getItem('language');
  return storedLanguage || (I18nManager.isRTL ? 'ar' : 'en');
};

Initialize i18n after fetching the preferred language:

getLanguage().then(language => {
  i18n
    .use(initReactI18next)
    .init({
      resources,
      lng: language,
      keySeparator: false,
      interpolation: { escapeValue: false },
    });
});

This setup ensures that the application loads the correct language and layout direction on launch. To apply this configuration globally, make sure to import the above i18n setup file in your app's root layout before rendering the rest of your application. This guarantees that translations and layout direction are initialized before any UI is displayed.

Step 3: Switching Languages Dynamically

To allow users to change language at runtime and reflect RTL changes in the layout, the following function handles the switch:

import RNRestart from 'react-native-restart';

const changeLanguage = async () => {
  const newLanguage = selectedLanguage === 'ar' ? 'ar' : 'en';
  await i18n.changeLanguage(newLanguage);
  await AsyncStorage.setItem('language', newLanguage);
  I18nManager.forceRTL(newLanguage === 'ar');

  RNRestart.Restart();
};

selectedLanguage is a regular useState variable used to track the language the user wants to switch to. The I18nManager.forceRTL() function is used to change the layout direction. After making this change, RNRestart.Restart() is called to restart the app, ensuring that the layout updates are applied immediately.

Step 4: Handling Platform-Specific RTL Behavior

React Native applies RTL layout changes differently across platforms:

• Android: Works correctly after a single reload using RNRestart.
  
• iOS: Requires a full app restart and does not reflect changes even after reloads in versions prior to 0.79.0.

This behavior was addressed in React Native 0.79.0, where layout context updates dynamically. For projects using earlier versions, manual patching is necessary.
Github issues link - https://github.com/facebook/react-native/pull/49455

Step 5: Supporting RTL in iOS for Versions Below 0.79.0

To enable RTL on iOS without upgrading React Native, a patch can be applied:

Install patch-package

npm install patch-package postinstall-postinstall --save-dev

Modify internal RN layout handling

Navigate to:

node_modules/react-native/React/Fabric/Surface/RCTFabricSurface.mm

Locate this line:

_view = [[RCTSurfaceView alloc] initWithSurface:(RCTSurface *)self];

Add the following line immediately after:

[self _updateLayoutContext];

Generate the patch

npx patch-package react-native

Ensure patch is applied on every install

Update package.json:

"scripts": {
  "postinstall": "patch-package"
}

This ensures the patch persists across installs and CI/CD pipelines.

Step 6: RTL-Aware Styling Guidelines

To build components that adapt seamlessly between LTR and RTL:

Use logical padding/margin properties:

paddingStart: 10,
paddingEnd: 10

Flip layout direction conditionally:

flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'

Align text appropriately:

textAlign: I18nManager.isRTL ? 'right' : 'left'

These styling practices make the UI adaptive and prevent hardcoded visual inconsistencies.

Final Notes

Right-to-left support in React Native Expo can be achieved smoothly using a combination of i18next, persistent storage, I18nManager, and platform-specific fixes. By structuring the localization setup clearly and applying conditional logic for layout direction, applications can offer a rich, multilingual experience without disrupting the user journey, even in legacy environments.