Add navBarTitleImage prop

docs/API_CONFIGURATION.md

@@ -131,6 +131,9 @@ And every `Scene.type` string literal has a mapped constant in ActionConst, it i
 | hideNavBar | `bool` | false | hides the navigation bar for this scene and any following scenes until explicitly reversed |
 | navigationBarStyle | [`View style`](https://facebook.github.io/react-native/docs/view.html#style) |  | optional style override for the navigation bar |
 | navigationBarBackgroundImage | [`Image source`](https://facebook.github.io/react-native/docs/image.html#source) |  | optional background image for the navigation bar |
+| navigationBarBackgroundImageStyle | [`Image style`](https://facebook.github.io/react-native/docs/image.html#style) |  | optional style override for the navigation bar background image |
+| navigationBarTitleImage | [`Image source`](https://facebook.github.io/react-native/docs/image.html#source) |  | optional image instead of text title for the navigation bar |
+| navigationBarTitleImageStyle | [`Image style`](https://facebook.github.io/react-native/docs/image.html#style) |  | optional style override for the navigation bar title image |
 | navBar | `React.Component` | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference |
 | drawerImage | [`Image source`](https://facebook.github.io/react-native/docs/image.html#source) | `require('./menu_burger.png')` | Simple way to override the drawerImage in the navBar |
 

src/NavBar.js

@@ -47,6 +47,10 @@ const styles = StyleSheet.create({
     width: 180,
     alignSelf: 'center',
   },
+  titleImage: {
+    width: 180,
+    alignSelf: 'center',
+  },
   titleWrapper: {
     marginTop: 10,
     position: 'absolute',
@@ -164,6 +168,9 @@ const propTypes = {
   position: PropTypes.object,
   navigationBarStyle: View.propTypes.style,
   navigationBarBackgroundImage: Image.propTypes.source,
+  navigationBarBackgroundImageStyle: Image.propTypes.style,
+  navigationBarTitleImage: Image.propTypes.source,
+  navigationBarTitleImageStyle: Image.propTypes.style,
   renderTitle: PropTypes.any,
 };
 
@@ -186,6 +193,7 @@ class NavBar extends React.Component {
     this.renderBackButton = this.renderBackButton.bind(this);
     this.renderLeftButton = this.renderLeftButton.bind(this);
     this.renderTitle = this.renderTitle.bind(this);
+    this.renderImageTitle = this.renderImageTitle.bind(this);
   }
 
   renderBackButton() {
@@ -451,6 +459,26 @@ class NavBar extends React.Component {
     );
   }
 
+  renderImageTitle() {
+    const navigationBarTitleImage = this.props.navigationBarTitleImage ||
+      this.state.navigationBarTitleImage;
+    const navigationBarTitleImageStyle = this.props.navigationBarTitleImageStyle ||
+        this.state.navigationBarTitleImageStyle;
+    return (
+      <Animated.View
+        style={[
+          styles.titleWrapper,
+          this.props.titleWrapperStyle,
+        ]}
+      >
+        <Animated.Image
+          style={[styles.titleImage, navigationBarTitleImageStyle]}
+          source={navigationBarTitleImage}
+        />
+      </Animated.View>
+    );
+  }
+
   render() {
     let state = this.props.navigationState;
     let selected = state.children[state.index];
@@ -482,9 +510,20 @@ class NavBar extends React.Component {
       this.props.renderTitle;
     const navigationBarBackgroundImage = this.props.navigationBarBackgroundImage ||
       state.navigationBarBackgroundImage;
+    const navigationBarBackgroundImageStyle = this.props.navigationBarBackgroundImageStyle ||
+      state.navigationBarBackgroundImageStyle;
+    const navigationBarTitleImage = this.props.navigationBarTitleImage ||
+      state.navigationBarTitleImage;
+    let imageOrTitle = null;
+    if (navigationBarTitleImage) {
+      imageOrTitle = this.renderImageTitle();
+    } else {
+      imageOrTitle = renderTitle ? renderTitle(navProps)
+      : state.children.map(this.renderTitle, this);
+    }
     const contents = (
       <View>
-        {renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this)}
+        {imageOrTitle}
         {renderBackButton(navProps) || renderLeftButton(navProps)}
         {renderRightButton(navProps)}
       </View>
@@ -499,7 +538,7 @@ class NavBar extends React.Component {
         ]}
       >
         {navigationBarBackgroundImage ? (
-          <Image source={navigationBarBackgroundImage}>
+          <Image style={navigationBarBackgroundImageStyle} source={navigationBarBackgroundImage}>
             {contents}
           </Image>
         ) : contents}