iOS: headerLargeTitle mirrors RTL (Arabic/Hebrew) title glyphs when direction is forced RTL

Open
#4,280 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
56/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
ios, objective-c, react-native
Domain
internationalization, mobile

Research direction

Start in RNSScreenStackHeaderConfig.mm at applySemanticContentAttributeIfNeededToNavCtrl:, focusing on the forced RTL semantic-content handling and the large-title container. Reproduce with an Arabic-language simulator using a native-stack screen with headerLargeTitle enabled, then verify that RTL bar buttons still lay out correctly while the large-title glyphs are no longer mirrored.

Written by the indexing model from the issue text.

Description

platform:ios type:bug
Description

On iOS, a native-stack screen with headerLargeTitle: true renders the large-title text horizontally mirrored (glyphs flipped) when the layout direction is RTL (I18nManager.isRTL === true). The regular (non-large) title in the same bar renders correctly, as do the bar buttons — only the large title is mirrored.

Root cause (traced)

RNSScreenStackHeaderConfig.mm → applySemanticContentAttributeIfNeededToNavCtrl: sets:

navCtrl.navigationBar.semanticContentAttribute = self.direction; // forceRightToLeft
[[UIView appearanceWhenContainedInInstancesOfClasses:@[navCtrl.navigationBar.class]]
    setSemanticContentAttribute:self.direction];

Forcing forceRightToLeft on the navigation bar makes UIKit apply a horizontal-flip transform to the large-title container, mirroring the title glyphs. The regular title is centered/handled differently and is unaffected. The block only runs when direction is explicitly forced (navCtrl.view.semanticContentAttribute != self.direction).

Reproduction
  1. I18nManager.forceRTL(true) (or run on an Arabic/Hebrew device).
  2. A native-stack screen with headerLargeTitle: true and an RTL-script title (e.g. Arabic «الإشعارات»).
  3. The large title renders mirrored. headerLargeTitle: false renders it correctly.

Confirmed on an Arabic-language simulator (not just forced-RTL-on-LTR), so it affects real RTL-locale devices.

Environment

react-native-screens 4.25.2, RN 0.85, iOS, New Architecture, expo-router 56.

Workaround

Use standard (non-large) titles under RTL. Filing so large titles can be re-enabled once the large-title container's mirror is corrected (e.g. resetting the large-title label's semanticContentAttribute while keeping the bar buttons' RTL layout).

Dominant language
TypeScript
Stars
3.7k
Forks
714
Avg merge
2d 23h
Merged PRs (30d)
71

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from software-mansion/react-native-screens

All issues in software-mansion/react-native-screens

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.