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 https://github.com/facebook/react-native/pull/8182

Differential Revision: D3469073

Pulled By: javache

fbshipit-source-id: 2d3e4bad534f92b6e6b24a6b74f2993f3a8c9012

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,

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;
+  component: Function,
-  title: string;
+  title: string,
-  passProps?: Object;
+  titleImage?: Object,
-  backButtonTitle?: string;
+  passProps?: Object,
-  backButtonIcon?: Object;
+  backButtonTitle?: string,
-  leftButtonTitle?: string;
+  backButtonIcon?: Object,
-  leftButtonIcon?: Object;
+  leftButtonTitle?: string,
-  onLeftButtonPress?: Function;
+  leftButtonIcon?: Object,
-  rightButtonTitle?: string;
+  onLeftButtonPress?: Function,
-  rightButtonIcon?: Object;
+  rightButtonTitle?: string,
-  onRightButtonPress?: Function;
+  rightButtonIcon?: Object,
-  wrapperStyle?: any;
+  onRightButtonPress?: Function,
+  wrapperStyle?: any,
 };
 
 type State = {
-  idStack: Array<number>;
+  idStack: Array<number>,
-  routeStack: Array<Route>;
+  routeStack: Array<Route>,
-  requestedTopOfStack: number;
+  requestedTopOfStack: number,
-  observedTopOfStack: number;
+  observedTopOfStack: number,
-  progress: number;
+  progress: number,
-  fromIndex: number;
+  fromIndex: number,
-  toIndex: number;
+  toIndex: number,
-  makingNavigatorRequest: boolean;
+  makingNavigatorRequest: boolean,
-  updatingAllIndicesAtOrBeyond: ?number;
+  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;
+    onFocusRequested: Function,
-    focusEmitter: EventEmitter;
+    focusEmitter: EventEmitter,
   } {
     return {
       onFocusRequested: this._handleFocusRequest,

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`'

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;

React/Views/RCTNavItem.m

@@ -15,6 +15,15 @@
 @synthesize leftButtonItem = _leftButtonItem;
 @synthesize rightButtonItem = _rightButtonItem;
 
+- (UIImageView *)titleImageView
+{
+  if (_titleImage) {
+    return [[UIImageView alloc] initWithImage:_titleImage];
+  } else {
+    return nil;
+  }
+}
+
 - (void)setBackButtonTitle:(NSString *)backButtonTitle
 {
   _backButtonTitle = backButtonTitle;

React/Views/RCTNavItemManager.m

@@ -29,6 +29,7 @@ RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
 
 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)

React/Views/RCTWrapperViewController.m

@@ -123,6 +123,7 @@ static UIView *RCTFindNavBarShadowViewInView(UIView *view)
 
     UINavigationItem *item = self.navigationItem;
     item.title = _navItem.title;
+    item.titleView = _navItem.titleImageView;
     item.backBarButtonItem = _navItem.backButtonItem;
     item.leftBarButtonItem = _navItem.leftButtonItem;
     item.rightBarButtonItem = _navItem.rightButtonItem;