React-native-router-flux: Styling the NavBar

My fault, will do documentation later (or someone else could do, it would be really great) For any missed docs, refer to exNavigator docs - Router just passes all params to ExNavigator component. As I can see you could use navigationBarStyle param.

Looks like exNavigator lacks documentation as well :)
https://github.com/exponentjs/ex-navigator/issues/18

:+1:

Does navigationBarStyle work for you?

Added rightButtonStyle, backButtonBarStyle, rightButtonTextStyle as well as renderLeftButton, renderRightButton and renderBackButton to customize nav bar.

navigationBarStyle as a property of Schema is not working properly. It looks like the property is not passed to the ExNavigator. It would be good to make the other ExNavigator properties available too, for sake of completeness: titleStyle, barButtonTextStyle, barButtonIconStyle

navigationBarStyle is property for Router, not for Route. All Router's properties are passed to ExNavigator, you may check sources, it should work out of the box.

There's definitely something funky happening. Try using these Schemas with the example:

            <Schema name="modal" navigationBarStyle={{backgroundColor: 'green'}} sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
            <Schema name="default" navigationBarStyle={{backgroundColor: 'brown'}} sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
            <Schema navigationBarStyle={{backgroundColor: 'blue'}}  name="withoutAnimation"/>
            <Schema navigationBarStyle={{backgroundColor: 'red'}}  name="tab" type="switch" icon={TabIcon} />

Then go to the tab controller and switch to different tabs. How many of them are have red bars?

Nevermind, I misread what you had written. I see that the property goes with Router, not Schema. Sorry.

@aksonov tested it and I got it to work. I'll try and modify the example and do a simple writeup

I have a couple navbar styling requests, if you don't mind.

How can I change the statusBar to white? Also, any way to kill the borderbottom of the navbar? Can I just remove it or make it the same color as the nav.

I would also like to remove the word "home" from the leftText and change all the text in Navbar to white.

Thanks in advance.

Hmm ... I liked how this was done in react-native-redux-router ... there you could pass your own navbar component to every route. Would this be very hard to implement?

@igin You should be able to pass a navbar component into header={} on each router, at least: https://github.com/aksonov/react-native-router-flux#router

@andreasbhansen Yes I think you are right ... It will take a bit of redesign on my side but it should work. Are the routes passed to this header view as props? (sorry that may be off topic for this issue)

Now 2.0 version passed pure Router instance as router prop.

@joshuarotenberg were you able to set the back button style to white? I'm passing backButtonBarStyle as a prop to the route and the router and it doesn't do anything on either.

@joelcloralt PR #118 have to fix it, please check

I can confirm this works. The key thing to notice is that the icon takes tintColor and the text takes color as styles. So for anyone else wanting to customize the NavBar Colors here is what I have:

Until next release, modify ExRouter.js with this commit: https://github.com/aksonov/react-native-router-flux/commit/b5b9b2f8a85285695869e0d21595293304f793fc

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} barButtonTextStyle={styles.barButtonTextStyle} barButtonIconStyle={styles.barButtonIconStyle}>
 //some routes...<Route .... /> 
</Router>

And styles:

navBar: {
    backgroundColor:'#0D47A1',
},
navBarTitle:{
    color:'#FFFFFF'
},
barButtonTextStyle:{
    color:'#FFFFFF'
},
barButtonIconStyle:{
    tintColor:'rgb(255,255,255)'
},

I believe i could close it now.

how to change color of clock and wifi status and i dont know what is that name... :)

  <Scene key="app" navigationBarStyle={{backgroundColor: '#1e2226'}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="counter" component={CounterContainer} title="dsfdsfdsf" />
  </Scene>

@alirezavalizade: you can make that change in xCode http://stackoverflow.com/a/35287747

how to change color of Backbutton in react native router flux ?

Im try backButtonBarStyle but not working...i cant find any solution.tnx for your helps

<Scene key="app"  navigationBarStyle={{backgroundColor: '#1e2226',borderBottomColor:"#1e2226"}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="ProductDetail"  backButtonBarStyle={{color : "#FFF"}} component={ProductDetail} />
  </Scene>

Use barButtonTextStyle and barButtonIconStyle such as the following styles.

barButtonTextStyle: {
    color:'#F16B6F'
},
barButtonIconStyle: {
    tintColor:'#F16B6F'
},

@berkayk that didn't work for me. I had to use backButtonTextStyle in order to change the text color.

Be sure you're looking at the API_CONFIGURATION.md specific to your installed release, e.g.

https://github.com/aksonov/react-native-router-flux/blob/3.30.1/docs/API_CONFIGURATION.md

@joelcloralt any way of exchanging the default back button icon with one of your own?

@robtg4 depends on your version. check API docs

hello, is there any way to style (resize, specifically) the navigationBarBackgroundImage?

Is there any way to change the color of the menu button?

See API docs as mentioned above

You can change the image yes, but there seems to be no way of just changing the color from the default blue. barButtonIconStyle={{ tintColor: '#fff' }} only changes the chevron back button.

Can i only remove the back button?

It seems if I define navigationBarStyle based on state and the state changes, the bar does not update. If I add a key to <Router> and update the key then I can force a change, but this feels dirty. Is there a better way?

Hi there,
"Navbar items"

I want image in title not text. so, when i add image using navigationBarTitleImage property, it is going to top left corner. and tried more to get in center using navigationBarTitleImageStyle property, image is fixed but right and left icons are not visible or miss it's original place.

so, cam i get the proper solution please.

@HubMahesh can you post the code you used for navigationBarTitleImage?

import React from 'react'
import { Actions, Scene, StyleSheet } from 'react-native-router-flux'

const scenes = Actions.create(

    <Scene key="app" navigationBarStyle={{ backgroundColor: '#db342e' }}>
        <Scene key="drawer" component={NavigationDrawerComponentWrapper} open={false} >
            <Scene key="requiredBecauseOfDrawer">
                            <Scene key . . . />
                            //Scenes
            </Scene>
        </Scene>
    </Scene>
)

Can't color the navBar Please Someone help out!

So to be clear if i have some text as my right button on the navbar, I can't change its color, correct?
Why does barButtonIconStyle work but barButtonTextStyle not work?

I attached the image and here is my code:

Router
sceneStyle={styles.sceneStyle}
backButtonTextStyle={styles.backButtonTextStyle}
barButtonIconStyle={styles.barButtonIconStyle}

const styles = {
sceneStyle: {
paddingTop: 65
},
backButtonTextStyle: {
color: '#2227b7'
},
barButtonIconStyle: {
tintColor: '#2227b7'
}
};

@brownmagik352 -- What you're looking for is the prop rightButtonTextStyle that will do it.

@sicdigital thanks for the tip!

so barButtonIconStyle & rightButtonTextStyle got me what I was looking for:

Hello, guys!

Is it possible set styles for NavBar into Component of called Scene, no in an attribute of Scene Tag in Router Tag?

@aksonov Is it possible to change the font in the nav bar title. I already tried

  <Router titleStyle={{ color: 'red', fontFamily: "pfencoresanspro_book" }} headerTitleStyle={{ color: 'blue', fontFamily: "pfencoresanspro_book" }}>

But it isn't working

titleStyle definitely works for me with v4. If it doesn't work please create separate issue for v4 version and give me link to cloned & modified Example so I can reproduce issue.

Looks like issue with React Native as mentioned here.
https://github.com/react-community/react-navigation/issues/542#issuecomment-283663786

No, it works well on my project. Probably you didn't import your fonts properly via XCode

I was able to fix it using fontWeight: "100" as mentioned in the comment. The font I was using was in .otf format and normal so RN was not able to convert it into bold one

I am using react-native-router-flux 4.0.0-beta.17 for my learning project. I need to customize the header. for instance the background color, the title alignment, etc. where can I find a comprehensive document?

@sicdigital hi there, where can I find a comprehensive document about all props?

Is there a way to disable dynamic text in the header? When the user allows dynamic text, I can disable this in the Scenes, but I can't in the header. I would expect allowFontScaling={false} to be able to be applied to the header text.

Just to clarify everything.
I have styled everything in the header this way:

navigationBarStyle={styles.navBar}
titleStyle={styles.navBarTitle}
barButtonTextStyle={styles.barButtonTextStyle}
barButtonIconStyle={styles.barButtonIconStyle}
sceneStyle={styles.routerScene}
rightButtonStyle={styles.rightButton}
rightButtonTextStyle={styles.rightButtonText}
tintColor='white'
headerBackTitle={'Tilbage'}
>

and the styles:

const styles = {
navBar: {
backgroundColor: '#ff8c00',
height: 70
},
navBarTitle: {
color: '#FFFFFF',
fontSize: 20
},
barButtonTextStyle: {
color: 'red'
},
barButtonIconStyle: {
tintColor: 'white'
},
routerScene: {
paddingTop: 80,
},
rightButton: {
marginTop: 5,
marginRight: 5,
backgroundColor: 'white',
borderRadius: 5,
borderWidth: 1,
borderColor: '#00b8ff'
},
rightButtonText: {
color: '#00b8ff'

}

`};

`
This is how it looks

We should be able to pass the router a component for the navbar, IMO. Would love to make the background a gradient (currently using transparent backgroundColor with underlying component on the scene to mimic the appearance we'd like.

Any way to kill the borderbottom of the navbar? Can I just remove it or make it the same color as the nav.

Were you able to fix this?

I got it to work with the following props:

Any way to kill the borderbottom of the navbar? Can I just remove it or make it the same color as the nav.

Were you able to fix this?

also looking for the prop that will allow me to change the color of the bottom border