Utility prop _icon is not propagating to the child ButtonIcon as expected

[hristo87]

Description

I'm attempting to manipulate the ButtonIcon component via the utility prop _icon from within the Button component. However, the ButtonIcon component isn't receiving the passed props. Additionally, the utility prop _button doesn't appear to be functioning correctly, or perhaps I'm not using it properly. Note that in the example bellow i am using Lucide Icons, but its the same behaviour with the built-in ones. Everything with _text seems fine.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create RN project.
2. Add gluestack-ui and eject it
3. Create a button component and try to use _icon prop within Button component

gluestack-ui Version

@gluestack-ui/themed - 1.1.6; @gluestack-ui/config - 1.1.2

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

The button:

The result:

[faorte]

This is the same when trying to change style in theme in button.ts file (ejected theme). I am trying to set

_icon: { 
    ':active': {
         color: '$primary900',
     },
}

for outline button

[richardr1126]

I have the same problem. This is doing nothing for my ejected button theme.

'_icon': {
    color: '$textLight0',
    _dark: {
      color: '$textDark950',
    },
  },

[akash3gtm]

hi @hristo87 thank you for reporting, we are looking into it.

[akash3gtm]

Your first issue with the $_button prop will not work. We have made these styling in such a way that only components that are defined with such a functionality can pass these props i.e. $_button will work in ButtonGroup only and not with any other component.

I will check the issue with $_icon and report back.

[Exulenood]

I have the same problem. This is doing nothing for my ejected button theme.

'_icon': {
    color: '$textLight0',
    _dark: {
      color: '$textDark950',
    },
  },

Had the same problem with a variant - seems unlike an implementation in an action, this has to be wrapped in a props: eg:

'_icon': {
      props: { 
         color: '$textLight0',
         _dark: {
            color: '$textDark950',
      },
 },

A bit counterintuitive but it passed all props as expected to the child-ButtonIcon after this change...

Another mistake I made was using the Icon-component instead of the ButtonIcon.

[macrozone]

the error also happens when you eject the Library, the button's icon isn't styled properly

[BertvanHoekelen]

When ejecting the library the ancestorStyle is missing in the StyledIcon. If you add this yourself it works as expected.

const StyledIcon = styled(
    AsForwarder,
    {
      ....
    },
    {
+      ancestorStyle: ["_icon"],
      resolveProps: ["stroke", "fill"],
    },
    {
      propertyTokenMap: {
        stroke: "colors",
        fill: "colors",
      },
    },
);