Conversation
How to enable RTL support
'rtl_support' => true,
2. Add your supported languages to localizations (required for iOS to recognize the device language):
'localizations' => ['en', 'ar'],
3. Use @nativeHead on your <html> tag to output lang and dir attributes:
<html @nativeHead>
4. Optionally, use the @rtl Blade directive for conditional RTL-specific content:
@rtl
{{-- RTL-specific markup --}}
@else
{{-- LTR-specific markup --}}
@endrtl
When enabled, the app detects the device locale at runtime. If the device language is an RTL language (Arabic, Hebrew, Farsi, Urdu, etc.), all native UI components and the
WebView automatically mirror to RTL. If the device language is LTR (e.g. English), everything stays LTR — even with rtl_support: true. |
|
This update looks solid. I appreciate the attention to detail—especially the mirrored navigation behaviors, semanticContentAttribute handling, and the WebView dir injection to ensure consistency regardless of server locale. The test plan is comprehensive and covers all critical scenarios, including fallback behavior when rtl_support is disabled. |
|
I am lookin
Thanks a lot 🙏 Really appreciate your feedback! Hopefully we can get a couple more reviews soon — and if everything looks good from your side, an approval would really help move it forward. |
3 participants
Summary
Add opt-in RTL (Right-to-Left) layout support for NativePHP Mobile apps, enabling proper layout mirroring for Arabic, Hebrew, and other RTL languages on both iOS and Android.
What's included
Configuration
rtl_supportconfig option (defaultfalse) — when enabled, the app detects RTL languages from the device locale and mirrors the layout automaticallylocalizationsconfig option to populateCFBundleLocalizationsin Info.plist, telling iOS which languages the app supportsPHP (Laravel)
@nativeHeadBlade directive that outputslang="..." dir="..."on the<html>tag based onapp()->getLocale()and the RTL languagelist. Also registers
@rtlBlade directive for conditional RTL content in views_meta.rtl_supportflag to everyEdge.Setbridge call so the native side knows the config valueiOS
rtlSupportandisRTLcomputed property that checks device locale against RTL language codes (ar, he, fa, ur, etc.)semanticContentAttributeupdated reactively inupdateUIViewso hamburger and action buttons flip correctly; title/subtitle use explicit RTL-aware textalignment
semanticContentAttributeupdated reactively inupdateUIViewso tab items reorder for RTLdir="rtl"on<html>duringdidCommitanddidFinish— this overrides@nativeHead's server-sidedirvalue, sinceapp()->getLocale()returnsenand doesn't know the device language_meta.rtl_supportfromEdge.Setbridge payload and updatesNativeUIStatertl_supportfrom config at app startuplocalizationsconfig into Info.plist during iOS buildAndroid
rtlSupportand layout direction state_meta.rtl_supportand appliesLocalLayoutDirectionviaCompositionLocalProviderdirattribute on the HTML elementTest plan
rtl_support: true→ TopBar hamburger on right, title right-aligned, side nav from right, bottom nav RTL-ordered, WebViewdir="rtl"rtl_support: true→ Everything LTR (English is not an RTL language)rtl_support: false(default) → Everything LTR regardless of device languagertl_support