Tab bar items (#2345)

* tabBarItem support

* apply tab items on tabController initialization

* e2e test

* refactored bottomTab item

* tests fix

* tabItem testID fix

* renamed tabBadge to badge

* fix merge

* BottomTab fix

* removed BottomTabs

docs/_sidebar.md

  - [Root](/docs/Root)
  - [Container](/docs/Container)
  - [SideMenu](/docs/SideMenu)
- - [BottomTabs](/docs/BottomTabs)
 - Options
  - [NavigationOptions](/docs/options/NavigationOptions)
  - [TopBar](/docs/options/TopBar)
  - [Button](/docs/options/Button)
  - [BottomTabs](/docs/options/BottomTabs)
+ - [BottomTab](/docs/options/BottomTab)

docs/docs/BottomTabs.md

-<h1>BottomTabs</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| tabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
-

docs/docs/Container.md

 | --- | --- | --- |
 | name | <code>string</code> | The container's registered name |
 | passProps | <code>object</code> | props |
+| navigationOptions | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/NavigationOptions">NavigationOptions</a> |  |
 

docs/docs/Root.md

 | --- | --- |
 | container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
 | sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/BottomTabs">BottomTabs</a> | 
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
 

docs/docs/options/BottomTab.md

+<h1>BottomTab</h1>
+
+**Properties**
+
+| Name | Type |
+| --- | --- |
+| title | <code>string</code> | 
+| tag | <code>number</code> | 
+| icon | <code>object</code> | 
+| visible | <code>boolean</code> | 
+| badge | <code>string</code> | 
+

docs/docs/options/BottomTabs.md

 | --- | --- |
 | currentTabId | <code>string</code> | 
 | currentTabIndex | <code>number</code> | 
-| tabBadge | <code>number</code> | 
 | hidden | <code>boolean</code> | 
 | animateHide | <code>boolean</code> | 
 

docs/docs/options/NavigationOptions.md

 | --- | --- |
 | topBar | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/TopBar">TopBar</a> | 
 | bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTabs">BottomTabs</a> | 
+| bottomTab | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTab">BottomTab</a> | 
 | orientation | <code>string</code> | 
 | rightButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
 | leftButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 

e2e/ScreenStyle.test.js

     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
     await expect(elementById('buttonLeft')).toBeVisible();
   });
+
+  it('tab bar items visibility', async () => {
+    await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
+    await expect(elementById(testIDs.FIRST_TAB_BAR_BUTTON)).toBeVisible();
+    await expect(elementById(testIDs.SECOND_TAB_BAR_BUTTON)).toBeVisible();
+  });
 });

lib/ios/RNNControllerFactory.m

 	NSMutableArray* controllers = [NSMutableArray new];
 	for (NSDictionary *child in node.children) {
 		UIViewController* childVc = [self fromTree:child];
+		RNNRootViewController* rootView = (RNNRootViewController *)childVc.childViewControllers.firstObject;
+		[rootView applyTabBarItem];
 		
-		UITabBarItem* item = [[UITabBarItem alloc] initWithTitle:@"A Tab" image:nil tag:1];
-		[childVc setTabBarItem:item];
 		[controllers addObject:childVc];
 	}
 	[vc setViewControllers:controllers];

lib/ios/RNNNavigationOptions.h

 #import "RNNTopBarOptions.h"
 #import "RNNTabBarOptions.h"
 #import "RNNSideMenuOptions.h"
+#import "RNNTabItemOptions.h"
 
 extern const NSInteger BLUR_STATUS_TAG;
 extern const NSInteger BLUR_TOPBAR_TAG;
 @property (nonatomic, strong) RNNSideMenuOptions* sideMenu;
 @property (nonatomic, strong) UIImage* backgroundImage;
 @property (nonatomic, strong) UIImage* rootBackgroundImage;
+@property (nonatomic, strong) RNNTabItemOptions* tabItem;
+
 
 - (UIInterfaceOrientationMask)supportedOrientations;
 
 -(void)mergeWith:(NSDictionary*)otherOptions;
 -(void)storeOriginalTopBarImages:(UIViewController*)viewController;
 
+- (void)applyTabBarItemOptions:(UIViewController*)viewController;
+
 @end

lib/ios/RNNNavigationOptions.m

 	self.sideMenu = [[RNNSideMenuOptions alloc] initWithDict:[navigationOptions objectForKey:@"sideMenu"]];
 	self.backgroundImage = [RCTConvert UIImage:[navigationOptions objectForKey:@"backgroundImage"]];
 	self.rootBackgroundImage = [RCTConvert UIImage:[navigationOptions objectForKey:@"rootBackgroundImage"]];
-
+	self.tabItem = [[RNNTabItemOptions alloc] initWithDict:[navigationOptions objectForKey:@"bottomTab"]];
+    
 	return self;
 }
 
 			[self.bottomTabs mergeWith:[otherOptions objectForKey:key]];
 		} else if ([key isEqualToString:@"sideMenu"]) {
 			[self.sideMenu mergeWith:[otherOptions objectForKey:@"sideMenu"]];
+		} else if ([key isEqualToString:@"bottomTab"]) {
+			[self.tabItem mergeWith:[otherOptions objectForKey:key]];
 		} else {
 			[self setValue:[otherOptions objectForKey:key] forKey:key];
 		}
 	}
 	
 	if (self.bottomTabs) {
-		if (self.bottomTabs.tabBadge) {
-			NSString *badge = [RCTConvert NSString:self.bottomTabs.tabBadge];
-			if (viewController.navigationController) {
-				viewController.navigationController.tabBarItem.badgeValue = badge;
-			} else {
-				viewController.tabBarItem.badgeValue = badge;
-			}
-		}
 		if (self.bottomTabs.currentTabIndex) {
 			[viewController.tabBarController setSelectedIndex:[self.bottomTabs.currentTabIndex unsignedIntegerValue]];
 		}
 		backgroundImageView.image = self.rootBackgroundImage;
 		[backgroundImageView setContentMode:UIViewContentModeScaleAspectFill];
 	}
+	
+	[self applyTabBarItemOptions:viewController];
+}
+
+- (void)applyTabBarItemOptions:(UIViewController*)viewController {
+	if (self.tabItem) {
+		if (self.tabItem.title || self.tabItem.icon) {
+			UITabBarItem* tabItem = [[UITabBarItem alloc] initWithTitle:self.tabItem.title image:[RCTConvert UIImage:self.tabItem.icon] tag:self.tabItem.tag];
+			tabItem.accessibilityIdentifier = self.tabItem.testID;
+			[viewController.navigationController setTabBarItem:tabItem];
+		}
+		
+		if (self.tabItem.badge) {
+			NSString *badge = [RCTConvert NSString:self.tabItem.badge];
+			if (viewController.navigationController) {
+				viewController.navigationController.tabBarItem.badgeValue = badge;
+			} else {
+				viewController.tabBarItem.badgeValue = badge;
+			}
+		}
+		
+		if (self.tabItem.visible) {
+			[viewController.tabBarController setSelectedIndex:[viewController.tabBarController.viewControllers indexOfObject:viewController]];
+		}
+		
+		[self.tabItem resetOptions];
+	}
 }
 
 - (UIInterfaceOrientationMask)supportedOrientations {

lib/ios/RNNRootViewController.h

 
 -(void)applyNavigationButtons;
 -(BOOL)isAnimated;
+-(void)applyTabBarItem;
 
 @end

lib/ios/RNNRootViewController.m

 
 
 
--(void) applyNavigationButtons{
+-(void)applyNavigationButtons{
 	[self.navigationButtons applyLeftButtons:self.navigationOptions.leftButtons rightButtons:self.navigationOptions.rightButtons];
 }
 
+-(void)applyTabBarItem {
+	[self.navigationOptions applyTabBarItemOptions:self];
+}
+
 /**
  *	fix for #877, #878
  */

lib/ios/RNNTabBarOptions.h

 
 @property (nonatomic, strong) NSNumber* hidden;
 @property (nonatomic, strong) NSNumber* animateHide;
-@property (nonatomic, strong) NSString* tabBadge;
 @property (nonatomic, strong) NSNumber* currentTabIndex;
 @property (nonatomic, strong) NSString* testID;
 @property (nonatomic, strong) NSNumber* drawUnder;

lib/ios/RNNTabBarOptions.m

 	
 	self.hidden = [tabBarOptions valueForKey:@"hidden"];
 	self.animateHide = [tabBarOptions valueForKey:@"animateHide"];
-	self.tabBadge = [tabBarOptions valueForKey:@"tabBadge"];
 	self.currentTabIndex = [tabBarOptions valueForKey:@"currentTabIndex"];
 	self.testID = [tabBarOptions valueForKey:@"testID"];
 	

lib/ios/RNNTabItemOptions.h

+#import <Foundation/Foundation.h>
+
+@interface RNNTabItemOptions : NSObject
+
+@property (nonatomic) NSUInteger tag;
+@property (nonatomic, strong) NSString* title;
+@property (nonatomic, strong) NSString* badge;
+@property (nonatomic, strong) NSString* testID;
+@property (nonatomic, strong) NSNumber* visible;
+@property (nonatomic, strong) NSDictionary* icon;
+
+-(instancetype)initWithDict:(NSDictionary*)tabItemDict;
+
+-(void)mergeWith:(NSDictionary *)otherOptions;
+
+-(void)resetOptions;
+
+@end

lib/ios/RNNTabItemOptions.m

+#import "RNNTabItemOptions.h"
+
+@implementation RNNTabItemOptions
+
+-(instancetype)initWithDict:(NSDictionary *)tabItemDict {
+	self = [super init];
+	
+	self.title = tabItemDict[@"title"];
+	self.tag = [tabItemDict[@"tag"] integerValue];
+	self.badge = tabItemDict[@"badge"];
+	self.testID = tabItemDict[@"testID"];
+	self.visible = tabItemDict[@"visible"];
+	self.icon = tabItemDict[@"icon"];
+	
+	return self;
+}
+
+-(void)mergeWith:(NSDictionary *)otherOptions {
+	for (id key in otherOptions) {
+		[self setValue:[otherOptions objectForKey:key] forKey:key];
+	}
+}
+
+-(void)resetOptions {
+	self.title = nil;
+	self.badge = nil;
+	self.visible = nil;
+	self.icon = nil;
+	self.testID = nil;
+}
+
+@end

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

 		26916C991E4B9E7700D13680 /* RNNReactRootViewCreator.m in Sources */ = {isa = PBXBuildFile; fileRef = 26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */; };
 		50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */; };
 		50CB3B6A1FDE911400AA153B /* RNNSideMenuOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */; };
+		50EB93411FE14A3E00BD8EEE /* RNNTabItemOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50EB933F1FE14A3E00BD8EEE /* RNNTabItemOptions.h */; };
+		50EB93421FE14A3E00BD8EEE /* RNNTabItemOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB93401FE14A3E00BD8EEE /* RNNTabItemOptions.m */; };
 		50F5DFC11F407A8C001A00BC /* RNNTabBarController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */; };
 		50F5DFC21F407A8C001A00BC /* RNNTabBarController.m in Sources */ = {isa = PBXBuildFile; fileRef = 50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */; };
 		50F5DFC51F407AA0001A00BC /* RNNNavigationController.h in Headers */ = {isa = PBXBuildFile; fileRef = 50F5DFC31F407AA0001A00BC /* RNNNavigationController.h */; };
 		26916C971E4B9E7700D13680 /* RNNReactRootViewCreator.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNReactRootViewCreator.m; sourceTree = "<group>"; };
 		50CB3B671FDE911400AA153B /* RNNSideMenuOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSideMenuOptions.h; sourceTree = "<group>"; };
 		50CB3B681FDE911400AA153B /* RNNSideMenuOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuOptions.m; sourceTree = "<group>"; };
+		50EB933F1FE14A3E00BD8EEE /* RNNTabItemOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabItemOptions.h; sourceTree = "<group>"; };
+		50EB93401FE14A3E00BD8EEE /* RNNTabItemOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTabItemOptions.m; sourceTree = "<group>"; };
 		50F5DFBF1F407A8C001A00BC /* RNNTabBarController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTabBarController.h; sourceTree = "<group>"; };
 		50F5DFC01F407A8C001A00BC /* RNNTabBarController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTabBarController.m; sourceTree = "<group>"; };
 		50F5DFC31F407AA0001A00BC /* RNNNavigationController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNNavigationController.h; sourceTree = "<group>"; };
 				21B85E5C1F44480200B314B5 /* RNNNavigationButtons.m */,
 				214545261F4DC164006E8DA1 /* RNNUIBarButtonItem.h */,
 				214545241F4DC125006E8DA1 /* RNNUIBarButtonItem.m */,
+				50EB933F1FE14A3E00BD8EEE /* RNNTabItemOptions.h */,
+				50EB93401FE14A3E00BD8EEE /* RNNTabItemOptions.m */,
 				A7626BFE1FC2FB6700492FB8 /* RNNTopBarOptions.h */,
 				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
 				A7626BFF1FC578AB00492FB8 /* RNNTabBarOptions.h */,
 				E8E518321F83B3E0000467AC /* RNNUtils.h in Headers */,
 				263905CA1E4C6F440023D7D3 /* SidebarLuvocracyAnimation.h in Headers */,
 				263905B11E4C6F440023D7D3 /* MMDrawerController.h in Headers */,
+				50EB93411FE14A3E00BD8EEE /* RNNTabItemOptions.h in Headers */,
 				263905B91E4C6F440023D7D3 /* RCCDrawerController.h in Headers */,
 				263905B31E4C6F440023D7D3 /* MMDrawerVisualState.h in Headers */,
 				E8A5CD621F49114F00E89D0D /* RNNElement.h in Headers */,
 				263905CD1E4C6F440023D7D3 /* SidebarWunderlistAnimation.m in Sources */,
 				263905CF1E4C6F440023D7D3 /* TheSidebarController.m in Sources */,
 				E8A430121F9CB87B00B61A20 /* RNNAnimatedView.m in Sources */,
+				50EB93421FE14A3E00BD8EEE /* RNNTabItemOptions.m in Sources */,
 				E8367B811F7A8A4700675C05 /* VICMAImageView.m in Sources */,
 				A7626C011FC5796200492FB8 /* RNNTabBarOptions.m in Sources */,
 				263905AF1E4C6F440023D7D3 /* MMDrawerBarButtonItem.m in Sources */,

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

 
 -(void)testTabBadge {
 	NSString* tabBadgeInput = @"5";
-	self.options.bottomTabs.tabBadge = tabBadgeInput;
+	self.options.tabItem.badge = tabBadgeInput;
 	__unused RNNTabBarController* vc = [[RNNTabBarController alloc] init];
 	NSMutableArray* controllers = [NSMutableArray new];
 	UITabBarItem* item = [[UITabBarItem alloc] initWithTitle:@"A Tab" image:nil tag:1];

lib/src/params/containers/BottomTabs.js

-const { forEach } = require('lodash');
-const Container = require('./Container');
-
-class BottomTabs {
-  /**
-   * @property {Container[]} tabs
-   */
-  constructor(tabs) {
-    if (!tabs || tabs.length === 0) {
-      throw new Error('BottomTabs undefined');
-    }
-    this.tabs = [];
-    forEach(tabs, (tab) => this.tabs.push({ container: new Container(tab.container) }));
-  }
-}
-
-module.exports = BottomTabs;

lib/src/params/containers/BottomTabs.test.js

-const BottomTabs = require('./BottomTabs');
-
-const TAB1 = {
-  container: {
-    name: 'navigation.playground.TextScreen',
-    passProps: {
-      text: 'This is a side menu center screen tab 2'
-    }
-  }
-};
-const TAB2 = {
-  container: {
-    name: 'navigation.playground.TextScreen',
-    passProps: {
-      text: 'This is a side menu center screen tab 1'
-    }
-  }
-};
-const TABS = [TAB1, TAB2];
-
-describe('ContainerRegistry', () => {
-  it('parses tabs correctly', () => {
-    const uut = new BottomTabs(TABS);
-    expect(uut.tabs.length).toBe(2);
-  });
-
-  it('throws if tabs are undefined', () => {
-    expect(() => new BottomTabs()).toThrowError('BottomTabs undefined');
-  });
-
-  it('throws if zero tabs', () => {
-    expect(() => new BottomTabs([])).toThrowError('BottomTabs undefined');
-  });
-});

lib/src/params/containers/Container.js

   /**
    * @property {string} name The container's registered name
    * @property {object} [passProps] props
+   * @property {NavigationOptions} navigationOptions
    */
   constructor(params) {
     if (!params || !params.name) {
     }
     this.name = params.name;
     this.passProps = params.passProps;
+    this.navigationOptions = params.navigationOptions;
   }
 }
 

lib/src/params/containers/Root.js

 const Container = require('./Container');
 const SideMenu = require('./SideMenu');
-const BottomTabs = require('./BottomTabs');
 
 class Root {
   /**
    * @property {Container} container
    * @property {SideMenu} [sideMenu]
-   * @property {BottomTabs} [bottomTabs]
+   * @property {Container[]} [bottomTabs]
    */
   constructor(root) {
     this.container = root.container && new Container(root.container);
     this.sideMenu = root.sideMenu && new SideMenu(root.sideMenu);
-    this.bottomTabs = root.bottomTabs && new BottomTabs(root.bottomTabs).tabs;
+    if (root.bottomTabs) {
+      root.bottomTabs.map((t) => new Container(t.container));
+      this.bottomTabs = root.bottomTabs;
+    }
   }
 }
 

lib/src/params/options/BottomTab.js

+const { isEmpty } = require('lodash');
+
+class BottomTab {
+  /**
+   * @property {string} [title]
+   * @property {number} [tag]
+   * @property {object} [icon]
+   * @property {boolean} [visible]
+   * @property {string} [badge]
+   */
+  constructor(params) {
+    if (isEmpty(params)) {
+      return;
+    }
+
+    this.badge = params.badge;
+    this.title = params.title;
+    this.icon = params.icon;
+    this.visible = params.visible;
+  }
+}
+
+module.exports = BottomTab;

lib/src/params/options/BottomTab.test.js

+const BottomTab = require('./BottomTab');
+
+const BOTTOM_TAB = {
+  title: 'title',
+  badge: 3,
+  visible: true,
+  icon: { uri: '' }
+};
+
+describe('BottomTab', () => {
+  it('parses BottomTab options', () => {
+    const uut = new BottomTab(BOTTOM_TAB);
+    expect(uut.title).toEqual('title');
+    expect(uut.badge).toEqual(3);
+    expect(uut.visible).toEqual(true);
+    expect(uut.icon).toEqual({ uri: '' });
+  });
+});

lib/src/params/options/BottomTabs.js

   /**
    * @property {string} [currentTabId]
    * @property {number} [currentTabIndex]
-   * @property {number} [tabBadge]
    * @property {boolean} [hidden]
    * @property {boolean} [animateHide]
    */
     }
     this.currentTabId = params.currentTabId;
     this.currentTabIndex = params.currentTabIndex;
-    this.tabBadge = params.tabBadge;
     this.hidden = params.hidden;
     this.animateHide = params.animateHide;
   }

lib/src/params/options/BottomTabs.test.js

 const BOTTOM_TABS = {
   currentTabId: 1,
   currentTabIndex: 2,
-  tabBadge: 3,
   hidden: true,
   animateHide: true
 };
     const uut = new BottomTabs(BOTTOM_TABS);
     expect(uut.currentTabId).toEqual(1);
     expect(uut.currentTabIndex).toEqual(2);
-    expect(uut.tabBadge).toEqual(3);
     expect(uut.hidden).toEqual(true);
     expect(uut.animateHide).toEqual(true);
   });

lib/src/params/options/NavigationOptions.js

 const TopBar = require('./TopBar');
 const BottomTabs = require('./BottomTabs');
 const Button = require('./Button');
+const BottomTab = require('./BottomTab');
 
 class NavigationOptions {
   /**
    * @property {options:TopBar} [topBar]
    * @property {options:BottomTabs} [bottomTabs]
+   * @property {options:BottomTab} [bottomTab]
    * @property {string} [orientation]
    * @property {options:Button[]} [rightButtons]
    * @property {options:Button[]} [leftButtons]
   constructor(options) {
     this.topBar = options.topBar && new TopBar(options.topBar);
     this.bottomTabs = options.bottomTabs && new BottomTabs(options.bottomTabs);
+    this.bottomTab = options.bottomTab && new BottomTab(options.bottomTab);
     this.orientation = options.orientation;
     this.rightButtons = options.rightButtons && options.rightButtons.map((button) => new Button(button));
     this.leftButtons = options.leftButtons && options.leftButtons.map((button) => new Button(button));

lib/src/params/options/NavigationOptions.test.js

 const NavigationOptions = require('./NavigationOptions');
 const BottomTabs = require('./BottomTabs');
 const TopBar = require('./TopBar');
+const BottomTab = require('./BottomTab');
 
 const TAB_BAR = {};
 const TOP_BAR = {};
+const TAB_ITEM = {};
 const RIGHT_BUTTONS = [
   {
     id: 'myBtn',
 const NAVIGATION_OPTIONS = {
   topBar: TOP_BAR,
   bottomTabs: TAB_BAR,
+  bottomTab: TAB_ITEM,
   orientation: 'portrait',
   rightButtons: RIGHT_BUTTONS,
   leftButtons: LEFT_BUTTONS
     const uut = new NavigationOptions(NAVIGATION_OPTIONS);
     expect(uut.bottomTabs).toBeInstanceOf(BottomTabs);
     expect(uut.topBar).toBeInstanceOf(TopBar);
+    expect(uut.bottomTab).toBeInstanceOf(BottomTab);
     expect(uut.orientation).toEqual('portrait');
     expect(uut.rightButtons).toEqual(RIGHT_BUTTONS);
     expect(uut.leftButtons).toEqual(LEFT_BUTTONS);

playground/src/containers/TextScreen.js

 
   onButtonPress() {
     Navigation.setOptions(this.props.containerId, {
-      bottomTabs: {
-        tabBadge: `TeSt`
+      bottomTab: {
+        badge: `TeSt`
       }
     });
   }

playground/src/containers/WelcomeScreen.js

             passProps: {
               text: 'This is tab 1',
               myFunction: () => 'Hello from a function!'
+            },
+            navigationOptions: {
+              bottomTab: {
+                title: 'Tab 1',
+                testID: testIDs.FIRST_TAB_BAR_BUTTON
+              }
             }
           }
         },
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 2'
+            },
+            navigationOptions: {
+              bottomTab: {
+                title: 'Tab 2',
+                testID: testIDs.SECOND_TAB_BAR_BUTTON
+              }
             }
           }
         }

playground/src/testIDs.js

   HIDE_RIGHT_SIDE_MENU_BUTTON: `HIDE_RIGHT_SIDE_MENU_BUTTON`,
   HIDE_BOTTOM_TABS_BUTTON: `HIDE_BOTTOM_TABS_BUTTON`,
   SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
+  FIRST_TAB_BAR_BUTTON: `FIRST_TAB_BAR_BUTTON`,
+  SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,