Skip to content

Commit

Permalink
feat: allow to change background for FAB Group (#758)
Browse files Browse the repository at this point in the history
### 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
  • Loading branch information
gawrysiak authored and satya164 committed Jan 28, 2019
1 parent e08eb2b commit b799a1e
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/components/FAB/FABGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ type Props = {|
* For example, you can set an additional margin if you have a tab bar at the bottom.
*/
style?: any,
/**
* Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor.
*/
fabStyle?: any,
/**
* @optional
*/
Expand Down Expand Up @@ -198,6 +202,7 @@ class FABGroup extends React.Component<Props, State> {
accessibilityLabel,
theme,
style,
fabStyle,
visible,
} = this.props;
const { colors } = theme;
Expand Down Expand Up @@ -312,7 +317,7 @@ class FABGroup extends React.Component<Props, State> {
accessibilityTraits="button"
accessibilityComponentType="button"
accessibilityRole="button"
style={styles.fab}
style={[styles.fab, fabStyle]}
visible={visible}
/>
</View>
Expand Down
1 change: 1 addition & 0 deletions typings/components/FAB.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface FABGroupProps {
onStateChange: (state: { open: boolean }) => any;
visible?: boolean;
style?: any;
fabStyle?: any;
theme?: ThemeShape;
}

Expand Down

0 comments on commit b799a1e

Please sign in to comment.