React Native Actively Changing a StackNavigator He

Question

UPDATE:

I'm not making progress with the previous question, so I'm changing it hoping I could find another answer

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 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. I tried running this.forceUpdate(), which did not work

Any more help is appreciated

Answer 1

You have defined setStyle() as an async function (so it returns a Promise), you why not simply do something like this:

try {
  await setStyle()
  {initialize stacks}
  AppRegistry.registerComponent(...);
} catch(error) {...}

Answer 2

Apologies for making another question similar to this. My previous question was how to get Async Storage to block before continuing, because it wasn't before. Below was my code.

import globalStyles from './src/style'

setStyle = async () => {
    try{
      const itemValue =  await AsyncStorage.getItem('app_theme')
      if(itemValue == null){
        AsyncStorage.setItem('app_theme', 'spring')
        globalStyles.menuHex = {backgroundColor: '#6ed168'}
      }
      else{
        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'}
        } 
      }
    }
    catch(error){
      console.log(error)
    }
};

What I ended up doing was creating a "Loading Page," which ran the function above on startup and then after it was done setting the style.menuHex variable, it changed to the Home

class Loading extends Component{
  constructor(props){
    super(props);
    this.setStyle(props);
  }
  async setStyle(props){
      try{
        const itemValue =  await AsyncStorage.getItem('app_theme')
        console.log(itemValue)
        if(itemValue == null){
          AsyncStorage.setItem('app_theme', 'spring')
          globalStyles.menuHex = {backgroundColor: '#6ed168'}
        }
        else{
          this.changeTheme(itemValue)
        }

      }
      catch(error){
        console.log("yup error:\n")

        console.log(error)
      }
      props.navigation.navigate('Home') //***important line. I navigate after done setting variable
  };

  render(){
    return(
      <View>
          <Text>
            Loading
          </Text>
      </View>     
    )
  }
}

This may not be what some people are looking for, but this method allowed me to fix my original problems.