React-native-router-flux: How to change color of menu burger icon

[phuongpt]

Version

Tell us which versions you are using:

• react-native-router-flux v3.36.0
• react-native v0.37.0

Actual behaviour

• I tried leftButtonIconStyle={{tintColor: '#fff'}} or leftButtonStyle={{tintColor: '#fff'}} but not successful
• it works from source code

          menuIcon = (
            <Image
              source={buttonImage}
              //style={leftButtonStyle}
              style={{tintColor:'#fff'}}
            />
          );

[Naoto-Ida]

I can't recreate this.

• react-native-router-flux v3.35.0
• react-native v 0.34.1

<Scene
  key='showPost'
  component={PostContainer}
  leftButtonIconStyle={{tintColor: '#fff'}}
   queries={{viewer: () => Relay.QL`query { viewer }`}}
/>

This shows a white back arrow as the left icon when I push to the component.

[phuongpt]

@Naoto-Ida I have no problem with back button. I'm getting issue with side menu icon

[MattyK14]

Yeah the back button is no issue, anyone solve the menu button?

[ddeanto]

The default blue burger icon is transparent png file in the codebase https://github.com/aksonov/react-native-router-flux/blob/master/src/menu_burger.png

However, there doesn't seem to be a supported way to provide a tintColor to the drawerImage. (tintColor changes the color of all the non-transparent pixels to the tintColor). However, according to the docs, Navigation Bar only has a "drawerImage" prop, which only takes an image source and NOTHING else.

Our problems would be solved if the Navigation Bar had a "drawerImageStyle" prop, or a "drawerImageTintColor" prop, or, even a way where we could pass in an entire Image tag.

Sorry if I am not making sense, I am a newbie

[MattyK14]

I changed mine to white using:

barButtonIconStyle={{ tintColor: 'white' }}

[ddeanto]

@MattyK14 barButtonIconStyle={{ tintColor: 'white' }} is not working for me. Can you paste a bit more of your code? Thanks!

[MattyK14]

@ddeanto

const RouterComponent = () => {
return (
<Router
barButtonIconStyle={{ tintColor: 'white' }}
navigationBarStyle={{ backgroundColor: 'black', opacity: 0.65 }}
panHandlers={null}
{...this.props}
>
<Scene key="auth">
<Scene
sceneStyle={{ paddingTop: 40 }}
key="loginPage" component={LoginForm}
title="Login" hideNavBar
/>
</Scene>
<Scene key="main" component={NavigationDrawer} initial/* skips login for debug */>
<Scene
key="home"
leftButtonIconStyle={{ tintColor: 'white' }}
titleStyle={{ color: 'white' }}
>

EDIT: It's actually the leftButtonIconStyle setting the color sorry!

[ddeanto]

@Mattk14 thanks! What is working for me is placing leftButtonIconStyle={{ tintColor: 'white' }} in the Scene with the drawerImage NOT placing barButtonIconStyle={{ tintColor: 'white' }} in <Router>

[MattyK14]

I believe this issue can be closed.

[phuongpt]

thanks @ddeanto @Mattk14! it works for me.