Adds backButtonStyle prop

README.md

@@ -102,6 +102,7 @@ The **`<Router \>`** object used to initialize the navigation can take the follo
 - `firstRoute` (required): A React class corresponding to the first page of your navigation
 - `headerStyle`: Apply a StyleSheet to the navigation bar. You'll probably want to change the backgroundColor for example.
 - `titleStyle`: Apply a StyleSheet to the navigation bar titles. Useful for changing the font or text color.
+- `backButtonStyle`: Apply a StyleSheet to the back button. Useful for changing the color.
 - `backButtonComponent`: By default, the navigation bar will display a simple "Back" text for the back button. To change this, you can specify your own backButton component (like in the Twitter app).
 - `rightCorner`: If you have the same occuring action buttons on the right side of your navigation bar (like the Twitter "Compose"-button), you can specify a component for that view.
 - `customAction`: A special callback prop for your action buttons (this can be handy for triggering a side menu for example). The action gets triggered from your custom `leftCorner` or `rightCorner` components by calling `this.props.customAction("someActionName")` from them. It is then picked up like this: `<Router customAction={this.doSomething} />`.
@@ -124,4 +125,3 @@ Questions?
 ---------
 
 If something is unclear or if you just want to say hi, feel free to [follow me on Twitter](https://twitter.com/t4t5)!
-

components/NavBarContainer.js

@@ -43,16 +43,18 @@ var NavBarContainer = React.createClass({
   render: function() {
     return (
       <View style={[styles.navbarContainer, this.props.style]}>
-        <NavBarContent 
-          route={this.state.previousRoute} 
+        <NavBarContent
+          route={this.state.previousRoute}
           backButtonComponent={this.props.backButtonComponent}
+          backButtonStyle={this.props.backButtonStyle}
           rightCorner={this.props.rightCorner}
           titleStyle={this.props.titleStyle}
-          willDisappear="true" 
+          willDisappear="true"
         />
-        <NavBarContent 
-          route={this.props.currentRoute} 
+        <NavBarContent
+          route={this.props.currentRoute}
           backButtonComponent={this.props.backButtonComponent}
+          backButtonStyle={this.props.backButtonStyle}
           rightCorner={this.props.rightCorner}
           titleStyle={this.props.titleStyle}
           goBack={this.goBack}

components/NavBarContent.js

@@ -53,14 +53,14 @@ var NavBarContent = React.createClass({
   },
 
   render() {
-    var transitionStyle = { 
+    var transitionStyle = {
       opacity: this.getTweeningValue('opacity'),
     };
 
     var leftCorner;
     var rightCorner;
     var titleComponent;
-    
+
 
     /**
      * Set leftCorner
@@ -72,7 +72,9 @@ var NavBarContent = React.createClass({
       var LeftCorner = this.props.route.leftCorner;
       leftCornerContent = <LeftCorner toRoute={this.goForward} customAction={this.customAction} />;
     } else if (this.props.route.index > 0) {
-      leftCornerContent = <NavButton onPress={this.goBack} backButtonComponent={this.props.backButtonComponent} />;
+      leftCornerContent = <NavButton onPress={this.goBack}
+        backButtonComponent={this.props.backButtonComponent} 
+        backButtonStyle={this.props.backButtonStyle} />;
     }
 
     leftCorner = (

components/NavButton.js

@@ -23,7 +23,8 @@ var NavButton = React.createClass({
       var BackButton = this.props.backButtonComponent;
       backButton = <View><BackButton /></View>
     } else {
-      backButton = <Text style={styles.navbarText}>Back</Text>
+      var hasBackButtonStyle = this.props.backButtonStyle;
+      backButton = <Text style={[styles.navbarText, hasBackButtonStyle && this.props.backButtonStyle]}>Back</Text>
     }
 
     return (

index.js

@@ -62,8 +62,8 @@ var Router = React.createClass({
     var didStartDrag = function(evt) {
       var x = evt.nativeEvent.pageX;
       if (x < 28) {
-        this.setState({ 
-          dragStartX: x, 
+        this.setState({
+          dragStartX: x,
           didSwitchView: false
         });
         return true;
@@ -85,7 +85,7 @@ var Router = React.createClass({
     };
 
     var Content = route.component;
-    
+
     return (
       <View
         style={[styles.container, this.props.bgStyle]}
@@ -102,7 +102,7 @@ var Router = React.createClass({
         />
       </View>
     )
-    
+
   },
 
   render: function() {
@@ -115,9 +115,10 @@ var Router = React.createClass({
         navigationBar={
           <NavBarContainer
             style={this.props.headerStyle}
-            navigator={navigator} 
+            navigator={navigator}
             currentRoute={this.state.route}
             backButtonComponent={this.props.backButtonComponent}
+            backButtonStyle={this.props.backButtonStyle}
             rightCorner={this.props.rightCorner}
             titleStyle={this.props.titleStyle}
             toRoute={this.onForward}