Skip to content

Commit 3cb9b1c

Browse files
Update docs/docs/guides/10-rtl.md
Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>
1 parent fc1290e commit 3cb9b1c

1 file changed

Lines changed: 10 additions & 2 deletions

File tree

docs/docs/guides/10-rtl.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,17 @@ React Native Paper supports right-to-left (RTL) layouts for languages such as Ar
88

99
## How it works
1010

11-
On React Native, the writing direction is normally controlled by `I18nManager.forceRTL`. React Native Paper reads this automatically i.e. no configuration is needed for native apps that already set up RTL via `I18nManager`.
11+
By default, React Native Paper reads the writing direction from `I18nManager.getConstants().isRTL` on native platforms. So it will use your existing RTL setup on initial render.
1212

13-
However, `I18nManager` is a no-op on **React Native Web**, which means RTL layouts break silently in web apps. The `direction` prop on `PaperProvider` (and the `LocaleProvider` component) lets you explicitly control the writing direction so Paper behaves correctly on all platforms.
13+
See [I18nManager](http://reactnative.dev/docs/i18nmanager) docs and [Enabling RTL support in Expo](https://docs.expo.dev/guides/localization/#enabling-rtl-support) to configure your app properly.
14+
15+
On the Web, the RTL value is not set globally, unlike native platforms. `I18nManager.getConstants().isRTL` is a no-op on [React Native Web](https://necolas.github.io/react-native-web/). To enable RTL globally, you can specify `dir` attribute on the `html` element:
16+
17+
<html dir="rtl">
18+
<!-- App content -->
19+
</html>
20+
21+
Then, let `react-native-paper` know about it by using the `direction` prop on `PaperProvider` or the `LocaleProvider` component to match the writing direction in your app.
1422

1523
:::note
1624
The `direction` prop informs React Native Paper about the text direction in the app i.e. it doesn't change the text direction by itself. If you intend to support RTL languages, it's important to set this prop to the correct value that's configured in the app. If it doesn't match the actual text direction, the layout might be incorrect.

0 commit comments

Comments
 (0)