Documentation Index
Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt
Use this file to discover all available pages before exploring further.
I18nManager is used to manage internationalization settings in your app, particularly for Right-to-Left (RTL) language support.
Properties
isRTL
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,
}
});
RTL support is available on:
- iOS: Full support
- Android: Full support (API 17+)
- Web: Relies on CSS
dir attribute and browser support
Important Notes
-
App Restart Required: All configuration methods (
allowRTL, forceRTL, swapLeftAndRightInRTL) require a full app restart to take effect.
-
Automatic Flipping: When
doLeftAndRightSwapInRTL is true (default), the following style properties are automatically flipped:
marginLeft ↔ marginRight
paddingLeft ↔ paddingRight
left ↔ right
borderLeftWidth ↔ borderRightWidth
- etc.
-
Prefer Start/End: For new code, prefer using
Start and End variants instead of Left and Right for better RTL support.
-
Testing: Use
forceRTL(true) during development to test RTL layouts without changing your device language.