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

[alphanamko]

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).

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce, Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[kligarski]

Hi, @alphanamko. Thank you for reporting the issue. I confirm that it is reproducible.

Reproduction example

import React, { useLayoutEffect } from 'react';
import { NavigationContainer, ParamListBase } from '@react-navigation/native';
import {
  NativeStackNavigationProp,
  createNativeStackNavigator,
} from '@react-navigation/native-stack';
import { Button, I18nManager, ScrollView, Text } from 'react-native';
import LongText from '@apps/shared/LongText';

type RouteParamList = {
  Screen1: undefined;
  Screen2: undefined;
};

type NavigationProp<ParamList extends ParamListBase> = {
  navigation: NativeStackNavigationProp<ParamList>;
};

type StackNavigationProp = NavigationProp<RouteParamList>;

const Stack = createNativeStackNavigator<RouteParamList>();

function Screen1({ navigation }: StackNavigationProp) {
  return (
    <ScrollView>
      <Text style={{ textAlign: 'center' }}>
        If not in RTL, click button below and refresh the app.
      </Text>
      <Button title="Force RTL" onPress={() => I18nManager.forceRTL(true)} />
      <Button
        title="Go to screen 2"
        onPress={() => navigation.push('Screen2')}
      />
      <LongText />
    </ScrollView>
  );
}

function Screen2({ navigation }: StackNavigationProp) {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <Button title="Go back" onPress={() => navigation.pop()} />
      <LongText />
    </ScrollView>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen
          name="Screen2"
          component={Screen2}
          options={{ headerLargeTitle: true }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

We'll add this to our backlog.