Skip to content

Commit

Permalink
Add an example for direction prop
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Aug 29, 2024
1 parent c65db83 commit 11192c4
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions versioned_docs/version-7.x/navigation-container.md
Original file line number Diff line number Diff line change
Expand Up @@ -917,6 +917,38 @@ Custom theme to use for the navigation components such as the header, tab bar et
The direction of the text configured in the app. Defaults to `'rtl'` when `I18nManager.getConstants().isRTL` returns `true`, otherwise `'ltr'`.
Supported values:
- `'ltr'`: Left-to-right text direction for languages like English, French etc.
- `'rtl'`: Right-to-left text direction for languages like Arabic, Hebrew etc.
Example:
<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>
```js
<Navigation
// highlight-next-line
direction="rtl"
/>
```
</TabItem>
<TabItem value="dynamic" label="Dynamic">
```js
<NavigationContainer
// highlight-next-line
direction="rtl"
>
{/* content */}
</NavigationContainer>
```
</TabItem>
</Tabs>
This is used in various navigators to adjust the content according to the text direction, for example, the drawer in the [drawer navigator](drawer-navigator.md) is positioned on the right side in RTL languages.
This prop informs React Navigation about the text direction in the app, 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.
Expand Down

0 comments on commit 11192c4

Please sign in to comment.