From 9d3f5892865562b05c1cca60abd8e8fc85366b3b Mon Sep 17 00:00:00 2001 From: Filipe Monteiro Date: Thu, 16 Feb 2017 14:30:15 -0300 Subject: [PATCH 1/5] Update NavBar to accept backgroundImageStyle --- src/NavBar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/NavBar.js b/src/NavBar.js index 0cf067182..e58d00183 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -164,6 +164,7 @@ const propTypes = { position: PropTypes.object, navigationBarStyle: View.propTypes.style, navigationBarBackgroundImage: Image.propTypes.source, + navigationBarBackgroundImageStyle: Image.propTypes.style, renderTitle: PropTypes.any, }; @@ -499,7 +500,7 @@ class NavBar extends React.Component { ]} > {navigationBarBackgroundImage ? ( - + {contents} ) : contents} From 6127076a8ce5ab9aae569cca07118685ba4b6234 Mon Sep 17 00:00:00 2001 From: Filipe Monteiro Date: Thu, 16 Feb 2017 14:42:52 -0300 Subject: [PATCH 2/5] Update navbar const to receive image style --- src/NavBar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/NavBar.js b/src/NavBar.js index e58d00183..00bd6de3e 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -483,6 +483,8 @@ class NavBar extends React.Component { this.props.renderTitle; const navigationBarBackgroundImage = this.props.navigationBarBackgroundImage || state.navigationBarBackgroundImage; + const navigationBarBackgroundImageStyle = this.props.navigationBarBackgroundImageStyle || + state.navigationBarBackgroundImageStyle; const contents = ( {renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this)} From ae7e050087eaa7545355a722411cea2334a54bde Mon Sep 17 00:00:00 2001 From: Filipe Monteiro Date: Thu, 16 Feb 2017 16:19:11 -0300 Subject: [PATCH 3/5] Adding title image to navigation bar --- src/NavBar.js | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/NavBar.js b/src/NavBar.js index 00bd6de3e..a49d701de 100644 --- a/src/NavBar.js +++ b/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', @@ -165,6 +169,8 @@ const propTypes = { navigationBarStyle: View.propTypes.style, navigationBarBackgroundImage: Image.propTypes.source, navigationBarBackgroundImageStyle: Image.propTypes.style, + navigationBarTitleImage: Image.propTypes.source, + navigationBarTitleImageStyle: Image.propTypes.style, renderTitle: PropTypes.any, }; @@ -187,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() { @@ -452,6 +459,24 @@ class NavBar extends React.Component { ); } + renderImageTitle() { + const navigationBarTitleImage = this.props.navigationBarTitleImage || + state.navigationBarTitleImage; + const navigationBarTitleImageStyle = this.props.navigationBarTitleImageStyle || + state.navigationBarTitleImageStyle; + return ( + + + + + ) + } + render() { let state = this.props.navigationState; let selected = state.children[state.index]; @@ -485,9 +510,11 @@ class NavBar extends React.Component { state.navigationBarBackgroundImage; const navigationBarBackgroundImageStyle = this.props.navigationBarBackgroundImageStyle || state.navigationBarBackgroundImageStyle; + const navigationBarTitleImage = this.props.navigationBarTitleImage || + state.navigationBarTitleImage; const contents = ( - {renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this)} + {navigationBarTitleImage ? this.renderImageTitle() : (renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this))} {renderBackButton(navProps) || renderLeftButton(navProps)} {renderRightButton(navProps)} @@ -502,7 +529,7 @@ class NavBar extends React.Component { ]} > {navigationBarBackgroundImage ? ( - + {contents} ) : contents} From a1dffdb628be954f3f08213ee1dbc5adb92ba88e Mon Sep 17 00:00:00 2001 From: Filipe Monteiro Date: Thu, 2 Mar 2017 08:45:14 -0300 Subject: [PATCH 4/5] Fix build --- src/NavBar.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/NavBar.js b/src/NavBar.js index a49d701de..cca7cb14c 100644 --- a/src/NavBar.js +++ b/src/NavBar.js @@ -49,7 +49,7 @@ const styles = StyleSheet.create({ }, titleImage: { width: 180, - alignSelf: 'center' + alignSelf: 'center', }, titleWrapper: { marginTop: 10, @@ -461,9 +461,9 @@ class NavBar extends React.Component { renderImageTitle() { const navigationBarTitleImage = this.props.navigationBarTitleImage || - state.navigationBarTitleImage; + this.state.navigationBarTitleImage; const navigationBarTitleImageStyle = this.props.navigationBarTitleImageStyle || - state.navigationBarTitleImageStyle; + this.state.navigationBarTitleImageStyle; return ( - - + - ) + ); } render() { @@ -512,9 +514,16 @@ class NavBar extends React.Component { 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 = ( - {navigationBarTitleImage ? this.renderImageTitle() : (renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this))} + {imageOrTitle} {renderBackButton(navProps) || renderLeftButton(navProps)} {renderRightButton(navProps)} From 18a52198b1a41aa203818173efd4b0d07d73ecb2 Mon Sep 17 00:00:00 2001 From: Filipe Monteiro Date: Thu, 2 Mar 2017 09:26:08 -0300 Subject: [PATCH 5/5] Providing docs about navigation bar title image --- docs/API_CONFIGURATION.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/API_CONFIGURATION.md b/docs/API_CONFIGURATION.md index 65110cbba..3216df6de 100644 --- a/docs/API_CONFIGURATION.md +++ b/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 |