TabBarIOS itemPositioning - Fixes facebook#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 facebook#4136. Closes facebook#7217 Differential Revision: D3220958 Pulled By: mkonicek fbshipit-source-id: d4bf648b16e71825cd31c06d6b6396479767d19f
keller · May 21, 2016 · a45d025 · a45d025
1 parent 4446e31
commit a45d025
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/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>

diff --git a/React/Views/RCTTabBar.m b/React/Views/RCTTabBar.m
@@ -112,9 +112,9 @@ - (void)reactBridgeDidFinishTransaction
     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 @@ - (void)setTranslucent:(BOOL)translucent {
   _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

diff --git a/React/Views/RCTTabBarManager.m b/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 @@ - (UIView *)view
 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