renderIcon is a weird mix of optional (TabNavigatorIcon has a default…

… value, TabNavigator constantly checks item.props.renderIcon) and non-optional (marked as func.isRequired). On top of that, the default value of renderIcon returns a <View />, which does not accept the defaultSelectedIcon stylesheet's tintColor (which is only allowed on <Image /> elements.) (ptomasroos#77)

This correctly makes renderIcon optional again in all senses of the word, and ensures the code works without warnings in such cases. (I see some references on the issue tracker about this problem.)

This isn't important in shipping code (where you'll most likely have icons), but is important when first setting it up without icons and seeing scary looking warnings.
The renderIcon is optional in many ways (has a default value that returns a

Tab.js

@@ -31,7 +31,10 @@ export default class Tab extends React.Component {
 
   render() {
     let { title, badge } = this.props;
-    let icon = React.Children.only(this.props.children);
+    let icon = null;
+    if (React.Children.count(this.props.children) > 0) {
+      icon = React.Children.only(this.props.children);
+    }
 
     if (title) {
       title =

TabNavigatorItem.js

@@ -10,7 +10,7 @@ import {
 
 export default class TabNavigatorItem extends React.Component {
   static propTypes = {
-    renderIcon: PropTypes.func.isRequired,
+    renderIcon: PropTypes.func,
     renderSelectedIcon: PropTypes.func,
     badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     renderBadge: PropTypes.func,
@@ -24,7 +24,6 @@ export default class TabNavigatorItem extends React.Component {
   };
 
   static defaultProps = {
-    renderIcon: () => <View />,
   };
 
   render() {