React-native-paper: how to custom style in `FAB.Group`

[geminiyellow]

Current behaviour

from L301-L313 we can see there is no prop set the root FAB's style

https://github.com/callstack/react-native-paper/blob/3bcda083ba75673a9dd85bff6494f7aeb142152d/src/components/FAB/FABGroup.js#L301-L313

but in here

https://github.com/callstack/react-native-paper/blob/3bcda083ba75673a9dd85bff6494f7aeb142152d/src/components/FAB/FABGroup.js#L282

we can change the sub fab use style

Expected behaviour

let me change the root fab's background color not use the theme provider

PS:

sorry, use theme also cannot change the backgroundColor, because there is no theme prop in parent FAB.Group, the FAB cannot get the theme.colors. accent.

https://github.com/callstack/react-native-paper/blob/3bcda083ba75673a9dd85bff6494f7aeb142152d/src/components/FAB/FAB.js#L111

Code sample

just copy from here: https://callstack.github.io/react-native-paper/fab-group.html

Your Environment

| software | version
| --------------------- | -------
| react-native-paper | 2.2.6

[satya164]

Have you tried the color prop? https://callstack.github.io/react-native-paper/fab-group.html#color

[geminiyellow]

@satya164 hi,

color prop is for Custom color for the FAB.
not Custom background color for the FAB.

it change the icon's color, not the button's color.

[satya164]

To change the background color of the FAB you can pass the accent color in theme:

theme={{ colors: { accent: 'blue' } }}

Though it'll be useful to add a fabStyle prop which passes the styles to the underlying fab.

[geminiyellow]

hmm... ok, can change it now. but i definite want a fabStyle or something like style={{ fab: {} }}.
or , doc it in https://callstack.github.io/react-native-paper/fab.html#style

Close: #677

[lutakyn]

Your documentation is very minimal,even changing a FAB color is a problem. You can't change the size of the icon too

[gawrysiak]

@lutakyn with a recent change for FAB.Group, styling it got much easier. See:
https://github.com/callstack/react-native-paper/pull/758/files
There's now a fabStyle prop added

[satya164]

@lutakyn it's an open source project. pull requests to documentation are welcome.

[nihp]

Any option to style the actions as below attached image.

Here I need to show the label below the icon.

[hackrx]

Hii, is there any way to show this vertical FAB to horizontally?