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>