Right-to-Left (RTL)
Bidi-correct number rendering for Arabic, Hebrew, and other RTL locales
In RTL apps, NumberFlow automatically right-aligns numbers and applies Unicode bidi visual reordering so currency symbols, minus signs, and other formatting elements appear on the correct side. This works out of the box when I18nManager.isRTL is true, or you can set direction="rtl" explicitly.
How it works
In a standard RTL React Native app, I18nManager.isRTL is true and NumberFlow adapts automatically:
- Default alignment changes to right (the "start" edge in RTL)
- Bidi visual reordering repositions currency symbols and signs to match browser text rendering. Arabic
١٬٢٣٤٫٥٦ ج.م.becomesج.م. ١٬٢٣٤٫٥٦(currency on the left, the visual "start" in RTL) - Digits stay left-to-right within the number block, matching how numbers are read universally
The reordering is driven by the bidi control marks that Intl.NumberFormat embeds in its output. Arabic and Hebrew formats start with RLM (Right-to-Left Mark), triggering reordering. Persian formats start with LRM (Left-to-Right Mark), keeping their logical order.
For per-component control (e.g. an LTR number inside an RTL app), pass direction explicitly:
<NumberFlow value={1234} direction="rtl" />
<NumberFlow value={1234} direction="ltr" />The textAlign style also supports "start" and "end" which resolve based on direction:
// "start" = left in LTR, right in RTL
<NumberFlow value={1234} style={{ textAlign: "start" }} />Affected locales
Bidi reordering activates for locales whose Intl.NumberFormat output contains RTL directional marks. This includes all locales using Arabic or Hebrew script:
| Locale | Script | Currency position | Negative format |
|---|---|---|---|
ar-EG (Arabic, Egypt) | Arabic-Indic digits | ج.م. moves left | minus on right of digits |
ar-SA (Arabic, Saudi) | Arabic-Indic digits | ر.س. moves left | minus on right of digits |
he-IL (Hebrew, Israel) | Latin digits | ₪ moves left | minus stays with digits |
ar-MA (Arabic, Morocco) | Latin digits | varies by currency | minus on right of digits |
Some RTL-script locales use LRM marks in their format output, which prevents reordering. Their logical order already matches the visual order:
| Locale | Script | Behavior |
|---|---|---|
fa-IR (Persian, Iran) | Extended Arabic-Indic | No reorder (LRM in format) |
ur-PK (Urdu, Pakistan) | Latin digits | No reorder (LRM in format) |
The bidi reordering is a simplified implementation of the Unicode
Bidirectional Algorithm (UAX #9), scoped to the character types present in
formatted numbers. It produces the same visual order as a browser's native
text rendering for all standard Intl.NumberFormat output.