Skip to content

Conversation

fbeccaceci
Copy link

Description

This PR adds support for new properties introduced in iOS 26 as subtitle and largeSubtitle

Changes

  • Update RNSScreenStackHeaderConfig.h and RNSScreenStackHeaderConfig.mm to support new iOS 26 subtitle

Screenshots / GIFs

Screenshot 2025-09-05 alle 16 20 16 Screenshot 2025-09-05 alle 16 20 07

Test code and steps to reproduce

<Stack.Screen
      name="root"
      component={MainScreen}
      options={{
        headerLargeTitle: true,
        headerTransparent: true,
        title: 'Future of Mobile Dev',
        // @ts-expect-error
        subtitle: '09/05/2025 • 5 min read',
      }}
    />

Inside of TestSubtitle.tsx you can pass to the screen option these new options:

 subtitle?: string;
  /**
   * Allows for setting text color of the subtitle.
   */
  subtitleColor?: ColorValue;
  /**
   * Customize font family to be used for the subtitle.
   */
  subtitleFontFamily?: string;
  /**
   * Customize the size of the font to be used for the subtitle.
   */
  subtitleFontSize?: number;
  /**
   * Customize the weight of the font to be used for the subtitle.
   */
  subtitleFontWeight?: string;
  /**
   * String that can be displayed in the header below title.
   */
  largeSubtitle?: string;
  /**
   * Allows for setting text color of the subtitle.
   */
  largeSubtitleColor?: ColorValue;
  /**
   * Customize font family to be used for the subtitle.
   */
  largeSubtitleFontFamily?: string;
  /**
   * Customize the size of the font to be used for the subtitle.
   */
  largeSubtitleFontSize?: number;
  /**
   * Customize the weight of the font to be used for the subtitle.
   */
  largeSubtitleFontWeight?: string;

Keep in mind that TypeScript will throw an error since the scope of this PR is just react-native-screens not react-navigation and the modification in the react-navigation submodule just aim to pass through the new props.

Checklist

Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks very promising. I'll review #2987 first & jump into this one. I think we'll land it.

@johankasperi
Copy link

johankasperi commented Sep 8, 2025

Nice work! After this is landed I think next step should be to add support for subtitleView: ReactElement and largeSubtitleView: ReactElement.

More info:
https://developer.apple.com/documentation/uikit/uinavigationitem/subtitleview?changes=_7&language=objc
https://developer.apple.com/documentation/uikit/uinavigationitem/largesubtitleview?changes=_7&language=objc

@kligarski
Copy link
Contributor

You can also modify largeTitle independently from title, similar to how largeSubtitle overrides subtitle (docs). If we want to also add support for largeTitle, I'm thinking how are we going to name this property because currently largeTitle/headerLargeTitle is a boolean property. We can add some kind of suffix like headerLargeTitleText but if all other props would be just largeSubtitle, subtitle, title without the suffix, this would be a little bit inconsistent.

@fbeccaceci
Copy link
Author

I reasoned on this as well while working on this PR. My personal opinion is that the most correct solution would be to turn largeTitle to string and make it work as it is supposed to, but this would break compatibility with older versions.

A solution to don't break the api could be to make largeTitle boolean | string and when true is passed as value just set it to the same value of title, allowing for a string to be passed if the user want's to have another value

@aledebla03
Copy link

Do you have any update on the expected arrival time?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants