Add render prop to ActionButton (#254)

* Add render prop to ActionButton

* Add documentation for `renderIcon` prop

* Add deprecation warning for `icon` prop

Author: jakewtaylor

ActionButton.js

@@ -222,8 +222,12 @@ export default class ActionButton extends Component {
   }
 
   _renderButtonIcon() {
-    const { icon, btnOutRangeTxt, buttonTextStyle, buttonText } = this.props;
-    if (icon) return icon;
+    const { icon, renderIcon, btnOutRangeTxt, buttonTextStyle, buttonText } = this.props;
+    if (renderIcon) return renderIcon(this.state.active);
+    if (icon) {
+      console.warn('react-native-action-button: The `icon` prop is deprecated! Use `renderIcon` instead.');
+      return icon;
+    }
 
     const textColor = buttonTextStyle.color || "rgba(255,255,255,1)";
 
@@ -344,6 +348,8 @@ ActionButton.propTypes = {
     PropTypes.number
   ]),
 
+  renderIcon: PropTypes.func,
+  
   bgColor: PropTypes.string,
   bgOpacity: PropTypes.number,
   buttonColor: PropTypes.string,

README.md

@@ -114,7 +114,8 @@ Take a look at [this gist](https://gist.github.com/mmazzarolo/cfd467436f9d110e94
 | onPressIn     | function      | null                | fires, before ActionButton is released
 | onPressOut    | function      | null                | fires, after ActionButton is released
 | onLongPress   | function      | null                | fires, when ActionButton is long pressed
-| icon          | Component     | +                   | Custom component for ActionButton Icon
+| renderIcon    | function      | null                | Function to render the component for ActionButton Icon. It is passed a boolean, `active`, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded.
+| icon          | Component     | +                   | **Deprecated, use `renderIcon`** Custom component for ActionButton Icon
 | backdrop      | Component     | false               | Custom component for use as Backdrop (i.e. [BlurView](https://github.com/react-native-fellowship/react-native-blur#blur-view), [VibrancyView](https://github.com/react-native-fellowship/react-native-blur#vibrancy-view))
 | degrees       | number        | 135                 | degrees to rotate icon
 | buttonText    | string        | +                   | use this to set a different text on the button