RTL for React Native
Agent skillA Claude skill that gets right-to-left layouts right in React Native.
- Built with
- React Native, Expo, ESLint
- Price
- Free
Hebrew, Arabic, Farsi and Urdu layouts break in ways that produce no warning: the framework already mirrored the layout, the code mirrors it again, and the result looks almost correct. Reviewing a mirrored mockup makes it worse — it is easy to reimplement the mirroring that is already happening.
This skill teaches Claude what actually happens on device. Every rule in it comes from measurements on real Android and iOS hardware, not from documentation claims — several of which turned out to be wrong and are corrected here.
Measured, not assumed
Rules are backed by hardware measurements across both platforms. Widely repeated claims about RTL behaviour that do not survive testing are called out.
DirectionProvider and useDirection
Direction kept in app state rather than read from I18nManager.isRTL, which proved unreliable. Live language switching works on both platforms.
Six ESLint rules
Catch the silent failures: physical style properties instead of logical ones, isRTL reads, missing BiDi isolation around phone numbers and other sensitive strings.
Activates on its own
Claude picks it up when it sees RTL work or the symptoms of it — flipped layouts, text aligned the wrong way, an icon pointing backwards.
React Native and Expo developers shipping to Hebrew or Arabic markets, and anyone debugging a layout that mirrors twice.
Need something built on top of this?
We take on custom development and partnerships. Tell us what you have in mind.