Right to Left Support
Introduction
Through React Native, Quick Brick mobile apps will automatically support RTL orientation of apps. No user settings are necessary during app creation.
RTL languages
- Arabic
- Aramaic
- Dhivehi/Maldivian
- Hausa
- Hebrew
- Kashmiri
- Khowar
- Kurdish (Sorani)
- Pashto
- Persian/Farsi
- Urdu
- Yiddish
Designing and Building RTL Apps
Zapp Studio layouts ALWAYS reference LTR apps as regards LEFT and RIGHT (margins, gutters, spacings direction of back arrow on Nav Bar, etc.) When a RTL app is finally displayed on a device these references flip so a LEFT MARGIN in UI Builder for instance displays as a RIGHT MARGIN in the app.
| Device Language | App Language Localisation | App Display Result |
|---|---|---|
| LTR | LTR | LTR |
| LTR | RTL | RTL |
| LTR | Declares device locale | LTR |
| RTL | LTR | LTR |
| RTL | RTL | RTL |
| RTL | Declares device locale | RTL |
If your device is set to a language that isn’t set in the app, then the first declared locale of the app will be used to define the app orientation.
Component and Cell Results for RTL vs LTR
| Component / Cell | LTR display on device | RTL display on device |
|---|---|---|
| Horizontal List component | Scrolls from Left. Items in the feed load from the left | Scrolls from Right Items in the feed load from the right |
| Grid component | Items in the feed load from the top left corner of a grid | Items in the feed load from the top right corner of a grid |
| Power Cell 2 Mobile | Text is displayed to the right of images | Text is displayed to the left of images |
| Headers (Group info) | Positioned from the left of the screen | Positioned from the right of the screen |
| Text in any cell | Displays LTR | Displays RTL |
| Top Nav Bar | MENU icon is on Left | MENU icon is on right |
| Side Menu | Displays on left Animates in from left | Displays on right Animates in from right |
| Bottom Tab Bar | Loads from left-most tab | Loads from right-most tab |
| Top Tabs | Order of tabs depends only on feed construction by app builder RTL has no effect | |
| Screen loading animation | Slides in from right Slides out to right | Slides in from the left Slides out to left |