added tab features: switch tabs, toggle tabs, set badge, tab styling

example/src/app.js

@@ -35,6 +35,11 @@ Navigation.startTabBasedApp({
       }
     }
   ],
+  // tabsStyle: {
+  //   tabBarButtonColor: '#ffff00',
+  //   tabBarSelectedButtonColor: '#ff9900',
+  //   tabBarBackgroundColor: '#551A8B'
+  // },
   drawer: {
     left: {
       screen: 'example.SideMenu'

example/src/screens/FirstTabScreen.js

@@ -25,6 +25,9 @@ export default class FirstTabScreen extends Component {
       }
     ]
   };
+  static navigatorStyle = {
+    drawUnderTabBar: true
+  };
   constructor(props) {
     super(props);
     // if you want to listen on navigator events, set this up

example/src/screens/PushedScreen.js

@@ -8,6 +8,9 @@ import React, {
 } from 'react-native';
 
 export default class PushedScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true
+  };
   constructor(props) {
     super(props);
   }

example/src/screens/SecondTabScreen.js

@@ -9,6 +9,9 @@ import React, {
 } from 'react-native';
 
 export default class SecondTabScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true
+  };
   constructor(props) {
     super(props);
     this.buttonsCounter = 0;
@@ -27,6 +30,18 @@ export default class SecondTabScreen extends Component {
           <Text style={styles.button}>Change Title</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onSwitchTabPress.bind(this) }>
+          <Text style={styles.button}>Switch To Tab#1</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onSetTabBadgePress.bind(this) }>
+          <Text style={styles.button}>Set Tab Badge</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onToggleTabsPress.bind(this) }>
+          <Text style={styles.button}>Toggle Tabs</Text>
+        </TouchableOpacity>
+
       </View>
     );
   }
@@ -63,6 +78,22 @@ export default class SecondTabScreen extends Component {
       animated: true
     });
   }
+  onSwitchTabPress() {
+    this.props.navigator.switchToTab({
+      tabIndex: 0
+    });
+  }
+  onSetTabBadgePress() {
+    this.props.navigator.setTabBadge({
+      badge: 12
+    });
+  }
+  onToggleTabsPress() {
+    this.props.navigator.toggleTabs({
+      to: this.tabsHidden ? 'shown' : 'hidden'
+    });
+    this.tabsHidden = !this.tabsHidden;
+  }
   onNavigatorEvent(event) {
     // handle a deep link
     if (event.type == 'DeepLink') {
@@ -73,6 +104,7 @@ export default class SecondTabScreen extends Component {
           screen: parts[1],
           animated: true
         });
+        this.props.navigator.switchToTab();
       }
     }
     // handle a button press

example/src/screens/ThirdTabScreen.js

@@ -8,6 +8,9 @@ import React, {
 } from 'react-native';
 
 export default class ThirdTabScreen extends Component {
+  static navigatorStyle = {
+    drawUnderTabBar: true
+  };
   constructor(props) {
     super(props);
   }

package.json

@@ -21,7 +21,7 @@
     "react-native": ">=0.19.0"
   },
   "dependencies": {
-    "react-native-controllers": "^1.2.5"
+    "react-native-controllers": "^1.2.6"
   },
   "optionalDependencies": {
     "react-redux": "*"

src/Screen.js

@@ -38,6 +38,15 @@ class Navigator {
   toggleDrawer(params = {}) {
     return platformSpecific.navigatorToggleDrawer(this, params);
   }
+  toggleTabs(params = {}) {
+    return platformSpecific.navigatorToggleTabs(this, params);
+  }
+  setTabBadge(params = {}) {
+    return platformSpecific.navigatorSetTabBadge(this, params);
+  }
+  switchToTab(params = {}) {
+    return platformSpecific.navigatorSwitchToTab(this, params);
+  }
   setOnNavigatorEvent(callback) {
     this.navigatorEventHandler = callback;
     if (!this.navigatorEventSubscription) {

src/platformSpecific.ios.js

@@ -35,7 +35,10 @@ function startTabBasedApp(params) {
     },
     renderBody: function() {
       return (
-        <TabBarControllerIOS id={controllerID + '_tabs'}>
+        <TabBarControllerIOS
+          id={controllerID + '_tabs'}
+          style={params.tabsStyle}
+        >
         {
           params.tabs.map(function(tab, index) {
             const navigatorID = controllerID + '_nav' + index;
@@ -251,6 +254,44 @@ function navigatorToggleDrawer(navigator, params) {
   }
 }
 
+function navigatorToggleTabs(navigator, params) {
+  const controllerID = navigator.navigatorID.split('_')[0];
+  Controllers.TabBarControllerIOS(controllerID + '_tabs').setHidden({
+    hidden: params.to == 'hidden',
+    animated: !(params.animated === false)
+  });
+}
+
+function navigatorSetTabBadge(navigator, params) {
+  const controllerID = navigator.navigatorID.split('_')[0];
+  if (params.tabIndex || params.tabIndex === 0) {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setBadge({
+      tabIndex: params.tabIndex,
+      badge: params.badge
+    });
+  } else {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setBadge({
+      contentId: navigator.navigatorID,
+      contentType: 'NavigationControllerIOS',
+      badge: params.badge
+    });
+  }
+}
+
+function navigatorSwitchToTab(navigator, params) {
+  const controllerID = navigator.navigatorID.split('_')[0];
+  if (params.tabIndex || params.tabIndex === 0) {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').switchTo({
+      tabIndex: params.tabIndex
+    });
+  } else {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').switchTo({
+      contentId: navigator.navigatorID,
+      contentType: 'NavigationControllerIOS'
+    });
+  }
+}
+
 function navigatorSetButtons(navigator, navigatorEventID, params) {
   if (params.leftButtons) {
     const buttons = params.leftButtons.slice(); // clone
@@ -319,5 +360,8 @@ export default {
   dismissModal,
   navigatorSetButtons,
   navigatorSetTitle,
-  navigatorToggleDrawer
+  navigatorToggleDrawer,
+  navigatorToggleTabs,
+  navigatorSetTabBadge,
+  navigatorSwitchToTab
 }