[iOS 26+] headerTitle custom component renders blank

[dsanmart]

Current behavior

Providing a custom component to options.headerTitle results in a blank space on iOS 26+. The same code renders correctly on Android.

The custom component, even if it is a simple View with background Color. On iOS, the headerLeft and headerRight elements render correctly, but the headerTitle area is empty.

Current Behavior:

Android: The custom component passed to headerTitle renders as expected.

iOS: The headerTitle area is blank/invisible.

Expected behavior

The custom component should render in the header center (or aligned left depending on config) on iOS, identical to Android.
Expected behaviour is what is seen on Android (right device of the picture below).

Reproduction

import React from 'react';
import { View, Text, Image } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function CustomHeaderTitle() {
  // Simple component with explicit dimensions for testing
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <View style={{ width: 40, height: 40, backgroundColor: 'yellow', borderRadius: 20 }} />
      <View style={{ marginLeft: 10 }}>
        <Text style={{ fontWeight: 'bold' }}>Host Name</Text>
        <Text>Subtitle info</Text>
      </View>
    </View>
  );
}

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          // Works on Android, Blank on iOS
          headerTitle: (props) => <CustomHeaderTitle {...props} />, 
        }}
      />
    </Stack.Navigator>
  );
}

Tried to make a Snack but it is giving non-sense errors with dependencies etc: https://snack.expo.dev/@vtwoptwo/broken-headertitle-component?platform=ios

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

@react-navigation/bottom-tabs": "^7.9.0",
@react-navigation/native": "^7.1.26",
@react-navigation/native-stack": "^7.9.0"

React Native version: 0.81.5
Expo version: 54

Platform: iOS

Architecture: Fabric (New Architecture) Enabled

[github-actions]

Hey @dsanmart! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.

[satya164]

It should be fixed in software-mansion/react-native-screens#3489

[phazei]

I noticed this as well after we upgraded from Expo 53 to Expo 54. NO new arch. I disabled Glass by adding UIDesignRequiresCompatibility to the plist. That's when we noticed without glass, it's way off center, on iOS18 and iOS26. On Android it displays perfectly. I'm on the latest releases of all the react-navigation stacks we use.

Edit: Updated react-native-screens from 4.19 => 4.24, works perfectly