Added the ability to set an image title in the NavigatorIOS

Summary: This pull request adds support for setting an image title in `NavigatorIOS`. It sets the `titleView` property of `UINavigationItem`. Added an example into `UIExplorer` <img width="487" alt="ex" src="https://cloud.githubusercontent.com/assets/289640/16147578/3d552606-3484-11e6-9a26-1e8c113ace03.png"> The code follows the same style as the rest of `RCTNavItem` and `RCTWrapperViewController`. Closes #8182 Differential Revision: D3469073 Pulled By: javache fbshipit-source-id: 2d3e4bad534f92b6e6b24a6b74f2993f3a8c9012
facebook · Jun 23, 2016 · 9bd80cb · 9bd80cb
1 parent 39f524d
commit 9bd80cb
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 25 deletions.
diff --git a/Examples/UIExplorer/NavigatorIOSExample.js b/Examples/UIExplorer/NavigatorIOSExample.js
@@ -1,4 +1,11 @@
 /**
+ * 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.
  *
@@ -65,6 +72,13 @@ const NavigatorIOSExamplePage = React.createClass({
               component: createExamplePage(null, ViewExample),
             });
           })}
+          {this._renderRow('Custom title image Example', () => {
+            this.props.navigator.push({
+              title: 'Custom title image Example',
+              titleImage: require('./relay.png'),
+              component: createExamplePage(null, ViewExample),
+            });
+          })}
           {this._renderRow('Custom Right Button', () => {
             this.props.navigator.push({
               title: NavigatorIOSExample.title,

diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js
@@ -24,7 +24,6 @@ var View = require('View');
 var invariant = require('fbjs/lib/invariant');
 var logError = require('logError');
 var requireNativeComponent = require('requireNativeComponent');
-var resolveAssetSource = require('resolveAssetSource');
 
 var TRANSITIONER_REF = 'transitionerRef';
 
@@ -52,30 +51,31 @@ var NavigatorTransitionerIOS = React.createClass({
 });
 
 type Route = {
-  component: Function;
-  title: string;
-  passProps?: Object;
-  backButtonTitle?: string;
-  backButtonIcon?: Object;
-  leftButtonTitle?: string;
-  leftButtonIcon?: Object;
-  onLeftButtonPress?: Function;
-  rightButtonTitle?: string;
-  rightButtonIcon?: Object;
-  onRightButtonPress?: Function;
-  wrapperStyle?: any;
+  component: Function,
+  title: string,
+  titleImage?: Object,
+  passProps?: Object,
+  backButtonTitle?: string,
+  backButtonIcon?: Object,
+  leftButtonTitle?: string,
+  leftButtonIcon?: Object,
+  onLeftButtonPress?: Function,
+  rightButtonTitle?: string,
+  rightButtonIcon?: Object,
+  onRightButtonPress?: Function,
+  wrapperStyle?: any,
 };
 
 type State = {
-  idStack: Array<number>;
-  routeStack: Array<Route>;
-  requestedTopOfStack: number;
-  observedTopOfStack: number;
-  progress: number;
-  fromIndex: number;
-  toIndex: number;
-  makingNavigatorRequest: boolean;
-  updatingAllIndicesAtOrBeyond: ?number;
+  idStack: Array<number>,
+  routeStack: Array<Route>,
+  requestedTopOfStack: number,
+  observedTopOfStack: number,
+  progress: number,
+  fromIndex: number,
+  toIndex: number,
+  makingNavigatorRequest: boolean,
+  updatingAllIndicesAtOrBeyond: ?number,
 }
 
 type Event = Object;
@@ -185,6 +185,11 @@ var NavigatorIOS = React.createClass({
        */
       title: PropTypes.string.isRequired,
 
+      /**
+       * If set, the image will appear instead of the text title
+       */
+      titleImage: Image.propTypes.source,
+
       /**
        * Specify additional props passed to the component. NavigatorIOS will
        * automatically provide "route" and "navigator" components
@@ -404,8 +409,8 @@ var NavigatorIOS = React.createClass({
   },
 
   getChildContext: function(): {
-    onFocusRequested: Function;
-    focusEmitter: EventEmitter;
+    onFocusRequested: Function,
+    focusEmitter: EventEmitter,
   } {
     return {
       onFocusRequested: this._handleFocusRequest,

diff --git a/Libraries/ReactIOS/verifyPropTypes.js b/Libraries/ReactIOS/verifyPropTypes.js
@@ -27,9 +27,11 @@ function verifyPropTypes(
   if (!viewConfig) {
     return; // This happens for UnimplementedView.
   }
-  var componentName = componentInterface.name ||
+  var componentName =
     componentInterface.displayName ||
+    componentInterface.name ||
     'unknown';
+
   if (!componentInterface.propTypes) {
     throw new Error(
       '`' + componentName + '` has no propTypes defined`'

diff --git a/React/Views/RCTNavItem.h b/React/Views/RCTNavItem.h
@@ -14,6 +14,7 @@
 @interface RCTNavItem : UIView
 
 @property (nonatomic, copy) NSString *title;
+@property (nonatomic, strong) UIImage *titleImage;
 @property (nonatomic, strong) UIImage *leftButtonIcon;
 @property (nonatomic, copy) NSString *leftButtonTitle;
 @property (nonatomic, strong) UIImage *rightButtonIcon;
@@ -27,6 +28,7 @@
 @property (nonatomic, strong) UIColor *titleTextColor;
 @property (nonatomic, assign) BOOL translucent;
 
+@property (nonatomic, readonly) UIImageView *titleImageView;
 @property (nonatomic, readonly) UIBarButtonItem *backButtonItem;
 @property (nonatomic, readonly) UIBarButtonItem *leftButtonItem;
 @property (nonatomic, readonly) UIBarButtonItem *rightButtonItem;

diff --git a/React/Views/RCTNavItem.m b/React/Views/RCTNavItem.m
@@ -15,6 +15,15 @@ @implementation RCTNavItem
 @synthesize leftButtonItem = _leftButtonItem;
 @synthesize rightButtonItem = _rightButtonItem;
 
+- (UIImageView *)titleImageView
+{
+  if (_titleImage) {
+    return [[UIImageView alloc] initWithImage:_titleImage];
+  } else {
+    return nil;
+  }
+}
+
 - (void)setBackButtonTitle:(NSString *)backButtonTitle
 {
   _backButtonTitle = backButtonTitle;

diff --git a/React/Views/RCTNavItemManager.m b/React/Views/RCTNavItemManager.m
@@ -29,6 +29,7 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleTextColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(titleImage, UIImage)
 
 RCT_EXPORT_VIEW_PROPERTY(backButtonIcon, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(backButtonTitle, NSString)

diff --git a/React/Views/RCTWrapperViewController.m b/React/Views/RCTWrapperViewController.m
@@ -123,6 +123,7 @@ - (void)viewWillAppear:(BOOL)animated
 
     UINavigationItem *item = self.navigationItem;
     item.title = _navItem.title;
+    item.titleView = _navItem.titleImageView;
     item.backBarButtonItem = _navItem.backButtonItem;
     item.leftBarButtonItem = _navItem.leftButtonItem;
     item.rightBarButtonItem = _navItem.rightButtonItem;