Permalink
Browse files

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 #10936

Differential Revision: D4224759

Pulled By: shergin

fbshipit-source-id: b6346940e69933d42a21cd38b9a2fa75d049f8e6
  • Loading branch information...
jacobp100 authored and facebook-github-bot committed Aug 25, 2017
1 parent 91417ae commit b48149ed94abc5a6f6d452aba35064c416169366
@@ -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.
*/
@@ -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}>
{
@@ -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;
@@ -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() {
@@ -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'),
@@ -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;
View
@@ -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;
@@ -56,6 +56,9 @@ - (UIView *)view
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)
View
@@ -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
View
@@ -149,14 +149,28 @@ - (void)setTintColor:(UIColor *)tintColor
_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)]) {
@@ -35,6 +35,9 @@ - (UIView *)view
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)
@@ -115,6 +115,9 @@ - (void)viewWillAppear:(BOOL)animated
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;

0 comments on commit b48149e

Please sign in to comment.