Feature Request: Animate header bar button items transitions (setRightBarButtonItems:animated:)

[aledebla03]

Summary

When dynamically showing/hiding header bar button items (e.g. via the hidden prop from expo-router's Stack.Toolbar.Button), the transition is instant with no animation. This is because RNSScreenStackHeaderConfig assigns navitem.rightBarButtonItems and navitem.leftBarButtonItems directly, rather than using UIKit's animated setter.

Current behavior

In RNSScreenStackHeaderConfig.mm (lines 809–812):

navitem.leftBarButtonItems = [config barButtonItemsFromConfigs:config.headerLeftBarButtonItems
                                            withCurrentItems:navitem.leftBarButtonItems];
navitem.rightBarButtonItems = [config barButtonItemsFromConfigs:config.headerRightBarButtonItems
                                             withCurrentItems:navitem.rightBarButtonItems];

Direct property assignment does not trigger any UIKit animation when items are added or removed.

Expected behavior

Use UIKit's animated setter, which is already available:

[navitem setLeftBarButtonItems:[config barButtonItemsFromConfigs:config.headerLeftBarButtonItems
                                            withCurrentItems:navitem.leftBarButtonItems]
                      animated:animated];
[navitem setRightBarButtonItems:[config barButtonItemsFromConfigs:config.headerRightBarButtonItems
                                             withCurrentItems:navitem.rightBarButtonItems]
                       animated:animated];

The animated parameter is already available in the method signature of updateViewController:withConfig:animated: — it just needs to be forwarded.

This would make bar button items fade in/out smoothly when dynamically shown or hidden, consistent with native UIKit behavior.

Precedent in the codebase

Interestingly, expo-router already does this correctly for bottom toolbar items in RouterToolbarHostView.swift:

controller.setToolbarItems(items, animated: true)

The bottom toolbar animates item changes, but the header toolbar does not — this inconsistency suggests it was an oversight rather than a deliberate choice.

Use case

Common pattern: a header button that appears/disappears based on state (e.g. a "Today" button that hides when the current week is selected). With expo-router's Stack.Toolbar.Button hidden={condition}, the item pops in/out instantly instead of fading smoothly.

This is especially noticeable with iOS 26 Liquid Glass headers where native animations are expected.

Environment

• react-native-screens: 4.24.0
• expo-router: ~55.0.8 (SDK 55)
• React Native: 0.83.4
• iOS 26