[ReactNative] Cleanup TabBar and its example

Examples/UIExplorer/Navigator/JumpingNavSample.js

@@ -55,29 +55,25 @@ class JumpingNavBar extends React.Component {
   render() {
     return (
       <View style={styles.tabs}>
-        <TabBarIOS
-          selectedTab={'tab_' + this.props.tabIndex}>
+        <TabBarIOS>
           <TabBarIOS.Item
-            name="tab_0"
             icon={require('image!tabnav_notification')}
             selected={this.props.tabIndex === 0}
-            onPress={() => { this.props.onTabIndex(0); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(0); }}>
+            <View />
+          </TabBarIOS.Item>
           <TabBarIOS.Item
-            name="tab_1"
             icon={require('image!tabnav_list')}
             selected={this.props.tabIndex === 1}
-            onPress={() => { this.props.onTabIndex(1); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(1); }}>
+            <View />
+          </TabBarIOS.Item>
           <TabBarIOS.Item
-            name="tab_2"
             icon={require('image!tabnav_settings')}
             selected={this.props.tabIndex === 2}
-            onPress={() => { this.props.onTabIndex(2); }}
-            children={<View />}
-          />
+            onPress={() => { this.props.onTabIndex(2); }}>
+            <View />
+          </TabBarIOS.Item>
         </TabBarIOS>
       </View>
     );

Examples/UIExplorer/TabBarIOSExample.js

@@ -22,9 +22,8 @@ var {
   Text,
   View,
 } = React;
-var TabBarItemIOS = TabBarIOS.Item;
-var TabBarExample = React.createClass({
 
+var TabBarExample = React.createClass({
   statics: {
     title: '<TabBarIOS>',
     description: 'Tab-based navigation.'
@@ -42,19 +41,16 @@ var TabBarExample = React.createClass({
     return (
       <View style={[styles.tabContent, {backgroundColor: color}]}>
         <Text style={styles.tabText}>{pageText}</Text>
-        <Text style={styles.tabText}>{this.state.presses} re-renders of this tab</Text>
+        <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
       </View>
     );
   },
 
   render: function() {
     return (
-      <TabBarIOS
-        selectedTab={this.state.selectedTab}>
-        <TabBarItemIOS
-          name="blueTab"
-          icon={_ix_DEPRECATED('favorites')}
-          accessibilityLabel="Blue Tab"
+      <TabBarIOS>
+        <TabBarIOS.Item
+          title="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}
           onPress={() => {
             this.setState({
@@ -62,12 +58,10 @@ var TabBarExample = React.createClass({
             });
           }}>
           {this._renderContent('#414A8C', 'Blue Tab')}
-        </TabBarItemIOS>
-        <TabBarItemIOS
-          accessibilityLabel="Red Tab"
-          name="redTab"
-          icon={_ix_DEPRECATED('history')}
-          badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
+        </TabBarIOS.Item>
+        <TabBarIOS.Item
+          systemIcon="history"
+          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
           selected={this.state.selectedTab === 'redTab'}
           onPress={() => {
             this.setState({
@@ -76,11 +70,9 @@ var TabBarExample = React.createClass({
             });
           }}>
           {this._renderContent('#783E33', 'Red Tab')}
-        </TabBarItemIOS>
-        <TabBarItemIOS
-          name="greenTab"
-          icon={_ix_DEPRECATED('more')}
-          accessibilityLabel="Green Tab"
+        </TabBarIOS.Item>
+        <TabBarIOS.Item
+          systemIcon="more"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {
             this.setState({
@@ -89,7 +81,7 @@ var TabBarExample = React.createClass({
             });
           }}>
           {this._renderContent('#21551C', 'Green Tab')}
-        </TabBarItemIOS>
+        </TabBarIOS.Item>
       </TabBarIOS>
     );
   },
@@ -107,14 +99,4 @@ var styles = StyleSheet.create({
   },
 });
 
-// This is needed because the actual image may not exist as a file and
-// is used by the native code to load a system image.
-// TODO(nicklockwood): How can this fit our require system?
-function _ix_DEPRECATED(imageUri) {
-  return {
-    uri: imageUri,
-    isStatic: true,
-  };
-}
-
 module.exports = TabBarExample;

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}

React/Views/RCTTabBarItem.m

@@ -31,19 +31,20 @@
   static dispatch_once_t onceToken;
   dispatch_once(&onceToken, ^{
     systemIcons = @{
-      @"more": @(UITabBarSystemItemMore),
+                    @"bookmarks": @(UITabBarSystemItemBookmarks),
+                    @"contacts": @(UITabBarSystemItemContacts),
+                    @"downloads": @(UITabBarSystemItemDownloads),
                     @"favorites": @(UITabBarSystemItemFavorites),
                     @"featured": @(UITabBarSystemItemFeatured),
-      @"topRated": @(UITabBarSystemItemTopRated),
-      @"recents": @(UITabBarSystemItemRecents),
-      @"contacts": @(UITabBarSystemItemContacts),
                     @"history": @(UITabBarSystemItemHistory),
-      @"bookmarks": @(UITabBarSystemItemBookmarks),
+                    @"more": @(UITabBarSystemItemMore),
+                    @"most-recent": @(UITabBarSystemItemMostRecent),
+                    @"most-viewed": @(UITabBarSystemItemMostViewed),
+                    @"recents": @(UITabBarSystemItemRecents),
                     @"search": @(UITabBarSystemItemSearch),
-      @"downloads": @(UITabBarSystemItemDownloads),
-      @"mostRecent": @(UITabBarSystemItemMostRecent),
-      @"mostViewed": @(UITabBarSystemItemMostViewed),
+                    @"top-rated": @(UITabBarSystemItemTopRated),
                     };
+
   });
 
   // Update icon