diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js index 344b0bf78ea..024c0e1a382 100644 --- a/Libraries/Components/Navigation/NavigatorIOS.ios.js +++ b/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. */ diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js index 48a1ffa1c1c..9922f10b0fa 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +++ b/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}> { diff --git a/RNTester/js/NavigatorIOSBarStyleExample.js b/RNTester/js/NavigatorIOSBarStyleExample.js new file mode 100644 index 00000000000..0265f31a517 --- /dev/null +++ b/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 ( + + + {this.props.text} + + + ); + } +} + +class NavigatorIOSColors extends React.Component<{}> { + static title = ' - 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 ( + ', + 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; diff --git a/RNTester/js/NavigatorIOSColorsExample.js b/RNTester/js/NavigatorIOSColorsExample.js index fd345c4af69..62aed681200 100644 --- a/RNTester/js/NavigatorIOSColorsExample.js +++ b/RNTester/js/NavigatorIOSColorsExample.js @@ -33,7 +33,7 @@ class EmptyPage extends React.Component { } class NavigatorIOSColors extends React.Component { - static title = ' - Custom'; + static title = ' - Custom Colors'; static description = 'iOS navigation with custom nav bar colors'; render() { diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js index f8162bd33cf..b34531308b3 100644 --- a/RNTester/js/RNTesterList.ios.js +++ b/RNTester/js/RNTesterList.ios.js @@ -93,6 +93,11 @@ const ComponentExamples: Array = [ module: require('./NavigatorIOSColorsExample'), supportsTVOS: false, }, + { + key: 'NavigatorIOSBarStyleExample', + module: require('./NavigatorIOSBarStyleExample'), + supportsTVOS: false, + }, { key: 'NavigatorIOSExample', module: require('./NavigatorIOSExample'), @@ -158,6 +163,11 @@ const ComponentExamples: Array = [ module: require('./TabBarIOSExample'), supportsTVOS: true, }, + { + key: 'TabBarIOSBarStyleExample', + module: require('./TabBarIOSBarStyleExample'), + supportsTVOS: false, + }, { key: 'TextExample', module: require('./TextExample.ios'), diff --git a/RNTester/js/TabBarIOSBarStyleExample.js b/RNTester/js/TabBarIOSBarStyleExample.js new file mode 100644 index 00000000000..768b85adfb8 --- /dev/null +++ b/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 = ' - Custom Bar Style'; + static description = 'Tab-based navigation.'; + static displayName = 'TabBarIOSBarStyleExample'; + + render() { + return ( + + + + Single page + + + + ); + } +} + +var styles = StyleSheet.create({ + tabContent: { + flex: 1, + alignItems: 'center', + }, + tabText: { + color: 'white', + margin: 50, + }, +}); + +module.exports = TabBarIOSBarStyleExample; diff --git a/React/Views/RCTNavItem.h b/React/Views/RCTNavItem.h index d337b2fc3a9..735d7b0ecbd 100644 --- a/React/Views/RCTNavItem.h +++ b/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; diff --git a/React/Views/RCTNavItemManager.m b/React/Views/RCTNavItemManager.m index bb71c47d4a5..b281938a2cf 100644 --- a/React/Views/RCTNavItemManager.m +++ b/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) diff --git a/React/Views/RCTTabBar.h b/React/Views/RCTTabBar.h index 3129752ffe0..5f866a27ba5 100644 --- a/React/Views/RCTTabBar.h +++ b/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 diff --git a/React/Views/RCTTabBar.m b/React/Views/RCTTabBar.m index b9e186f0ba4..1f6d29d7a09 100644 --- a/React/Views/RCTTabBar.m +++ b/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)]) { diff --git a/React/Views/RCTTabBarManager.m b/React/Views/RCTTabBarManager.m index 833f7566219..471a8759790 100644 --- a/React/Views/RCTTabBarManager.m +++ b/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) diff --git a/React/Views/RCTWrapperViewController.m b/React/Views/RCTWrapperViewController.m index a26dcdfcf25..ba80153c05d 100644 --- a/React/Views/RCTWrapperViewController.m +++ b/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;