Through React Native, Quick Brick mobile apps will automatically support RTL orientation of apps. No user settings are necessary during app creation.
- Platform (iOS and Android SDKs) 1.1.0 or higher
- Quick Brick SDKs 4.1.2 or higher
- Kurdish (Sorani)
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.
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|
|declares device local||LTR|
|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||
|Top Nav Bar||MENU icon is on Left||MENU icon is on right|
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
Please sign in to leave a comment.