I have created a wrapper for the AppBar component in my current project, however isLeading property is not working as expected in Appbar.Action.
The isLeading: true, the action items should be placed before the other action items of before the Appbar.Content component.
// 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"},
]}
/>
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?
Your Environment