|
| 1 | +--- |
| 2 | +title: RTL Support |
| 3 | +--- |
| 4 | + |
| 5 | +# RTL Support |
| 6 | + |
| 7 | +React Native Paper supports right-to-left (RTL) layouts for languages such as Arabic and Hebrew. |
| 8 | + |
| 9 | +## How it works |
| 10 | + |
| 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. |
| 12 | + |
| 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 |
| 18 | +<html dir="rtl"> |
| 19 | + <!-- App content --> |
| 20 | +</html> |
| 21 | +``` |
| 22 | + |
| 23 | +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. |
| 24 | + |
| 25 | +:::note |
| 26 | +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. |
| 27 | +::: |
| 28 | + |
| 29 | +## Setting direction for the whole app |
| 30 | + |
| 31 | +Pass the `direction` prop to `PaperProvider`. Defaults to `'rtl'` when `I18nManager.getConstants().isRTL` returns `true`, otherwise `'ltr'`. |
| 32 | + |
| 33 | +Supported values: |
| 34 | + |
| 35 | +- `'ltr'`: Left-to-right text direction for languages like English, French etc. |
| 36 | +- `'rtl'`: Right-to-left text direction for languages like Arabic, Hebrew etc. |
| 37 | + |
| 38 | +```js |
| 39 | +import * as React from 'react'; |
| 40 | +import { PaperProvider } from 'react-native-paper'; |
| 41 | +import App from './src/App'; |
| 42 | + |
| 43 | +export default function Main() { |
| 44 | + return ( |
| 45 | + <PaperProvider direction="rtl"> |
| 46 | + <App /> |
| 47 | + </PaperProvider> |
| 48 | + ); |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +## Overriding direction for a subtree |
| 53 | + |
| 54 | +Use `LocaleProvider` to override the direction for a specific part of the tree without affecting the rest of the app: |
| 55 | + |
| 56 | +```js |
| 57 | +import * as React from 'react'; |
| 58 | +import { LocaleProvider } from 'react-native-paper'; |
| 59 | + |
| 60 | +export default function ArabicSection() { |
| 61 | + return ( |
| 62 | + <LocaleProvider direction="rtl"> |
| 63 | + {/* Components here will use RTL layout */} |
| 64 | + </LocaleProvider> |
| 65 | + ); |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +## Reading the current direction |
| 70 | + |
| 71 | +The direction is available in your own components via the `useLocale` hook: |
| 72 | + |
| 73 | +```js |
| 74 | +import * as React from 'react'; |
| 75 | +import { useLocale } from 'react-native-paper'; |
| 76 | + |
| 77 | +function MyComponent() { |
| 78 | + const { direction } = useLocale(); |
| 79 | + |
| 80 | + // Use the direction |
| 81 | +} |
| 82 | +``` |
0 commit comments