Diagnosing an iOS-Only Arabic Text Rendering Bug

Kafoo's UI is bilingual — Arabic and English — which means every screen has to handle right-to-left text, font rendering, and layout mirroring correctly on both iOS and Android. A rendering bug showed up where Arabic text in parts of the bilingual UI didn't display correctly on iOS specifically, while the same screens rendered fine on Android. That split is usually the first clue that the bug isn't in the app's own logic — it's in how each platform's native text renderer handles the same input.

iOS renders text through CoreText, which selects a fallback font when the primary font doesn't cover a given character range — including Arabic script. When the fallback font CoreText chose for the Arabic characters didn't match the font metrics or shaping behavior the UI expected, the result was Arabic text rendering incorrectly, even though the exact same React Native component and font configuration worked as intended on Android's text rendering stack.

This is a category of bug that's easy to misdiagnose as an app-level font-loading issue, because the symptom (wrong-looking text) looks the same as a missing font file. The actual cause was platform-level font fallback behavior that only manifests for certain script ranges — which is why it required a platform-specific fix rather than a change to the shared React Native code.

Any product shipping Arabic/English bilingual UI on React Native needs to test Arabic rendering on both platforms independently, not assume that a fix or a working configuration on one platform carries over to the other. Font handling for non-Latin scripts is one of the places where 'write once, run everywhere' breaks down, and it's worth budgeting explicit testing time for it rather than discovering it in production.