Cannot override component states (`_pressed`, `_hover`, etc...) in theme for `Fab`

[Swiftwork]

Description

The assumption is that it should be possible to override component state styles only on Fab and not for all Buttons.

CodeSandbox/Snack link

https://snack.expo.dev/@swiftwork/theme-override-issue

Steps to reproduce

No response

NativeBase Version

3.4.13

Platform

• [X] Android
• [X] CRA
• [X] Expo
• [X] iOS
• [X] Next

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hi @Swiftwork, Thanks for reporting the issue. We will look into it.

[Swiftwork]

Based on the answer from discord

Hey, There is typo in theme for Fab. Actually you need to pass FAB. You can create an issue and track there. We'll update you on the same /Ankit Tailor

Part of the issue was the usage of Fab rather than FAB for override. However, there is still the issue that states such as _hover and _pressed don't override for the Fab component. I have updated the snack to include this.

[Viraj-10]

Hi @Swiftwork, _pressed is working and you have written _hovered that's why hover is not working. use _hover it will work.

[Swiftwork]

@Viraj-10 My apologies, I corrected the _hovered -> _hover typo but I must be seeing something different than you. When hovering or pressing the FAB button in the bottom right corner it turns blue (primary) rather than the overridden pink (secondary) rules.

[Viraj-10]

Hi @Swiftwork, Thanks for that this should be happing. we will do the hotfix.

[ankit-tailor]

Hi @Swiftwork, Thanks for reporting the issue. This is an architectural problem. It needs some architectural level changes. We are working on it.

FAB uses Button internally. so if you want to add a variant for FAB you can use the below workaround for now.

Button: {
  variants: {
    solid: {
      _light: {
        _hover: {
          bg: 'amber.500',
        },
      },
    },
    fabSolid: {
      _light: {
        _hover: {
          bg: 'red.500',
        },
        bg: 'blue.400',
      },
    },
  },
},

[Swiftwork]

@ankit-tailor Thank you for looking into it. I suspected that might be the case. I am creating a custom ToggleButton component based on Button and attempting to keep it in line with how other native-base components are written so it can be themed. I looked at Fab for inspiration as I know it is a composite of Button. I suspect that it has to do with the fact that hooks such as useIsPressed(...) aren't used in the composite Fab and therefore do not "fetch" the _pressed state from the theme override.