TabBarIOS itemPositioning - Fixes #4136

Summary:
The default itemPositioning is `automatic` (referred to `auto` in this pull request) - you can check its behaviour in the docs attached.

Sometimes that value has to be modified to have more predictable appearance as described in #4136.
Closes https://github.com/facebook/react-native/pull/7217

Differential Revision: D3220958

Pulled By: mkonicek

fbshipit-source-id: d4bf648b16e71825cd31c06d6b6396479767d19f

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -43,6 +43,16 @@ var TabBarIOS = React.createClass({
      * A Boolean value that indicates whether the tab bar is translucent
      */
     translucent: React.PropTypes.bool,
+    /**
+     * Specifies tab bar item positioning. Available values are:
+     * - fill - distributes items across the entire width of the tab bar
+     * - center - centers item in the available tab bar space
+     * - auto (default) - distributes items dynamically according to the
+     * user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
+     * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
+     * it defaults to center.
+     */
+    itemPositioning: React.PropTypes.oneOf(['fill', 'center', 'auto']),
   },
 
   render: function() {
@@ -52,6 +62,7 @@ var TabBarIOS = React.createClass({
         unselectedTintColor={this.props.unselectedTintColor}
         tintColor={this.props.tintColor}
         barTintColor={this.props.barTintColor}
+        itemPositioning={this.props.itemPositioning}
         translucent={this.props.translucent !== false}>
         {this.props.children}
       </RCTTabBar>

React/Views/RCTTabBar.m

@@ -112,9 +112,9 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
     if (_unselectedTintColor) {
       [tab.barItem setTitleTextAttributes:@{NSForegroundColorAttributeName: _unselectedTintColor} forState:UIControlStateNormal];
     }
-    
+
     [tab.barItem setTitleTextAttributes:@{NSForegroundColorAttributeName: self.tintColor} forState:UIControlStateSelected];
-    
+
     controller.tabBarItem = tab.barItem;
     if (tab.selected) {
       _tabController.selectedViewController = controller;
@@ -150,6 +150,16 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   _tabController.tabBar.translucent = translucent;
 }
 
+- (UITabBarItemPositioning)itemPositoning
+{
+  return _tabController.tabBar.itemPositioning;
+}
+
+- (void)setItemPositioning:(UITabBarItemPositioning)itemPositioning
+{
+  _tabController.tabBar.itemPositioning = itemPositioning;
+}
+
 #pragma mark - UITabBarControllerDelegate
 
 - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController

React/Views/RCTTabBarManager.m

@@ -12,6 +12,16 @@
 #import "RCTBridge.h"
 #import "RCTTabBar.h"
 
+@implementation RCTConvert (UITabBar)
+
+RCT_ENUM_CONVERTER(UITabBarItemPositioning, (@{
+  @"fill" : @(UITabBarItemPositioningFill),
+  @"auto" : @(UITabBarItemPositioningAutomatic),
+  @"center" : @(UITabBarItemPositioningCentered)
+}), UITabBarItemPositioningAutomatic, integerValue)
+
+@end
+
 @implementation RCTTabBarManager
 
 RCT_EXPORT_MODULE()
@@ -25,5 +35,6 @@ RCT_EXPORT_VIEW_PROPERTY(unselectedTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(itemPositioning, UITabBarItemPositioning)
 
 @end