@shotlingo/rtl-ui-mirror

Which App Store screenshot UI elements mirror in Arabic, Hebrew, Persian, and Urdu (RTL) layouts, and which don't — as a typed lookup table. Zero dependencies, no network calls.

Full interactive preview tool: shotlingo.com/tools/rtl-screenshot-preview

Install

npm install @shotlingo/rtl-ui-mirror

Usage

import { mirrorsInRtl, isRtlLocale, getByCategory, RTL_LOCALES } from '@shotlingo/rtl-ui-mirror';

isRtlLocale('ar');
// => true

mirrorsInRtl('forward-arrow');
// => true

mirrorsInRtl('play-button');
// => false

getByCategory('navigation').map((el) => el.label);
// => ['Forward / "next" arrow (→)', 'Back arrow (←)', 'Chevron / disclosure indicator (›)', 'Tab bar / step order']

RTL_LOCALES.map((l) => l.code);
// => ['ar', 'he', 'fa', 'ur']

API

• RTL_LOCALES: RtlLocale[] — the 4 RTL App Store Connect locales (Arabic, Hebrew, Persian, Urdu).
• UI_MIRROR_ELEMENTS: MirrorElement[] — common screenshot UI elements with a mirrorsInRtl flag and a note on why.
• isRtlLocale(code: string): boolean — case-insensitive locale check.
• getRtlLocale(code: string): RtlLocale | undefined
• getMirrorElement(id: string): MirrorElement | undefined
• mirrorsInRtl(id: string): boolean | undefined — shorthand for getMirrorElement(id)?.mirrorsInRtl.
• getByCategory(category: MirrorCategory): MirrorElement[] — 'navigation' | 'media' | 'input' | 'text' | 'brand'.

Why this exists

Localizing a screenshot for an RTL locale is not "flip the whole image." Directional elements (arrows, chevrons, progress-bar fill) mirror to match reading direction; elements with inherent orientation (play button, checkmark, embedded numerals, Latin-script logos) don't — mirroring them just makes them look wrong. This package encodes that distinction so screenshot tooling and QA checklists don't have to re-derive it per project.

License

MIT