Skip to content

Commit b799a1e

Browse files
gawrysiaksatya164
authored andcommitted
feat: allow to change background for FAB Group (#758)
### Motivation It's currently possible to change the background color for FAB and also items within FAB.Group components. Changing the background color in FAB Group causes the overlay background to change. This PR makes it possible to change the background for the FAB Group main button. Current behavior: <img width="377" alt="screen shot 2019-01-25 at 17 41 56" src="https://user-images.githubusercontent.com/7827311/51761486-797b0280-20cd-11e9-93de-1eaf1ba64ff8.png"> ### Test plan https://snack.expo.io/ryjNEaO7E
1 parent e08eb2b commit b799a1e

File tree

2 files changed

+7
-1
lines changed

2 files changed

+7
-1
lines changed

src/components/FAB/FABGroup.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ type Props = {|
7171
* For example, you can set an additional margin if you have a tab bar at the bottom.
7272
*/
7373
style?: any,
74+
/**
75+
* Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
76+
*/
77+
fabStyle?: any,
7478
/**
7579
* @optional
7680
*/
@@ -198,6 +202,7 @@ class FABGroup extends React.Component<Props, State> {
198202
accessibilityLabel,
199203
theme,
200204
style,
205+
fabStyle,
201206
visible,
202207
} = this.props;
203208
const { colors } = theme;
@@ -312,7 +317,7 @@ class FABGroup extends React.Component<Props, State> {
312317
accessibilityTraits="button"
313318
accessibilityComponentType="button"
314319
accessibilityRole="button"
315-
style={styles.fab}
320+
style={[styles.fab, fabStyle]}
316321
visible={visible}
317322
/>
318323
</View>

typings/components/FAB.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface FABGroupProps {
2121
onStateChange: (state: { open: boolean }) => any;
2222
visible?: boolean;
2323
style?: any;
24+
fabStyle?: any;
2425
theme?: ThemeShape;
2526
}
2627

0 commit comments

Comments
 (0)