Skip to content

Commit 23ea9a8

Browse files
author
Seph Soliman
committed
Add I18nManager docs
Added to sidebar as well. Related to react/react-native#51661 and react/react-native#51648
1 parent 07a4e7e commit 23ea9a8

2 files changed

Lines changed: 165 additions & 0 deletions

File tree

‎docs/i18nmanager.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
id: i18nmanager
3+
title: I18nManager
4+
---
5+
6+
# I18nManager
7+
8+
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.
9+
10+
## Examples
11+
12+
### Change positions and animations based on RTL
13+
14+
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.
15+
16+
```SnackPlayer name=I18nManager%20Change%20Absolute%20Positions%20And%20Animations
17+
import {I18nManager, Text, View} from 'react-native';
18+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
19+
20+
const App = () => {
21+
// Change to `true` to see the effect in a non-RTL language
22+
const isRTL = I18nManager.isRTL;
23+
return (
24+
<SafeAreaProvider>
25+
<SafeAreaView>
26+
<View style={{ position: 'absolute', left: isRTL ? undefined : 0, right: isRTL ? 0 : undefined }}>
27+
{isRTL ? (
28+
<Text>Back &gt;</Text>
29+
) : (
30+
<Text>&lt; Back</Text>
31+
)}
32+
</View>
33+
</SafeAreaView>
34+
</SafeAreaProvider>
35+
);
36+
}
37+
38+
export default App;
39+
```
40+
41+
### During Development
42+
43+
```SnackPlayer name=I18nManager%20During%20Development
44+
import {useState} from 'react';
45+
import {Alert, I18nManager, StyleSheet, Switch, Text, View} from 'react-native';
46+
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
47+
48+
const App = () => {
49+
const [rtl, setRTL] = useState(I18nManager.isRTL);
50+
return (
51+
<SafeAreaProvider>
52+
<SafeAreaView>
53+
<View style={styles.container}>
54+
<View style={styles.forceRtl}>
55+
<Text>Force RTL in Development:</Text>
56+
<Switch value={rtl} onValueChange={(value) => {
57+
setRTL(value);
58+
I18nManager.forceRTL(value);
59+
Alert.alert(
60+
'Reload this page',
61+
'Please reload this page to change the UI direction! ' +
62+
'All examples in this app will be affected. ' +
63+
'Check them out to see what they look like in RTL layout.',
64+
);
65+
}} />
66+
</View>
67+
</View>
68+
</SafeAreaView>
69+
</SafeAreaProvider>
70+
);
71+
}
72+
73+
const styles = StyleSheet.create({
74+
container: {
75+
padding: 20,
76+
},
77+
forceRtl: {
78+
flexDirection: 'row',
79+
justifyContent: 'space-between',
80+
alignItems: 'center',
81+
},
82+
});
83+
84+
export default App;
85+
```
86+
87+
# Reference
88+
89+
## Properties
90+
91+
### `isRTL`
92+
93+
```typescript
94+
static isRTL: boolean;
95+
```
96+
97+
A boolean value indicating whether the app is currently in RTL layout mode.
98+
99+
The value of `isRTL` is determined by the following logic:
100+
101+
- If `forceRTL` is `true`, `isRTL` returns `true`
102+
- If `allowRTL` is `false`, `isRTL` returns `false`
103+
- Otherwise, `isRTL` will be `true` given the following:
104+
- **iOS:**
105+
- The user-preferred language on the device is an RTL language
106+
- The application-defined localizations include the user-chosen language (as defined in the Xcode project file (`knownRegions = (...)`)
107+
- **Android:**
108+
- The user-preferred language on the device is an RTL language
109+
- The application's `AndroidManifest.xml` defines `android:supportsRTL="true"` on the `<application>` element
110+
111+
### `doLeftAndRightSwapInRTL`
112+
113+
```typescript
114+
static doLeftAndRightSwapInRTL: boolean;
115+
```
116+
117+
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.
118+
119+
## Methods
120+
121+
### `allowRTL()`
122+
123+
```typescript
124+
static allowRTL: (allowRTL: boolean) => void;
125+
```
126+
127+
Enables or disables RTL layout support for the application.
128+
129+
**Parameters:**
130+
131+
- `allowRTL` (boolean): Whether to allow RTL layout
132+
133+
**Important Notes:**
134+
135+
- Changes take effect on the next application start, not immediately
136+
- This setting is persisted across app restarts
137+
138+
### `forceRTL()`
139+
140+
```typescript
141+
static forceRTL: (forced: boolean) => void;
142+
```
143+
144+
Forces the app to use RTL layout regardless of the device language settings. This is primarily useful for testing RTL layouts during development.
145+
146+
Avoid forcing RTL in production apps as it requires a full app restart to take effect, which makes for a poor user-experience.
147+
148+
**Parameters:**
149+
150+
- `forced` (boolean): Whether to force RTL layout
151+
152+
**Important Notes:**
153+
154+
- Changes take full effect on the next application start, not immediately
155+
- The setting is persisted across app restarts
156+
- Only meant for development and testing. In production, you should either disallow RTL fully or handle it appropriately (see `isRTL`)
157+
158+
### `swapLeftAndRightInRTL()`
159+
160+
```typescript
161+
static swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
162+
```
163+
164+
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`.

‎website/sidebars.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ export default {
204204
'devsettings',
205205
'dimensions',
206206
'easing',
207+
'i18nmanager',
207208
'interactionmanager',
208209
'keyboard',
209210
'layoutanimation',

0 commit comments

Comments
 (0)