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 LanguageApp Language LocalisationApp Display Result
LTRLTRLTR
LTRRTLRTL
LTRDeclares device localeLTR
RTLLTRLTR
RTLRTLRTL
RTLDeclares device localeRTL

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 / CellLTR display on deviceRTL display on device
Horizontal List componentScrolls from Left. Items in the feed load from the leftScrolls from Right Items in the feed load from the right
Grid componentItems in the feed load from the top left corner of a gridItems in the feed load from the top right corner of a grid
Power Cell 2 MobileText is displayed to the right of imagesText is displayed to the left of images
Headers (Group info)Positioned from the left of the screenPositioned from the right of the screen
Text in any cellDisplays LTRDisplays RTL
Top Nav BarMENU icon is on LeftMENU icon is on right
Side MenuDisplays on left Animates in from leftDisplays on right Animates in from right
Bottom Tab BarLoads from left-most tabLoads from right-most tab
Top TabsOrder of tabs depends only on feed construction by app builder RTL has no effect
Screen loading animationSlides in from right Slides out to rightSlides in from the left Slides out to left