NavigationBarItem Update

Examples/UIExplorer/NavigatorIOSExample.js

@@ -32,7 +32,7 @@ var EmptyPage = React.createClass({
 
   render: function() {
     return (
-      <View style={styles.emptyPage}>
+      <View style={[styles.emptyPage, this.props.customStyle]}>
         <Text style={styles.emptyPageText}>
           {this.props.text}
         </Text>
@@ -48,7 +48,7 @@ var NavigatorIOSExample = React.createClass({
     title: '<NavigatorIOS>',
     description: 'iOS navigation capabilities',
   },
-
+  counter: 10,
   render: function() {
     var recurseTitle = 'Recurse Navigation';
     if (!this.props.topExampleRoute) {
@@ -82,6 +82,12 @@ var NavigatorIOSExample = React.createClass({
               component: createExamplePage(null, ViewExample),
             });
           })}
+          {this._renderRow('Change rightButtonTitle', () => {
+            this.props.navigator.updateNavBar({rightButtonTitle:(this.counter++) + "",onRightButtonPress:()=>{
+              this.counter = 10;
+              this.props.navigator.updateNavBar({rightButtonTitle:null});
+            }});
+          })}
           {this._renderRow('Custom Right Button', () => {
             this.props.navigator.push({
               title: NavigatorIOSExample.title,
@@ -93,6 +99,30 @@ var NavigatorIOSExample = React.createClass({
               }
             });
           })}
+          {this._renderRow('Custom Title Icon', () => {
+            this.props.navigator.push({
+              titleIcon: require('image!uie_thumb_normal'),
+              component: EmptyPage,
+              rightButtonTitle: 'Cancel',
+              onRightButtonPress: () => this.props.navigator.pop(),
+              passProps: {
+                text: 'This page has a custom title icon in the nav bar',
+              }
+            });
+          })}
+          {this._renderRow('Transparent navigation bar', () => {
+            this.props.navigator.push({
+              titleIcon: require('image!uie_thumb_normal'),
+              component: EmptyPage,
+              navigationBarTransparent: true,
+              rightButtonTitle: 'Cancel',
+              onRightButtonPress: () => this.props.navigator.pop(),
+              passProps: {
+                text: 'This page has a custom title icon and a transparent navigation bar in the nav bar',
+                customStyle: {backgroundColor:"#527FE4"}
+              }
+            });
+          })}
           {this._renderRow('Custom Left & Right Icons', () => {
             this.props.navigator.push({
               title: NavigatorIOSExample.title,

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -19,6 +19,7 @@ var RCTNavigatorManager = require('NativeModules').NavigatorManager;
 var StyleSheet = require('StyleSheet');
 var StaticContainer = require('StaticContainer.react');
 var View = require('View');
+var merge = require('merge');
 
 var requireNativeComponent = require('requireNativeComponent');
 var invariant = require('invariant');
@@ -52,6 +53,7 @@ var NavigatorTransitionerIOS = React.createClass({
 type Route = {
   component: Function;
   title: string;
+  titleIcon?: Object;
   passProps?: Object;
   backButtonTitle?: string;
   backButtonIcon?: Object;
@@ -61,6 +63,8 @@ type Route = {
   rightButtonTitle?: string;
   rightButtonIcon?: Object;
   onRightButtonPress?: Function;
+  navigationBarHidden?: Boolean;
+  navigationBarTransparent?: Boolean;
   wrapperStyle?: any;
 };
 
@@ -185,6 +189,10 @@ var NavigatorIOS = React.createClass({
        * The title displayed in the nav bar and back button for this route
        */
       title: PropTypes.string.isRequired,
+      /**
+       * The title icon displayed in the nav bar for this route
+       */
+      titleIcon: Image.propTypes.source,
 
       /**
        * Specify additional props passed to the component. NavigatorIOS will
@@ -279,6 +287,11 @@ var NavigatorIOS = React.createClass({
      */
     translucent: PropTypes.bool,
 
+    /**
+     * A Boolean value that indicates whether the navigation bar is totaly transparent
+     */
+    navigationBarTransparent: PropTypes.bool,
+
   },
 
   navigator: (undefined: ?Object),
@@ -298,6 +311,7 @@ var NavigatorIOS = React.createClass({
       popToRoute: this.popToRoute,
       popToTop: this.popToTop,
       navigationContext: this.navigationContext,
+      updateNavBar: this.updateNavBar,
     };
     this._emitWillFocus(this.state.routeStack[this.state.observedTopOfStack]);
   },
@@ -336,6 +350,17 @@ var NavigatorIOS = React.createClass({
       updatingAllIndicesAtOrBeyond: 0,
     };
   },
+  updateNavBar: function (route: Route){
+    if (route !== undefined){
+      var current: Route = this.state.routeStack[this.state.routeStack.length - 1] ;
+      this.state.routeStack[this.state.routeStack.length - 1] = merge(current, route);
+    }
+
+    this.setState({
+      updatingAllIndicesAtOrBeyond:this.state.routeStack.length - 1,
+      makingNavigatorRequest: true,
+    });
+  },
 
   _toFocusOnNavigationComplete: (undefined: any),
 
@@ -592,12 +617,15 @@ var NavigatorIOS = React.createClass({
   _routeToStackItem: function(route: Route, i: number) {
     var Component = route.component;
     var shouldUpdateChild = this.state.updatingAllIndicesAtOrBeyond !== null &&
-      this.state.updatingAllIndicesAtOrBeyond >= i;
+      (i >= this.state.updatingAllIndicesAtOrBeyond);
+    var navigationBarHidden = route.navigationBarHidden !== undefined ? route.navigationBarHidden : this.props.navigationBarHidden;
+    var navigationBarTransparent = route.navigationBarTransparent !== undefined ? route.navigationBarTransparent : this.props.navigationBarTransparent;
 
     return (
       <StaticContainer key={'nav' + i} shouldUpdate={shouldUpdateChild}>
         <RCTNavigatorItem
           title={route.title}
+          titleIcon={this._imageNameFromSource(route.titleIcon)}
           style={[
             styles.stackItem,
             this.props.itemWrapperStyle,
@@ -611,12 +639,13 @@ var NavigatorIOS = React.createClass({
           rightButtonIcon={this._imageNameFromSource(route.rightButtonIcon)}
           rightButtonTitle={route.rightButtonTitle}
           onNavRightButtonTap={route.onRightButtonPress}
-          navigationBarHidden={this.props.navigationBarHidden}
           shadowHidden={this.props.shadowHidden}
           tintColor={this.props.tintColor}
           barTintColor={this.props.barTintColor}
           translucent={this.props.translucent !== false}
-          titleTextColor={this.props.titleTextColor}>
+          titleTextColor={this.props.titleTextColor}
+          navigationBarHidden={navigationBarHidden}
+          navigationBarTransparent={navigationBarTransparent} >
           <Component
             navigator={this.navigator}
             route={route}

React/Views/RCTNavItem.h

@@ -10,17 +10,26 @@
 #import <UIKit/UIKit.h>
 
 #import "RCTComponent.h"
+@class RCTNavItem;
+
+@protocol RCTNavItemListener <NSObject>
+
+-(void)update:(RCTNavItem *)itemNav;
+
+@end
 
 @interface RCTNavItem : UIView
 
 @property (nonatomic, copy) NSString *title;
+@property (nonatomic, strong) UIImage *titleIcon;
 @property (nonatomic, strong) UIImage *leftButtonIcon;
 @property (nonatomic, copy) NSString *leftButtonTitle;
 @property (nonatomic, strong) UIImage *rightButtonIcon;
 @property (nonatomic, copy) NSString *rightButtonTitle;
 @property (nonatomic, strong) UIImage *backButtonIcon;
 @property (nonatomic, copy) NSString *backButtonTitle;
 @property (nonatomic, assign) BOOL navigationBarHidden;
+@property (nonatomic, assign) BOOL navigationBarTransparent;
 @property (nonatomic, assign) BOOL shadowHidden;
 @property (nonatomic, strong) UIColor *tintColor;
 @property (nonatomic, strong) UIColor *barTintColor;
@@ -34,4 +43,6 @@
 @property (nonatomic, copy) RCTBubblingEventBlock onNavLeftButtonTap;
 @property (nonatomic, copy) RCTBubblingEventBlock onNavRightButtonTap;
 
+@property (nonatomic, weak) id<RCTNavItemListener> delegate;
+
 @end

React/Views/RCTNavItem.m

@@ -14,17 +14,36 @@ @implementation RCTNavItem
 @synthesize backButtonItem = _backButtonItem;
 @synthesize leftButtonItem = _leftButtonItem;
 @synthesize rightButtonItem = _rightButtonItem;
+@synthesize navigationBarTransparent = _navigationBarTransparent;
+@synthesize title = _title;
+@synthesize titleIcon = _titleIcon;
+
+-(void)setTitleIcon:(UIImage *)titleIcon{
+  _titleIcon = titleIcon;
+  [self.delegate update:self];
+}
+
+-(void)setTitle:(NSString *)title{
+  _title = title;
+  [self.delegate update:self];
+}
+- (void)setNavigationBarTransparent:(BOOL)transparent{
+  _navigationBarTransparent = transparent;
+  [self.delegate update:self];
+}
 
 - (void)setBackButtonTitle:(NSString *)backButtonTitle
 {
   _backButtonTitle = backButtonTitle;
   _backButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (void)setBackButtonIcon:(UIImage *)backButtonIcon
 {
   _backButtonIcon = backButtonIcon;
   _backButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (UIBarButtonItem *)backButtonItem
@@ -51,12 +70,14 @@ - (void)setLeftButtonTitle:(NSString *)leftButtonTitle
 {
   _leftButtonTitle = leftButtonTitle;
   _leftButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (void)setLeftButtonIcon:(UIImage *)leftButtonIcon
 {
   _leftButtonIcon = leftButtonIcon;
   _leftButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (UIBarButtonItem *)leftButtonItem
@@ -93,12 +114,14 @@ - (void)setRightButtonTitle:(NSString *)rightButtonTitle
 {
   _rightButtonTitle = rightButtonTitle;
   _rightButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (void)setRightButtonIcon:(UIImage *)rightButtonIcon
 {
   _rightButtonIcon = rightButtonIcon;
   _rightButtonItem = nil;
+  [self.delegate update:self];
 }
 
 - (UIBarButtonItem *)rightButtonItem

React/Views/RCTNavItemManager.m

@@ -22,13 +22,17 @@ - (UIView *)view
 }
 
 RCT_EXPORT_VIEW_PROPERTY(navigationBarHidden, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(navigationBarTransparent, BOOL)
+
 RCT_EXPORT_VIEW_PROPERTY(shadowHidden, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
 
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleTextColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(titleIcon, UIImage)
+
 
 RCT_EXPORT_VIEW_PROPERTY(backButtonIcon, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(backButtonTitle, NSString)

React/Views/RCTWrapperViewController.h

@@ -10,6 +10,8 @@
 #import <UIKit/UIKit.h>
 
 #import "RCTViewControllerProtocol.h"
+#import "RCTNavItem.h"
+
 
 @class RCTNavItem;
 @class RCTWrapperViewController;
@@ -21,7 +23,7 @@ didMoveToNavigationController:(UINavigationController *)navigationController;
 
 @end
 
-@interface RCTWrapperViewController : UIViewController <RCTViewControllerProtocol>
+@interface RCTWrapperViewController : UIViewController <RCTViewControllerProtocol, RCTNavItemListener>
 
 - (instancetype)initWithContentView:(UIView *)contentView NS_DESIGNATED_INITIALIZER;
 - (instancetype)initWithNavItem:(RCTNavItem *)navItem;