Merge pull request #1 from fwaadahmad1/fahmad/master

Added support for passing style props

Author: fwaadahmad1

index.d.ts

@@ -1,5 +1,7 @@
 // Type definitions for react-native-floating-action
 
+import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
 declare module "react-native-floating-action" {
   import { Component } from "react";
 
@@ -22,6 +24,11 @@ declare module "react-native-floating-action" {
     icon?: JSX.Element;
     name: string;
     text?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    textContainerStyle?: ViewStyle;
+    imageStyle?: ImageStyle;
+    imageContainerStyle?: ViewStyle;
     textBackground?: string;
     textColor?: string;
     textElevation?: number;
@@ -34,6 +41,9 @@ declare module "react-native-floating-action" {
   }
 
   export interface IFloatingActionProps {
+    style?: ViewStyle;
+    iconStyle?: ViewStyle;
+    itemStyle?: itemStyle;
     tintColor?: string;
     actions?: IActionProps[];
     color?: string;

src/FloatingAction.js

@@ -182,6 +182,7 @@ class FloatingAction extends Component {
       iconWidth,
       iconHeight,
       iconColor,
+      iconStyle
     } = this.props;
 
     if (overrideWithAction) {
@@ -191,7 +192,7 @@ class FloatingAction extends Component {
         return icon;
       }
       return (
-        <Image style={{ width: iconWidth, height: iconHeight }} source={icon} />
+        <Image style={[{ width: iconWidth, height: iconHeight }, iconStyle]} source={icon} />
       );
     }
 
@@ -202,13 +203,13 @@ class FloatingAction extends Component {
 
       return (
         <Image
-          style={{ width: iconWidth, height: iconHeight }}
+          style={[{ width: iconWidth, height: iconHeight }, iconStyle]}
           source={floatingIcon}
         />
       );
     }
 
-    return <AddIcon width={iconWidth} height={iconHeight} backgroundColor={iconColor} />;
+    return <AddIcon width={iconStyle?.width || iconWidth} height={iconStyle?.height || iconHeight} backgroundColor={iconStyle?.backgroundColor || iconColor} />;
   };
 
   reset = () => {
@@ -333,7 +334,8 @@ class FloatingAction extends Component {
       color,
       position,
       overrideWithAction,
-      animated
+      animated,
+      style,
     } = this.props;
     const { active } = this.state;
 
@@ -414,9 +416,9 @@ class FloatingAction extends Component {
     }
 
     const sizeStyle = {
-      width: buttonSize,
-      height: buttonSize,
-      borderRadius: buttonSize / 2
+      width: style?.width || buttonSize,
+      height: style?.height || buttonSize,
+      borderRadius: (style?.width || buttonSize) / 2
     };
 
     return (
@@ -427,7 +429,8 @@ class FloatingAction extends Component {
           styles[`${position}Button`],
           propStyles,
           animatedVisibleView,
-          this.getShadow()
+          this.getShadow(),
+          style
         ]}
         accessible={false}
       >
@@ -459,6 +462,7 @@ class FloatingAction extends Component {
       actionsPaddingTopBottom,
       animated,
       tintColor,
+      itemStyle
     } = this.props;
     const { active } = this.state;
 
@@ -520,6 +524,11 @@ class FloatingAction extends Component {
               active={active}
               onPress={this.handlePressItem}
               animated={animated}
+              style={{...itemStyle, ...action?.style}}
+              imageStyle={action?.imageStyle}
+              imageContainerStyle={action?.imageContainerStyle}
+              textStyle={action?.textStyle}
+              textContainerStyle={action.textContainerStyle}
             />
           );
         })}
@@ -528,13 +537,13 @@ class FloatingAction extends Component {
   }
 
   renderTappableBackground() {
-    const { overlayColor } = this.props;
+    const { overlayColor, backdropStyle } = this.props;
 
     // TouchableOpacity don't require a child
     return (
       <TouchableOpacity
         activeOpacity={1}
-        style={[styles.overlay, { backgroundColor: overlayColor }]}
+        style={[styles.overlay, { backgroundColor: overlayColor }, backdropStyle]}
         onPress={this.handlePressBackdrop}
       />
     );
@@ -558,7 +567,10 @@ class FloatingAction extends Component {
 }
 
 FloatingAction.propTypes = {
+  style: PropTypes.object,
   tintColor: PropTypes.string,
+  iconStyle: PropTypes.object,
+  itemStyle: PropTypes.object,
   actions: PropTypes.arrayOf(
     PropTypes.shape({
       color: PropTypes.string,

src/FloatingActionItem.js

@@ -100,7 +100,7 @@ class FloatingActionItem extends Component {
   }
 
   renderButton() {
-    const { buttonSize, icon, color, shadow, tintColor } = this.props;
+    const { buttonSize, icon, color, shadow, tintColor, imageContainerStyle, imageStyle } = this.props;
 
     let iconStyle;
 
@@ -121,12 +121,12 @@ class FloatingActionItem extends Component {
     return (
       <View
         key="button"
-        style={[styles.button, propStyles, shadow]}
+        style={[styles.button, propStyles, shadow, imageContainerStyle]}
       >
         {React.isValidElement(icon) ? (
           icon
         ) : (
-          <Image style={[iconStyle, {tintColor: tintColor}]} source={icon} />
+          <Image style={[iconStyle, {tintColor: tintColor}, imageStyle]} source={icon} />
         )}
       </View>
     );
@@ -139,7 +139,8 @@ class FloatingActionItem extends Component {
       render,
       margin,
       name,
-      animated
+      animated,
+      style
     } = this.props;
 
     const Touchable = getTouchableComponent(false);
@@ -197,7 +198,8 @@ class FloatingActionItem extends Component {
             {
               paddingTop: paddingTopBottom,
               paddingBottom: paddingTopBottom
-            }
+            },
+            style
           ]}
         >
           {components}
@@ -216,6 +218,9 @@ FloatingActionItem.propTypes = {
   textContainerStyle: PropTypes.object,
   text: PropTypes.string,
   textStyle: PropTypes.object,
+  style: PropTypes.object,
+  imageStyle: PropTypes.object,
+  imageContainerStyle: PropTypes.object,
   textProps: PropTypes.object,
   textBackground: PropTypes.string,
   textColor: PropTypes.string,