initial FloatingActionButton

lib/Button.js

@@ -12,7 +12,8 @@ export default class Button extends Component {
         overrides: PropTypes.shape({
             textColor: PropTypes.string,
             backgroundColor: PropTypes.string,
-            rippleColor: PropTypes.string
+            rippleColor: PropTypes.string,
+            height: PropTypes.number,
         }),
         disabled: PropTypes.bool,
         raised: PropTypes.bool,
@@ -24,7 +25,7 @@ export default class Button extends Component {
         theme: 'light',
         primary: PRIMARY,
         disabled: false,
-        raised: false
+        raised: false,
     };
 
     constructor(props) {
@@ -152,15 +153,19 @@ export default class Button extends Component {
         })();
 
         const buttonStyle = (() => {
+            const heightStyle = (overrides && overrides.height) ? { height: overrides.height } : null;
+
             if (raised) {
+                buttonStyleMap[shape][theme][type] = Object.assign(buttonStyleMap[shape][theme][type], heightStyle);
+
                 if (disabled || !(overrides && overrides.backgroundColor)) {
                     return buttonStyleMap[shape][theme][type];
                 }
 
-                return Object.assign(buttonStyleMap[shape][theme][type], { backgroundColor: getColor(overrides.backgroundColor) });
+                return Object.assign(buttonStyleMap[shape][theme][type], { backgroundColor: getColor(overrides.backgroundColor), height: overrides.height });
             }
 
-            return null;
+            return heightStyle;
         })();
 
         const rippleColor = (() => {
@@ -177,7 +182,8 @@ export default class Button extends Component {
                     style={[
                         styles.button,
                         buttonStyle, {
-                            backgroundColor: buttonStyle && buttonStyle.backgroundColor
+                            backgroundColor: buttonStyle && buttonStyle.backgroundColor,
+                            height: buttonStyle && buttonStyle.height,
                         }
                     ]}
                 >
@@ -199,6 +205,7 @@ export default class Button extends Component {
                         styles.button,
                         buttonStyle, {
                             backgroundColor: buttonStyle && buttonStyle.backgroundColor,
+                            height: buttonStyle && buttonStyle.height,
                         }, raised && !isCompatible('elevation') && {
                             borderWidth: 1,
                             borderColor: 'rgba(0,0,0,.12)'
@@ -224,6 +231,7 @@ export default class Button extends Component {
                     styles.button,
                     buttonStyle, {
                         backgroundColor: buttonStyle && buttonStyle.backgroundColor,
+                        height: buttonStyle && buttonStyle.height,
                         elevation: raised ? elevation : 0
                     }]}
                 >
@@ -250,4 +258,4 @@ const styles = {
         position: 'relative',
         top: 2
     }
-};
+};

lib/FloatingActionButton.js

@@ -0,0 +1,67 @@
+import React, { Component, PropTypes, View, TouchableNativeFeedback } from 'react-native';
+import { PRIMARY, PRIMARY_COLORS } from './config';
+import Icon from './Icon';
+import { getColor } from './helpers';
+
+export default class FloatingActionButton extends Component {
+
+    static propTypes = {
+        primary: PropTypes.oneOf(PRIMARY_COLORS),
+        onPress: PropTypes.func,
+        onLongPress: PropTypes.func,
+        mini: PropTypes.bool,
+        iconName: PropTypes.string,
+        iconColor: PropTypes.oneOf(PRIMARY_COLORS),
+        iconStyles: PropTypes.object,
+    };
+
+    static defaultProps = {
+        primary: PRIMARY,
+        mini: false,
+        iconStyles: {},
+    };
+
+    render() {
+        const { primary, onPress, onLongPress, mini, iconName, iconColor, iconStyles } = this.props;
+
+        const buttonBackground = { backgroundColor: getColor(primary) };
+        const outerStyles = mini ? { borderRadius: 20, width: 40, height: 40 } : { borderRadius: 28, width: 56, height: 56 };
+
+        return (
+            <View style={styles.wrapper}>
+                <TouchableNativeFeedback
+                    background={TouchableNativeFeedback.Ripple()}
+                    onPress={onPress}
+                    onLongPress={onLongPress}
+                >
+                    <View style={[
+                        styles.initialStyles,
+                        outerStyles,
+                        buttonBackground,
+                    ]}
+                      elevation={5} >
+                        <Icon
+                          name={iconName}
+                          color={iconColor}
+                          style={iconStyles}
+                        />
+                    </View>
+                </TouchableNativeFeedback>
+            </View>
+        );
+    };
+}
+
+const styles = {
+    wrapper: {
+        position: 'absolute',
+        bottom: 16,
+        right: 16,
+    },
+    initialStyles: {
+        flex:1,
+        flexDirection:'row',
+        alignItems:'center',
+        justifyContent:'center'
+    }
+};

lib/index.js

@@ -13,4 +13,5 @@ export { default as RadioButton } from './RadioButton';
 export { default as Ripple } from './Ripple';
 export { default as RadioButtonGroup } from './RadioButtonGroup';
 export { default as Subheader } from './Subheader';
-export { default as Toolbar } from './Toolbar';
+export { default as Toolbar } from './Toolbar';
+export { default as FloatingActionButton } from './FloatingActionButton';