[ReactNative] Cleanup TabBar and its example

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -13,8 +13,9 @@
 
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
-var TabBarItemIOS = require('TabBarItemIOS');
 var StyleSheet = require('StyleSheet');
+var TabBarItemIOS = require('TabBarItemIOS');
+var View = require('View');
 
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
 
@@ -22,6 +23,11 @@ var TabBarIOS = React.createClass({
   statics: {
     Item: TabBarItemIOS,
   },
+
+  propTypes: {
+    style: View.propTypes.style,
+  },
+
   render: function() {
     return (
       <RCTTabBar style={[styles.tabGroup, this.props.style]}>

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -24,12 +24,57 @@ var merge = require('merge');
 
 var TabBarItemIOS = React.createClass({
   propTypes: {
-    icon: Image.propTypes.source.isRequired,
-    onPress: React.PropTypes.func.isRequired,
-    selected: React.PropTypes.bool.isRequired,
-    badgeValue: React.PropTypes.string,
-    title: React.PropTypes.string,
+    /**
+     * Little red bubble that sits at the top right of the icon.
+     */
+    badge: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    /**
+     * Items comes with a few predefined system icons. Note that if you are
+     * using them, the title and selectedIcon will be overriden with the
+     * system ones.
+     */
+    systemIcon: React.PropTypes.oneOf([
+      'bookmarks',
+      'contacts',
+      'downloads',
+      'favorites',
+      'featured',
+      'history',
+      'more',
+      'most-recent',
+      'most-viewed',
+      'recents',
+      'search',
+      'top-rated',
+    ]),
+    /**
+     * A custom icon for the tab. It is ignored when a system icon is defined.
+     */
+    icon: Image.propTypes.source,
+    /**
+     * A custom icon when the tab is selected. It is ignored when a system
+     * icon is defined. If left empty, the icon will be tinted in blue.
+     */
+    selectedIcon: Image.propTypes.source,
+    /**
+     * Callback when this tab is being selected, you should change the state of your
+     * component to set selected={true}.
+     */
+    onPress: React.PropTypes.func,
+    /**
+     * It specifies whether the children are visible or not. If you see a
+     * blank content, you probably forgot to add a selected one.
+     */
+    selected: React.PropTypes.bool,
     style: View.propTypes.style,
+    /**
+     * Text that appears under the icon. It is ignored when a system icon
+     * is defined.
+     */
+    title: React.PropTypes.string,
   },
 
   getInitialState: function() {
@@ -63,13 +108,21 @@ var TabBarItemIOS = React.createClass({
       tabContents = <View />;
     }
 
+    var icon = this.props.systemIcon || (
+      this.props.icon && this.props.icon.uri
+    );
+
+    var badge = typeof this.props.badge === 'number' ?
+      '' + this.props.badge :
+      this.props.badge;
+
     return (
       <RCTTabBarItem
-        icon={this.props.icon.uri}
+        icon={icon}
         selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
         onPress={this.props.onPress}
         selected={this.props.selected}
-        badgeValue={this.props.badgeValue}
+        badgeValue={badge}
         title={this.props.title}
         style={[styles.tab, this.props.style]}>
         {tabContents}