React-native-router-flux: Color of Back Button Arrow

[luco]

I'm trying to change the color of back button arrow, but still not getting it.

var sceneConfig = {
  navigationBarStyle: {backgroundColor: 'black'},
  headerTitleStyle: {
      color: 'white',
      fontWeight: '500'
  },
  headerBackTitleStyle: {
    color: 'white',
  },
  headerTintColor: 'white',
  cardStyle: {
        backgroundColor: 'white'
  }
}

The color of back button label I had success, but not on arrow.

Tips?

[aksonov]

Please check beta.9 - you have to use navBarTintColor or navBarButtonImageColor or tintColor property.

[luco]

@aksonov Thanks a lot!

[luco]

@aksonov Just updated. Tried all the options, but still not getting it:

var sceneConfig = {
      navigationBarStyle: {'black'},
      headerTitleStyle: {
          color: 'white',
          fontWeight: '500'
      },
      tintColor: '#fff',
      navBarTintColor: '#fff',
      navBarButtonImageColor: '#fff',
      headerTruncatedBackTitle: 'Voltar',
      headerBackTitleStyle: {
        color: 'white',
      },
      cardStyle: {
            backgroundColor: 'white'
      }
    }

[aksonov]

Sorry, did it only for right button.
Check now beta.10

On 14 Jul 2017, at 20:20, Lucas Veiga [e-mail] wrote:

@aksonov https://github.com/aksonov Just updated. Tried all the options, but still not getting it:

var sceneConfig = {
navigationBarStyle: {'black'},
headerTitleStyle: {
color: 'white',
fontWeight: '500'
},
tintColor: '#fff',
navBarTintColor: '#fff',
navBarButtonImageColor: '#fff',
headerTruncatedBackTitle: 'Voltar',
headerBackTitleStyle: {
color: 'white',
},
cardStyle: {
backgroundColor: 'white'
}
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2028#issuecomment-315431076, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpceR2IjoA6iA2_lTFqRtONHV7s4f8ks5sN7F6gaJpZM4OXZLA.

[luco]

@aksonov Getting this error:

[aksonov]

Oops, did typo again. Try beta.11

On 14 Jul 2017, at 22:32, Lucas Veiga [e-mail] wrote:

@aksonov https://github.com/aksonov Getting this error:

https://user-images.githubusercontent.com/246373/28229745-5df22d6c-68ba-11e7-8994-f4114fbfbdca.png
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2028#issuecomment-315460517, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcTwRQrJo4_fepLarzk9XbDKliF1iks5sN9BlgaJpZM4OXZLA.

[luco]

@aksonov Tried all the options and didn't get it. What's the correct param?

[aksonov]

Check Example. I used tintColor

On 14 Jul 2017, at 23:16, Lucas Veiga [e-mail] wrote:

@aksonov https://github.com/aksonov Tried all the options and didn't get it. What's the correct param?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2028#issuecomment-315469900, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcYKmxcceHoTB8zdrGa10hz1ddBF6ks5sN9q2gaJpZM4OXZLA.

[luco]

I tried everything, specially using tintColor as you used on the example, but it didn't work.
<Router createReducer={reducerCreate} tintColor='yellow'>

[aksonov]

Do you see red color for arrow within Example?

16 июля 2017 г., в 22:12, Lucas Veiga [e-mail] написал(а):

I tried everything, specially using tintColor as you used on the example, but it didn't work.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[luco]

Yes, I do. But when I try to apply on my Router, it doesn't work. In fact, it works on my modals, but not on my card stack.

[aksonov]

Could you reproduce it on Example?

16 июля 2017 г., в 22:47, Lucas Veiga [e-mail] написал(а):

Yes, I do. But when I try to apply on my Router, it doesn't work. In fact, it works on my modals, but not on my card stack.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[luco]

On example, it works. But not on my project. I'm setting this way:

  <Router createReducer={reducerCreate} tintColor='white'>

            <Scene key="modal" modal hideNavBar tintColor='white'>
                <Scene key="root" hideNavBar tintColor='white'>
                  <Scene key="tabbar" 
                  tabs 
                  showLabel={false} 
                  tintColor='white'
                  tabBarComponent={this.tabBarElement}
                  headerBackTitle={'Back'}
                 >

As you can see, I tried on every element.

[aksonov]

Have you tried to set backTitle?

16 июля 2017 г., в 22:55, Lucas Veiga [e-mail] написал(а):

On example, it works. But not on my project. I'm setting this way:

        <Scene key="modal" modal hideNavBar tintColor='white'>
            <Scene key="root" hideNavBar tintColor='white'>
              <Scene key="tabbar" 
              tabs 
              showLabel={false} 
              tintColor='white'
              tabBarComponent={this.tabBarElement}
              headerBackTitle={'Voltar'}
              activeTintColor={AppStyles.colors.default}
             >

As you can see, I tried on every element.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[luco]

But backTitle sets the text, right?

EDIT
When I set the backTitle, it works, but text becomes blue:

[aksonov]

Yes, I'm just trying to debug :) maybe you see built in reactnavigation bar but not rnrf one

16 июля 2017 г., в 23:01, Lucas Veiga [e-mail] написал(а):

But backTitle sets the text, right?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[luco]

I thought as well, so I removed react-navigation from my project and it still not working. It's annoying me.

[luco]

I can get the color on inspector:

[luco]

I managed to work. Digging into your code I found that setting navBarButtonColor works for setting the tint color for the back arrow.

Thanks for your attention.

[Norfeldt]

Would you mind sharing a code snippet of the solution? I can't seem to make it work..

import React, { Component } from 'react'
import { AppRegistry, Text } from 'react-native'
import { Router, Stack, Scene } from 'react-native-router-flux'
import Events from './src/components/Events'
import Details from './src/components/Details'

const App = () => (
  <Router
    navigationBarStyle={{ backgroundColor: '#669966' }}
    titleStyle={{
      fontFamily: 'Pacifico-Regular',
      fontSize: 22,
      color: '#003300',
    }}
    navBarButtonColor={{ color: '#003300' }}
  >
    <Stack key="root">
      <Scene init key="events" component={Events} title="Event Expert" />
      <Scene key="details" component={Details} title="Details" />
    </Stack>
  </Router>
)

AppRegistry.registerComponent('EventExpert', () => App)

[lcleite]

@Norfeldt write navBarButtonColor='#003300' instead of navBarButtonColor={{ color: '#003300' }} and it's gonna work

[Daredevll]

navBarButtonColor='#ffffff' does not work for me, tried all the options/variants mentioned above.

[MattyK14]

@Daredevll applying just tintColor worked for me.

[fercho0]

Solution :)

barButtonIconStyle={{ tintColor: 'red' }}

_EXAMPLE_
<Router renderLeftButton={data} barButtonIconStyle={{ tintColor: 'red' }} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.title}> <Scene key="root" > .... ? </Scene> </Router>

[rsp8055]

titleStyle={{
fontFamily: 'Pacifico-Regular', // fontFamily: 'Filson_Soft_W03_Book',
fontSize: 22,
color: '#003300',
}}

fontFamily is not working, why?

[albertoarraco]

Have you imported the font 'Pacifico-Regular' in your project?

[rsp8055]

Yes, I have. I just found that any fontFamily is not applicable to the title of the nav bar.

[kallayyash]

But backTitle sets the text, right?

EDIT
When I set the backTitle, it works, but text becomes blue:

use : headerTintColor="black"