skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-rtl

Implements and reviews right-to-left layout support in React Native and Expo apps.

Updated Sep 6, 2026
Search Tags:#localization#react native#expo#rtl#arabic#right-to-left#i18nmanager
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill react-native-rtl-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-rtl
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/react-native-rtl
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill react-native-rtl-sombek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React Native's Yoga layout engine flips flexbox automatically in RTL, but physical style properties, text alignment defaults, directional icons, and gesture math do not — producing broken layouts for Arabic and Hebrew users that are hard to diagnose. ## Core Features & Use Cases - Logical Style Properties: Replace physical properties like marginLeft and paddingRight with start/end logical equivalents, including NativeWind class mappings. - RTL Enablement & Runtime Switching: Configure expo-localization, I18nManager.allowRTL/forceRTL, and mandatory app reloads for in-app language pickers. - Text, Icons, and Gestures: Fix the unset textAlign trap with a shared Text component, mirror directional icons via scaleX, and negate drag deltas for RTL. - Use Case: You are adding Arabic support to an Expo app and layouts break — use this Skill to audit physical properties, set up the localization config plugin, and verify both directions with screenshots. ## Quick Start Review my React Native screens for RTL layout issues and fix any physical style properties, text alignment, and directional icons for Arabic support.

Frequently Asked Questions about react-native-rtl

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add RTL support to a React Native app?▼

Enable RTL by setting android:supportsRtl="true" on Android and adding the RTL language to iOS localizations, or use the expo-localization config plugin with supportedLocales in Expo. Then replace physical style properties with logical start/end equivalents and set textAlign explicitly.

How to change layout direction at runtime in React Native?▼

Call I18nManager.allowRTL and I18nManager.forceRTL with the desired direction, then reload the app with Updates.reloadAsync since direction is fixed at native startup. These settings persist across restarts, and dynamic overrides do not work in Expo Go.

Why does textAlign not flip automatically in RTL React Native?▼

React Native's textAlign has no start/end values, and the unset default is physical left in both directions. Setting textAlign to 'left' makes it act as start and flip in RTL, so centralize it in a shared Text component.

Does RTL work in Expo Go?▼

Dynamic RTL overrides do not work in Expo Go because it resets RTL preferences, and pre-SDK 58 versions disabled RTL entirely. Use a development build created with expo prebuild or EAS for RTL testing.

Which icons should be mirrored for RTL layouts?▼

Mirror directional icons like back/forward arrows, chevrons, and send/reply icons using transform scaleX: -1 when I18nManager.isRTL is true. Do not mirror media playback controls, clocks, checkmarks, logos, or icons containing text.

Related Skills

Explore More Software Engineering Skills→
JenilRevaliyaJenilRevaliya

i18n-localization

Implements internationalization with translation dictionaries, RTL support, and locale-aware formatting in React and Next.js.

Community
Intermediate
moasqmoasq
32

asc-shots-pipeline

Orchestrate iOS screenshot capture, framing, and uploads via Xcode CLI tools.

Community
Advanced
Sir-chawakornSir-chawakorn
33

internationalization

Implement internationalization and localization for multi-language applications.

Community
Intermediate
tassiovaletassiovale
13

expo-tailwind-setup

Integrate Tailwind CSS v4 into Expo apps using react-native-css and NativeWind v5.

Community
Basic