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 ***@***.***> 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 <#2028 (comment)>, 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 ***@***.***> 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 <#2028 (comment)>, 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 ***@***.***> 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 <#2028 (comment)>, 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 ***@***.***> написал(а): I tried everything, specially using tintColor as you used on the example, but it didn't work. <Router createReducer={reducerCreate} tintColor='yellow'> — 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 ***@***.***> написал(а): 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 ***@***.***> написал(а): 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={'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 ***@***.***> написал(а): 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)

[ghost]

@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.

[dev-flc]

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: '#3300',
}}

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"