diff --git a/Examples/UIExplorer/Navigator/NavigatorExample.js b/Examples/UIExplorer/Navigator/NavigatorExample.js index ef8001f94c..4a182a5a40 100644 --- a/Examples/UIExplorer/Navigator/NavigatorExample.js +++ b/Examples/UIExplorer/Navigator/NavigatorExample.js @@ -175,4 +175,6 @@ var styles = StyleSheet.create({ } }); +TabBarExample.external = true; + module.exports = TabBarExample; diff --git a/Examples/UIExplorer/NavigatorIOSColorsExample.js b/Examples/UIExplorer/NavigatorIOSColorsExample.js new file mode 100644 index 0000000000..386586f230 --- /dev/null +++ b/Examples/UIExplorer/NavigatorIOSColorsExample.js @@ -0,0 +1,90 @@ +/** + * 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-native'); +var { + NavigatorIOS, + StatusBarIOS, + StyleSheet, + Text, + View +} = React; + +var EmptyPage = React.createClass({ + + render: function() { + return ( + + + {this.props.text} + + + ); + }, + +}); + +var NavigatorIOSColors = React.createClass({ + + statics: { + title: ' - Custom', + description: 'iOS navigation with custom nav bar colors', + }, + + render: function() { + // Set StatusBar with light contents to get better contrast + StatusBarIOS.setStyle(StatusBarIOS.Style['lightContent']); + + return ( + ', + rightButtonTitle: 'Done', + onRightButtonPress: () => { + StatusBarIOS.setStyle(StatusBarIOS.Style['default']); + this.props.onExampleExit(); + }, + passProps: { + text: 'The nav bar has custom colors with tintColor, ' + + 'barTintColor and titleTextColor props.', + }, + }} + tintColor="#FFFFFF" + barTintColor="#183E63" + titleTextColor="#FFFFFF" + /> + ); + }, + +}); + +var styles = StyleSheet.create({ + container: { + flex: 1, + }, + emptyPage: { + flex: 1, + paddingTop: 64, + }, + emptyPageText: { + margin: 10, + }, +}); + +NavigatorIOSColors.external = true; + +module.exports = NavigatorIOSColors; diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 308249572d..7301061773 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -26,7 +26,6 @@ var { TouchableHighlight, View, } = React; -var NavigatorExample = require('./Navigator/NavigatorExample'); var { TestModule } = React.addons; @@ -39,7 +38,8 @@ var COMPONENTS = [ require('./ListViewExample'), require('./ListViewPagingExample'), require('./MapViewExample'), - NavigatorExample, + require('./Navigator/NavigatorExample'), + require('./NavigatorIOSColorsExample'), require('./NavigatorIOSExample'), require('./PickerIOSExample'), require('./ScrollViewExample'), @@ -181,10 +181,8 @@ class UIExplorerList extends React.Component { } _onPressRow(example) { - if (example === NavigatorExample) { - this.props.onExternalExampleRequested( - NavigatorExample - ); + if (example.external) { + this.props.onExternalExampleRequested(example); return; } var Component = makeRenderable(example); diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js index fd90847f05..3babd14095 100644 --- a/Libraries/Components/Navigation/NavigatorIOS.ios.js +++ b/Libraries/Components/Navigation/NavigatorIOS.ios.js @@ -252,6 +252,16 @@ var NavigatorIOS = React.createClass({ */ tintColor: PropTypes.string, + /** + * The background color of the navigation bar + */ + barTintColor: PropTypes.string, + + /** + * The text color of the navigation bar title + */ + titleTextColor: PropTypes.string, + }, navigator: (undefined: ?Object), @@ -554,7 +564,9 @@ var NavigatorIOS = React.createClass({ rightButtonTitle={route.rightButtonTitle} onNavRightButtonTap={route.onRightButtonPress} navigationBarHidden={this.props.navigationBarHidden} - tintColor={this.props.tintColor}> + tintColor={this.props.tintColor} + barTintColor={this.props.barTintColor} + titleTextColor={this.props.titleTextColor}>