Introduction
Through React Native, Quick Brick mobile apps will automatically support RTL orientation of apps. No user settings are necessary during app creation.
Required versions
- Platform (iOS and Android SDKs) 1.1.0 or higher
- Quick Brick SDKs 4.1.2 or higher
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.
Logic
The determining auto-logic for RTL or LTR presentation of apps on devices is the app language localisation according to the following logic.
| Device language | App language localisation | App display |
| LTR | LTR | LTR |
| RTL | RTL | |
| declares device local | LTR | |
| RTL | LTR | LTR |
| 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 |
Display 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 right |
Comments
0 comments
Please sign in to leave a comment.