React-native-router-flux: Back button color

Created on 20 Jun 2016 · 14Comments · Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

react-native-router-flux v3.30.0
react-native v0.27.2

Expected behaviour

I'm trying to change the arrow color like the screenshot below. However, I can't set a color on each scene. I can only do it on the root Scene. Am I missing something or it is a bug ?

It works with this code when I'm setting it to the root scene.

<Router >
   <Scene key="root" titleStyle={{ color: 'red' }} barButtonIconStyle={{ tintColor: 'green' }}>
      <Scene key="connexion" component={Connexion}
         hideNavBar={false} title="Connexion" initial={true}/>
      <Scene key="signup" component={Signup} hideNavBar={false}
         title="PageOne" navigationBarStyle={NavBarStyle.bar.darkNavigationBar}
      />
   </Scene>
</Router>

I would like to set each scene style separately (like this code). Is it even possible

<Router >
   <Scene key="root" titleStyle={{ color: 'red' }}>
     <Scene key="connexion" component={Connexion}
       hideNavBar={false} title="Connexion" initial={true}/>
     <Scene key="signup" component={Signup} hideNavBar={false}
       title="PageOne" navigationBarStyle={NavBarStyle.bar.darkNavigationBar}
       barButtonIconStyle={{ tintColor: 'green' }}
      />
    </Scene>
</Router>

Source

Shakarang

Most helpful comment

Would you try the following @Shakarang

<Scene ... leftButtonIconStyle = {{ tintColor:'red'}} />

sercanov on 22 Jun 2016

👍39 🎉1

All 14 comments

In each Scene, you can give backButtonTextStyle={{ ... }}

281330 on 20 Jun 2016

I've tried to add it in the scene with these properties :

color
backgroundColor
tintColor

But it doesn't work..

Shakarang on 21 Jun 2016

Would you try the following @Shakarang

<Scene ... leftButtonIconStyle = {{ tintColor:'red'}} />

sercanov on 22 Jun 2016

👍39 🎉1

You can always drill down into:
node_modules/react-native-router-flux/src/back_chevron.png

and edit "back_chevron.png" however you'd like.

JaiNatha on 1 Jun 2017

Oh sorry, I misread your initial comment, just realized you're trying to set it for each scene.

leftButtonIconStyle={{ tintColor: 'green' }} is indeed the way to go

JaiNatha on 1 Jun 2017

This is not working in my project.

Version
"react": "16.0.0-alpha.12",
"react-native": "^0.46.3",
"react-native-router-flux": "^4.0.0-beta.12"

need to update back Icon color.

indu127pal on 21 Jul 2017

👍5

Same issue, on RNRF 4.0.0-beta.15 is not working leftButtonIconStyle, neither barButtonIconStyle

jaimecorrea on 2 Aug 2017

<Scene
    key="root"
    headerTintColor="#000"
>

This works for me on [email protected]

jordenchang55 on 9 Aug 2017

👍24 ❤8 🎉6

headerTintColor seems correct, but what about size? or, if we want a different back-icon?

Frexuz on 7 Nov 2017

Check here for styling your nav bar.
If you want to change icon, you can use leftButtonImage or renderBackButton prop in scene.

jordenchang55 on 7 Nov 2017

                      <Scene
                        key='HomePage'
                        component={HomePage}
                        renderBackButton={<Icon name='chevron-left' />}
                      />

like this?

renderBackButton is not a function

Update:

renderBackButton={() => <Icon name='chevron-left' />} this renders the arrow correctly, but it doesn't do anything when pressed..

Do we really have to re-implement back functionality ourselves?

Frexuz on 7 Nov 2017

👍1

@Frexuz This is an issue I'm wrestling with now as well. All I want is to use something like a package icon for the navigation buttons, rather than an image or text.

It seems we have to re-implement the on-touch functionality (most likely routing) ourselves for each scene (i.e. onRight/onLeft doesn't do anything if you choose to use renderBackButton or renderRightButton).