Skip to main content
I18nManager is used to manage internationalization settings in your app, particularly for Right-to-Left (RTL) language support.

​
Properties

​
isRTL

static isRTL: boolean
Indicates whether the current locale is RTL. Example: 
import { I18nManager } from 'react-native';

if (I18nManager.isRTL) {
  console.log('App is in RTL mode');
}

​
doLeftAndRightSwapInRTL

static doLeftAndRightSwapInRTL: boolean
Indicates whether left and right styles should be swapped in RTL layouts. Defaults to true. When true, styles like marginLeft automatically become marginRight in RTL mode. Example: 
import { I18nManager } from 'react-native';

console.log('Swap enabled:', I18nManager.doLeftAndRightSwapInRTL);

​
Methods

​
getConstants()

static getConstants(): {
  isRTL: boolean;
  doLeftAndRightSwapInRTL: boolean;
  localeIdentifier?: string;
}
Returns the current i18n configuration constants. Returns:
  • isRTL: Whether RTL is enabled
  • doLeftAndRightSwapInRTL: Whether left/right swapping is enabled
  • localeIdentifier: The current locale identifier (if available)
Example: 
import { I18nManager } from 'react-native';

const constants = I18nManager.getConstants();
console.log('RTL enabled:', constants.isRTL);
console.log('Locale:', constants.localeIdentifier);

​
allowRTL()

static allowRTL(shouldAllow: boolean): void
Enables or disables RTL layout support. Requires app restart to take effect. Parameters:
  • shouldAllow: true to enable RTL, false to disable
Example: 
import { I18nManager } from 'react-native';

// Enable RTL support
I18nManager.allowRTL(true);

// You must restart the app for this to take effect

​
forceRTL()

static forceRTL(shouldForce: boolean): void
Forces the app to use RTL layout regardless of the device locale. Requires app restart to take effect. Useful for testing RTL layouts during development. Parameters:
  • shouldForce: true to force RTL, false to use locale default
Example: 
import { I18nManager } from 'react-native';

// Force RTL mode for testing
I18nManager.forceRTL(true);

// Disable forced RTL
I18nManager.forceRTL(false);

​
swapLeftAndRightInRTL()

static swapLeftAndRightInRTL(flipStyles: boolean): void
Controls whether styles like marginLeft and marginRight are automatically flipped in RTL mode. Requires app restart to take effect. Parameters:
  • flipStyles: true to enable automatic flipping, false to disable
Example: 
import { I18nManager } from 'react-native';

// Enable automatic style flipping
I18nManager.swapLeftAndRightInRTL(true);

​
Usage Example

​
Enabling RTL Support

In your app’s entry file (e.g., index.js): 
import { AppRegistry, I18nManager } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

// Enable RTL support
I18nManager.allowRTL(true);

AppRegistry.registerComponent(appName, () => App);

​
Conditional Styling Based on RTL

import { I18nManager, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    // These will automatically flip in RTL mode
    marginLeft: 10,
    paddingRight: 20,
  },
  text: {
    // Use logical properties when auto-flip is disabled
    textAlign: I18nManager.isRTL ? 'right' : 'left',
  }
});

​
Testing RTL During Development

import { I18nManager, Platform } from 'react-native';

if (__DEV__) {
  // Force RTL in development to test layouts
  I18nManager.forceRTL(true);
}

​
Using Start/End Instead of Left/Right

Instead of marginLeft and marginRight, you can use logical properties: 
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    // These work correctly in both LTR and RTL
    marginStart: 10,  // Left in LTR, right in RTL
    marginEnd: 20,    // Right in LTR, left in RTL
    paddingStart: 15,
    paddingEnd: 5,
  }
});

​
Platform Support

RTL support is available on:
  • iOS: Full support
  • Android: Full support (API 17+)
  • Web: Relies on CSS dir attribute and browser support

​
Important Notes

  1. App Restart Required: All configuration methods (allowRTL, forceRTL, swapLeftAndRightInRTL) require a full app restart to take effect.
  2. Automatic Flipping: When doLeftAndRightSwapInRTL is true (default), the following style properties are automatically flipped:
    • marginLeft ↔ marginRight
    • paddingLeft ↔ paddingRight
    • left ↔ right
    • borderLeftWidth ↔ borderRightWidth
    • etc.
  3. Prefer Start/End: For new code, prefer using Start and End variants instead of Left and Right for better RTL support.
  4. Testing: Use forceRTL(true) during development to test RTL layouts without changing your device language.

Build docs developers (and LLMs) love

Get started for freeTalk to us