React Native Changing a StackNavigator Header Color

Question

I'm making an application in React Native, and I'm trying to implement a feature that will change the color of the header and then immediately see the change.

I am setting the color of the header to equal the value in a global stylesheet. When I change the color variable in the stylesheet, the menu does not change color until I navigate to a new page.

I have a global style sheet that I import and use everywhere in my app

var globalStyles = Stylesheet.create({
    menuHex: {
        backgroundColor: '#6ed168'
    }
    ...other styles...
})

The menu uses the following code. The Variable 'DrawerStack' on line 2 has all my screens on it, but that's not important. On line 6 I use the variable 'globalStyles.menuHex' that comes from the style sheet in my last code snippet

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerStack },
}, {
    headerMode:'float',
    navigationOptions: ({navigation}) => ({
        headerStyle: globalStyles.menuHex,
        title: 'Application',
        headerTintColor: 'black',
        headerLeft: <TouchableOpacity onPress={() => {
                    navigation.navigate('DrawerToggle')
                    }}>
                       <Image source = {menuIcon}/>
                  </TouchableOpacity>
})

})

I then have this function to change the hex value of the 'menuHex variable'

changetheme(itemValue){
    this.setState({theme: itemValue})
    if(itemValue === 'spring'){
      globalStyles.menuHex = {backgroundColor: '#6ed168'}        
    }
    else if(itemValue === 'summer'){
      globalStyles.menuHex = {backgroundColor: '#ffff00'}
    }
    else if(itemValue === 'autumn'){
      globalStyles.menuHex = {backgroundColor: '#ffa500'}
    }
    else if(itemValue === 'winter'){
      globalStyles.menuHex = {backgroundColor: '#ADD8E6'}

    } 

}

My problem is that when the 'menuHex' variable is changed, the change does not show until after I hit the menu toggle button or until I change pages. I want it so that the color of the header of the menu will be changed when the changetheme() function is complete.

Any help is appreciated

score 1 · Answer 1 · edited Aug 15 '20 at 13:16

1

This is my code. It works for me.

Replace mainColor for your color you needed.

static navigationOptions = {
    title: strings('auth.btnLogin'),
    headerMode:"float",
    headerStyle: {
        backgroundColor: mainColor,
        elevation: null
    },

    headerTitleStyle: {
        fontWeight: '300',
        color: '#ffffff',
        fontSize: 20,
        flex:1,
        textAlign:"center"
    },
    // headerLeft: null
    backTitle: "Back",
    headerTintColor: '#fff',      
}

edited Aug 15 '20 at 13:16

Aman Shekhar

2,719
1
18
29

answered Apr 08 '18 at 18:23

Trọng Nguyễn Công

1,207
1
10
23

So in my case, do you mean: Put that static navigationOptions in a .js file and export it as default. Then nest my DrawerNavigation variable in another Stack Navigator and have that Stack Navigator use that navigationOption (Can't have the DrawerNavigation variable use that navigationOptions since it needs the navigation variable for menu toggle). Or does that not work? – Prem P. Apr 08 '18 at 18:32
Even if that did work, how would I go about changing the mainColor variable in your code? – Prem P. Apr 08 '18 at 18:46
sorry my mistake, you can't set color create by StyleSheet. If you can. It won't show without rerender or setState. But you can call DrawerNavigation in component follow this [link]https://stackoverflow.com/a/42444634/9615416 – Trọng Nguyễn Công Apr 08 '18 at 21:06
1

if you want setColor before navigate this screen or before open this screen. Leave comment, I can help you – Trọng Nguyễn Công Apr 08 '18 at 21:12
Thank you for your response. That made me think about trying to set the color before the content, which I do by creating a loading screen. My response at https://stackoverflow.com/questions/49620766/react-native-actively-changing-a-stacknavigator-header-color/49624476#49624476 Shows what I did, but essentially I created a page that runs a function. That function sets the color of the menu, then navigates to the next page, which in my app's case is the home page – Prem P. Apr 12 '18 at 04:49
To Reduce the Header Height Use ` headerStyle: { height: 50 },` – Mohamed Raza Jul 22 '20 at 03:29

React Native Changing a StackNavigator Header Color

1 Answers1