isLeading property not working in AppBar component

[DeborahLearnyst]

Current behaviour

I have created a wrapper for the AppBar component in my current project, however isLeading property is not working as expected in Appbar.Action.

Expected behaviour

The isLeading: true, the action items should be placed before the other action items of before the Appbar.Content component.

How to reproduce?

// Wrapper Component: 
<Appbar.Header
      mode={mode}
      style={[
        position === 'bottom' && styles.bottom,
        {
          backgroundColor: 'blue',
        },
      ]}
      safeAreaInsets={{bottom}}
      dark={theme.dark}>
      <Appbar.BackAction onPress={() => {}} />
      <Appbar.Content title="Title" />
      {actions.map((action, index) => (
        <Appbar.Action
          key={index}
          icon={action.icon}
          onPress={action.onPress}
          color={action.color}
          rippleColor={action.rippleColor}
          size={action.size}
          disabled={action.disabled}
          isLeading={action.isLeading}
        />
      ))}
    </Appbar.Header>

// Invocation
<CustomAppBar
  mode="small"
  position="bottom"
  actions={[
          {icon: 'magnifying-glass', onPress: () => {}, accessibilityLabel: "Search"}, 
          {icon: 'dots-vertical', onPress: () => {}, accessibilityLabel: "More"},
          {icon: 'bars', onPress: () => {}, isLeading: true, accessibilityLabel: "Menu"}, 
   ]}
 />

Your Environment

software	version
react-native	0.76.6
react-native-paper	5.13.0

[kacperzolkiewski]

Hi @DeborahLearnyst,

I checked the code and noticed that when mode="small" or mode="center-aligned", the isLeading prop is not considered during rendering. However, it works when mode="medium" or mode="large".

I’m not sure if this is the intended behavior. Should isLeading be ignored for these modes, or is this something that needs fixing?

@BogiKay I'd appreciate your input on this. Thanks!

[lukewalczak]

Hey, I went through the documentation and also analyzed component's code, and I have no idea why isLeading was restricted to only medium and large modes. I'm going to unblock it.