I18nManager

The I18nManager module provides utilities for managing Right-to-Left (RTL) layout support for languages like Arabic, Hebrew, and others. It provides methods to control RTL behavior and check the current layout direction.

Examples

Change positions and animations based on RTL

If you absolutely position elements to align with other flexbox elements, they may not align in RTL languages. Using isRTL can be used to adjust alignment or animations.

import React from 'react';
import {I18nManager, Text, View} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  // Change to `true` to see the effect in a non-RTL language
  const isRTL = I18nManager.isRTL;
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View
          style={{
            position: 'absolute',
            left: isRTL ? undefined : 0,
            right: isRTL ? 0 : undefined,
          }}>
          {isRTL ? <Text>Back &gt;</Text> : <Text>&lt; Back</Text>}
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;

During Development

import React, {useState} from 'react';
import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const [rtl, setRTL] = useState(I18nManager.isRTL);
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.forceRtl}>
            <Text>Force RTL in Development:</Text>
            <Switch
              value={rtl}
              onValueChange={value => {
                setRTL(value);
                I18nManager.forceRTL(value);
                Alert.alert(
                  'Reload this page',
                  'Please reload this page to change the UI direction! ' +
                    'All examples in this app will be affected. ' +
                    'Check them out to see what they look like in RTL layout.',
                );
              }}
            />
          </View>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  forceRtl: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

export default App;

Reference

Properties

`isRTL`


static isRTL: boolean;

A boolean value indicating whether the app is currently in RTL layout mode. The value of isRTL is determined by the following logic:

If forceRTL is true, isRTL returns true
If allowRTL is false, isRTL returns false
Otherwise, isRTL will be true given the following:
- iOS:
  - The user-preferred language on the device is an RTL language
  - The application-defined localizations include the user-chosen language (as defined in the Xcode project file (knownRegions = (...))
- Android:
  - The user-preferred language on the device is an RTL language
  - The application’s AndroidManifest.xml defines android:supportsRTL="true" on the <application> element

`doLeftAndRightSwapInRTL`


static doLeftAndRightSwapInRTL: boolean;

A boolean value indicating whether left and right style properties should be automatically swapped when in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts.

Methods

`allowRTL()` Android iOS


static allowRTL: (allowRTL: boolean) => void;

Enables or disables RTL layout support for the application. Parameters:

allowRTL (boolean): Whether to allow RTL layout

Important Notes:

Changes take effect on the next application start, not immediately
This setting is persisted across app restarts

`forceRTL()` Android iOS


static forceRTL: (forced: boolean) => void;

Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development. Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience. Parameters:

forced (boolean): Whether to force RTL layout

Important Notes:

Changes take full effect on the next application start, not immediately
The setting is persisted across app restarts
Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see isRTL)

`swapLeftAndRightInRTL()` Android iOS


static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;

Swap left and right style properties in RTL mode. When enabled, left becomes right and right becomes left in RTL layouts. Does not affect the value of isRTL.

React Native for Vega

React Native for Vega Extended APIs

I18nManager

I18nManager

Examples

Change positions and animations based on RTL

During Development

Reference

Properties

`isRTL`

`doLeftAndRightSwapInRTL`

Methods

`allowRTL()` Android iOS

`forceRTL()` Android iOS

`swapLeftAndRightInRTL()` Android iOS

​I18nManager

​Examples

​Change positions and animations based on RTL

​During Development

​Reference

​Properties

​isRTL

​doLeftAndRightSwapInRTL

​Methods

​allowRTL() Android iOS

​forceRTL() Android iOS

​swapLeftAndRightInRTL() Android iOS

I18nManager

Examples

Change positions and animations based on RTL

During Development

Reference

Properties

`isRTL`

`doLeftAndRightSwapInRTL`

Methods

`allowRTL()` Android iOS

`forceRTL()` Android iOS

`swapLeftAndRightInRTL()` Android iOS