[enhancement] Support passing of "backgroundColor" prop for Menu Icon and Action Icons
509dave16 opened this issue · 9 comments
Was hoping to to have the ability to pass a backgroundColor in order to achieve styling of floating actions that's on par with the current floating action package we are using which is react-native-action-button . I believe your package is of a higher quality and at some point we are hoping to replace react-native-action-button with react-native-floating-action-menu due to that fact. And also because the other package has not been maintained in over 2 years, which could pose problems with future React Native version updates.
Hey, cool! Glad you think so.
Can you give an example of what you mean by "ability to pass backgroundColor"? I'm not sure I understand
@nicotroia Sure. No problem. Probably should have provided this in the first place
In the above screenshot there's the icon color(i.e. white). But then there's also the backgroundColor(i.e. blue) of the action.
However even if we could specify a backgroundColor the primaryColor could still affect the borderColor of the action. For the sake of being declarative, there could be iconColor, backgroundColor, and borderColor for the actions These colors could also apply to the menu trigger action or it could have it's own colors that are specified.
For backwards compatibility you could still accept primaryColor and it would be used as the iconColor and borderColor. The three separate colors would always override whatever primaryColor would be used for. So if you specified a borderColor and primaryColor. The icon would be the primaryColor. But the border would not be cause the borderColor overrides the primaryColor for the border.
@509dave16 I've pushed an update to the branch. Version 1.1.10
It adds backgroundColor, borderColor and iconColor overrides to the FloatingMenu props. The 3 values otherwise default to primaryColor. Let me know if it's working as you had in mind.
@nicotroia I will check this out and let you know. This is great news that you added those props!
@nicotroia I just got around to trying those color props out. It looks like the backgroundColor prop has no affect on the MenuIcon or ItemIcon when applied to the FloatingMenu.
react-navigation's default theme primaryColor is blue. But as you can see it only worked when provided to the borderColor prop.
@509dave16 Oh that makes sense. The Background color is currently only used for the "down" state of the button, when you are pressing it.
Maybe I should split them out into 2 backgroundUp and backgroundDown props?
@nicotroia I think that would be good. Looking at TouchableHighlight it looks like it uses two layered backgrounds. Where on press changes the opacity of the top layer to 0 which causes the underlayColor prop to show through.
If you aren't employing a similar system or prefer to have more user friendly background prop names, I think backgroundUp and backgroundDown would be fine!
Hey, I finally got around to adding this change
FloatingMenu now takes backgroundUpColor and backgroundDownColor values
You can see green backgroundDownColor in action here:
This change is available in version ~1.1.12
@nicotroia No worries! We all get busy!! Thank you for doing this!!! I will have to give it a shot again ;) .