NativeBase
NativeBase copied to clipboard
Cannot override component states (`_pressed`, `_hover`, etc...) in theme for `Fab`
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
Hi @Swiftwork, Thanks for reporting the issue. We will look into it.
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.
Hi @Swiftwork, _pressed
is working and you have written _hovered
that's why hover is not working. use _hover
it will work.
@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.
Hi @Swiftwork, Thanks for that this should be happing. we will do the hotfix
.
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',
},
},
},
},
@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.