`changesSelectionAsPrimaryAction` only works for tvOS, while it is supported on all platforms

[JustJoostNL]

Description

The changesSelectionAsPrimaryAction for the new header bar buttons API has a bug in the code that only sets it for tvOS:

#if !TARGET_OS_TV || __TV_OS_VERSION_MAX_ALLOWED >= 170000
  if (@available(tvOS 17.0, *)) {
    NSNumber *changesSelectionAsPrimaryActionNum = dict[@"changesSelectionAsPrimaryAction"];
    if (changesSelectionAsPrimaryActionNum != nil) {
      self.changesSelectionAsPrimaryAction = [changesSelectionAsPrimaryActionNum boolValue];
    }
  }
#endif

It is obviously supported on all platforms though: https://developer.apple.com/documentation/UIKit/UIButton/changesSelectionAsPrimaryAction
Also in the library author guide it says iOS 15+: https://github.com/software-mansion/react-native-screens/blob/3d452928163987ed0fb9818c59f006ec38bc5276/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#the-button-with-a-menu-also-support

Steps to reproduce

Try to set changesSelectionAsPrimaryAction, observe it does not work for other platforms than tvOS.

Snack or a link to a repository

react-native-screens/ios/RNSBarButtonItem.mm

Line 78 in 3d45292

if (@available(tvOS 17.0, *)) {

Screens version

4.23.0

React Native version

0.83.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

iPhone 17

Acknowledgements

Yes

[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?

[JustJoostNL]

I also noticed that it says false by default, though it seems to be selecting some items anyway when pressing them. Obviously can't test with manually setting to false because of the bug.

[kmichalikk]

Hi @JustJoostNL
It does seem like an oversight, I'm moving it to todo.
Thanks

[JustJoostNL]

Hey @kmichalikk, I was wondering if there’s any update on this.

At the moment, all unstable_header(Left/Right)Items inside a menu (type: "menu") that use type: "action" will toggle the checkmark when pressed. This leads to some pretty odd UI behavior and overall results in a poor UX.

[sgaczol]

Hi @JustJoostNL, changesSelectionAsPrimaryAction is currently supported across all our target platforms. It is explained in https://developer.apple.com/documentation/xcode/running-code-on-a-specific-version:

// Objective-C
if (@available(iOS 15, macOS 12, *)) {
    // On iOS, this branch runs in iOS 15 or later.
    // On macOS, this branch runs in macOS 12 or later.
    // On any other OS, this branch will run in any version of that OS.
}

The prop is iOS 15+ only, but we don't support older versions so such condition makes sense.

Regarding UI behavior you described, I believe it is not associated with changesSelectionAsPrimaryAction. Also this property is generally relevant in native apps - as we don't use isSelected logic. However, we still expose this property to support a specific use case: when changesSelectionAsPrimaryAction is 'false', the button displays its default label, but when it's 'true', the text updates to show the selected option:

changesSelectionAsPrimaryAction.mov

Reproduction code:

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

const Stack = createNativeStackNavigator();

function Screen() {
  return <View style={{ flex: 1 }} />;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerTransparent:
            Platform.OS === 'ios' && parseInt(Platform.Version) >= 26,
        }}>
        <Stack.Screen
          name="ChangesSelectionDemo"
          component={Screen}
          options={{
            title: 'Title',
            unstable_headerRightItems: () => [
              {
                type: 'menu',
                label: 'Choose Option',
                changesSelectionAsPrimaryAction: true,
                menu: {
                  items: [
                    {
                      label: 'Option 1',
                      type: 'action',
                      onPress: () => {},
                    },
                    {
                      label: 'Option 2',
                      type: 'action',
                      onPress: () => {},
                    },
                  ],
                },
              },
            ],
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

[JustJoostNL]

Hi @sgaczol, thanks for your reply.

I'll send a repro to better demonstrate the issue soon-ish.