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.

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

translations/en.json

translations/ar.json

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

Define translation resources:

Initialize i18n after fetching the preferred language:

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.

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

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.

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

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

Install patch-package

Modify internal RN layout handling

Navigate to:

Locate this line:

Add the following line immediately after:

Generate the patch

Ensure patch is applied on every install

Update package.json:

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

To build components that adapt seamlessly between LTR and RTL:

Use logical padding/margin properties:

Flip layout direction conditionally:

Align text appropriately:

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

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.