[BottomNavigation] Ability to handle custom Icons instead of icon nam…

…es. (xotahal#62)

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

* Fix PropTypes.

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>