From decb49a8a75b664ea4349dba5e9b6ff12f30df39 Mon Sep 17 00:00:00 2001
From: NewOldMax <newoldmax@gmail.com>
Date: Wed, 21 Dec 2016 13:13:51 +0300
Subject: [PATCH] [BottomNavigation] Ability to handle custom Icons instead of
 icon names. (#62)

* [BottomNavigation] Ability to handle custom Icons instead of icon names.

* Fix PropTypes.
---
 .../BottomNavigationAction.react.js           | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 src/BottomNavigation/BottomNavigationAction.react.js

diff --git a/src/BottomNavigation/BottomNavigationAction.react.js b/src/BottomNavigation/BottomNavigationAction.react.js
old mode 100644
new mode 100755
index 01b39ba1..129f7ea3
--- a/src/BottomNavigation/BottomNavigationAction.react.js
+++ b/src/BottomNavigation/BottomNavigationAction.react.js
@@ -10,8 +10,13 @@ import Icon from '../Icon';
 const propTypes = {
     /**
     * Will be rendered above the label as a content of the action.
+    * If string, result will be <Icon name={icon} ...rest />
+    * If ReactElement, will be used as is
     */
-    icon: PropTypes.string.isRequired,
+    icon: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string,
+    ]).isRequired,
     /**
     * Will be rendered under the icon as a content of the action.
     */
@@ -79,16 +84,29 @@ function getStyles(props, context) {
 
 
 class BottomNavigationAction extends PureComponent {
+
+    renderIcon(icon, styles, color) {
+        let element;
+        if (React.isValidElement(icon)) {
+            element = icon;
+        } else {
+            element = <Icon name={icon} style={styles.icon} color={color} />;
+        }
+        return element;
+    }
+
     render() {
         const { icon, label, onPress } = this.props;
 
         const styles = getStyles(this.props, this.context);
         const color = StyleSheet.flatten(styles.icon).color;
 
+        const iconElement = this.renderIcon(icon, styles, color);
+
         return (
             <RippleFeedback onPress={onPress}>
                 <View style={styles.container}>
-                    <Icon name={icon} style={styles.icon} color={color} />
+                    {iconElement}
                     <Text style={styles.label}>{label}</Text>
                 </View>
             </RippleFeedback>