Expose barStyle for NavigatorIOS and TabBarIOS

Summary:
Exposes barStyle property. Code already existed in RCTConvert, so that’s why there’s no conversion code here.
Closes https://github.com/facebook/react-native/pull/10936

Differential Revision: D4224759

Pulled By: shergin

fbshipit-source-id: b6346940e69933d42a21cd38b9a2fa75d049f8e6

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -429,6 +429,13 @@ var NavigatorIOS = createReactClass({
        */
       barTintColor: PropTypes.string,
 
+      /**
+       * The style of the navigation bar. Supported values are 'default', 'black'.
+       * Use 'black' instead of setting `barTintColor` to black. This produces
+       * a navigation bar with the native iOS style with higher translucency.
+       */
+      barStyle: PropTypes.oneOf(['default', 'black']),
+
        /**
        * The text color of the navigation bar title.
        */
@@ -470,6 +477,13 @@ var NavigatorIOS = createReactClass({
      */
     barTintColor: PropTypes.string,
 
+    /**
+     * The style of the navigation bar. Supported values are 'default', 'black'.
+     * Use 'black' instead of setting `barTintColor` to black. This produces
+     * a navigation bar with the native iOS style with higher translucency.
+     */
+    barStyle: PropTypes.oneOf(['default', 'black']),
+
     /**
      * The default text color of the navigation bar title.
      */

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -26,6 +26,7 @@ class TabBarIOS extends React.Component<{
   tintColor?: $FlowFixMe,
   unselectedItemTintColor?: $FlowFixMe,
   barTintColor?: $FlowFixMe,
+  barStyle?: 'default' | 'black',
   translucent?: boolean,
   itemPositioning?: 'fill' | 'center' | 'auto',
 }> {
@@ -51,6 +52,12 @@ class TabBarIOS extends React.Component<{
      * Background color of the tab bar
      */
     barTintColor: ColorPropType,
+    /**
+     * The style of the tab bar. Supported values are 'default', 'black'.
+     * Use 'black' instead of setting `barTintColor` to black. This produces
+     * a tab bar with the native iOS style with higher translucency.
+     */
+    barStyle: PropTypes.oneOf(['default', 'black']),
     /**
      * A Boolean value that indicates whether the tab bar is translucent
      */
@@ -75,6 +82,7 @@ class TabBarIOS extends React.Component<{
         unselectedItemTintColor={this.props.unselectedItemTintColor}
         tintColor={this.props.tintColor}
         barTintColor={this.props.barTintColor}
+        barStyle={this.props.barStyle}
         itemPositioning={this.props.itemPositioning}
         translucent={this.props.translucent !== false}>
         {

RNTester/js/NavigatorIOSBarStyleExample.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  NavigatorIOS,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View
+} = ReactNative;
+
+class EmptyPage extends React.Component<{
+  text: string,
+}> {
+  render() {
+    return (
+      <View style={styles.emptyPage}>
+        <Text style={styles.emptyPageText}>
+          {this.props.text}
+        </Text>
+      </View>
+    );
+  }
+}
+
+class NavigatorIOSColors extends React.Component<{}> {
+  static title = '<NavigatorIOS> - Custom Bar Style';
+  static description = 'iOS navigation with custom nav bar colors';
+
+  render() {
+    // Set StatusBar with light contents to get better contrast
+    StatusBar.setBarStyle('light-content');
+
+    return (
+      <NavigatorIOS
+        style={styles.container}
+        initialRoute={{
+          component: EmptyPage,
+          title: '<NavigatorIOS>',
+          rightButtonTitle: 'Done',
+          onRightButtonPress: () => {
+            StatusBar.setBarStyle('default');
+            this.props.onExampleExit();
+          },
+          passProps: {
+            text: 'The nav bar is black with barStyle prop.',
+          },
+        }}
+        barStyle="black"
+      />
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  emptyPage: {
+    flex: 1,
+    paddingTop: 64,
+  },
+  emptyPageText: {
+    margin: 10,
+  },
+});
+
+NavigatorIOSColors.external = true;
+
+module.exports = NavigatorIOSColors;

RNTester/js/NavigatorIOSColorsExample.js

@@ -33,7 +33,7 @@ class EmptyPage extends React.Component {
 }
 
 class NavigatorIOSColors extends React.Component {
-  static title = '<NavigatorIOS> - Custom';
+  static title = '<NavigatorIOS> - Custom Colors';
   static description = 'iOS navigation with custom nav bar colors';
 
   render() {

RNTester/js/RNTesterList.ios.js

@@ -93,6 +93,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./NavigatorIOSColorsExample'),
     supportsTVOS: false,
   },
+  {
+    key: 'NavigatorIOSBarStyleExample',
+    module: require('./NavigatorIOSBarStyleExample'),
+    supportsTVOS: false,
+  },
   {
     key: 'NavigatorIOSExample',
     module: require('./NavigatorIOSExample'),
@@ -158,6 +163,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./TabBarIOSExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'TabBarIOSBarStyleExample',
+    module: require('./TabBarIOSBarStyleExample'),
+    supportsTVOS: false,
+  },
   {
     key: 'TextExample',
     module: require('./TextExample.ios'),

RNTester/js/TabBarIOSBarStyleExample.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  StyleSheet,
+  TabBarIOS,
+  Text,
+  View,
+} = ReactNative;
+
+var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+
+class TabBarIOSBarStyleExample extends React.Component<{}> {
+  static title = '<TabBarIOS> - Custom Bar Style';
+  static description = 'Tab-based navigation.';
+  static displayName = 'TabBarIOSBarStyleExample';
+
+  render() {
+    return (
+      <TabBarIOS barStyle="black">
+        <TabBarIOS.Item
+          title="Tab"
+          icon={{uri: base64Icon, scale: 3}}
+          selected>
+          <View style={styles.tabContent}>
+            <Text style={styles.tabText}>Single page</Text>
+          </View>
+        </TabBarIOS.Item>
+      </TabBarIOS>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  tabContent: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  tabText: {
+    color: 'white',
+    margin: 50,
+  },
+});
+
+module.exports = TabBarIOSBarStyleExample;

React/Views/RCTNavItem.h

@@ -29,6 +29,9 @@
 @property (nonatomic, strong) UIColor *barTintColor;
 @property (nonatomic, strong) UIColor *titleTextColor;
 @property (nonatomic, assign) BOOL translucent;
+#if !TARGET_OS_TV
+@property (nonatomic, assign) UIBarStyle barStyle;
+#endif
 
 @property (nonatomic, readonly) UIImageView *titleImageView;
 @property (nonatomic, readonly) UIBarButtonItem *backButtonItem;

React/Views/RCTNavItemManager.m

@@ -56,6 +56,9 @@ RCT_EXPORT_VIEW_PROPERTY(navigationBarHidden, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(shadowHidden, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
+#if !TARGET_OS_TV
+RCT_EXPORT_VIEW_PROPERTY(barStyle, UIBarStyle)
+#endif
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
 
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)

React/Views/RCTTabBar.h

@@ -15,5 +15,8 @@
 @property (nonatomic, strong) UIColor *tintColor;
 @property (nonatomic, strong) UIColor *barTintColor;
 @property (nonatomic, assign) BOOL translucent;
+#if !TARGET_OS_TV
+@property (nonatomic, assign) UIBarStyle barStyle;
+#endif
 
 @end

React/Views/RCTTabBar.m

@@ -149,14 +149,28 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
   _tabController.tabBar.tintColor = tintColor;
 }
 
-- (BOOL)translucent {
+- (BOOL)translucent
+{
   return _tabController.tabBar.isTranslucent;
 }
 
-- (void)setTranslucent:(BOOL)translucent {
+- (void)setTranslucent:(BOOL)translucent
+{
   _tabController.tabBar.translucent = translucent;
 }
 
+#if !TARGET_OS_TV
+- (UIBarStyle)barStyle
+{
+  return _tabController.tabBar.barStyle;
+}
+
+- (void)setBarStyle:(UIBarStyle)barStyle
+{
+  _tabController.tabBar.barStyle = barStyle;
+}
+#endif
+
 - (void)setUnselectedItemTintColor:(UIColor *)unselectedItemTintColor {
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0
   if ([_tabController.tabBar respondsToSelector:@selector(unselectedItemTintColor)]) {

React/Views/RCTTabBarManager.m

@@ -35,6 +35,9 @@ RCT_EXPORT_VIEW_PROPERTY(unselectedTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
+#if !TARGET_OS_TV
+RCT_EXPORT_VIEW_PROPERTY(barStyle, UIBarStyle)
+#endif
 RCT_EXPORT_VIEW_PROPERTY(itemPositioning, UITabBarItemPositioning)
 RCT_EXPORT_VIEW_PROPERTY(unselectedItemTintColor, UIColor)
 

React/Views/RCTWrapperViewController.m

@@ -115,6 +115,9 @@ static UIView *RCTFindNavBarShadowViewInView(UIView *view)
     bar.barTintColor = _navItem.barTintColor;
     bar.tintColor = _navItem.tintColor;
     bar.translucent = _navItem.translucent;
+#if !TARGET_OS_TV
+    bar.barStyle = _navItem.barStyle;
+#endif
     bar.titleTextAttributes = _navItem.titleTextColor ? @{
       NSForegroundColorAttributeName: _navItem.titleTextColor
     } : nil;