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}>