title: React Native header clickable with asyncStorage
body: <p>Essentially, I have a Cloud Icon in the upper right hand corner of my app screen that when I click it I want it to edit an <code>AsyncStorage</code> variable in my application. And I am trying to get that variable to change the style of the <code>&lt;Icon&gt;</code> class.</p>
  
  <p>To do this, I am trying to make it be a clickable element but I don't know how to transfer this <code>onClick</code> to a variable that each screen file sees.</p>
  
  <p>Right now, the icon style ie based on <code>navigation.state.params.cloud</code> but that is only established on <code>ComponentDidMount()</code> in the each screen file.</p>
  
  <p>Does anyone have any suggestions on how to accomplish this?</p>
  
  <p>My React-Native app is set up like so:</p>
  
  <h2>index.js</h2>
  
  <pre><code>import { AppRegistry } from 'react-native';
  import App from './app/config/app';
  
  AppRegistry.registerComponent('MobApp', () =&gt; App);
  </code></pre>
  
  <h2>/config/app.js</h2>
  
  <pre><code>import React from 'react';
  import { TouchableOpacity, ActivityIndicator, AsyncStorage, Button, StatusBar, StyleSheet, View, Text, Image } from 'react-native';
  import { StackNavigator, SwitchNavigator } from 'react-navigation'; // Version can be specified in package.json
  import { configureFontAwesomePro } from "react-native-fontawesome-pro";
  import Icon from "react-native-fontawesome-pro";
  
  configureFontAwesomePro();
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  import AuthLoadingScreen from '../screens/AuthLoadingScreen';
  import MainScreen from '../screens/main';
  import SettingsScreen from '../screens/settings';
  
  const cloudLogo = async function() {
    let cloud = await AsyncStorage.getItem('cloud');
      cloud = cloud === 'true';
      cloud = !cloud;
  
      await AsyncStorage.setItem('cloud', cloud.toString())
      return cloud;
  }
  
  var navo = ({ navigation }) =&gt; {
  
    return {
      headerStyle: { backgroundColor:"#fff"},
      headerTitle: (&lt;View style={{flex: 1, flexDirection: 'row', justifyContent: 'center' }}&gt;&lt;Image style={{ width:25, height: 25, marginTop: 3, marginRight: 5}} source={require('../images/logo.png')}/&gt;&lt;Text style={{ color:"#3F61E7", fontSize: 26, fontWeight:"600" }}&gt;MyCompany&lt;/Text&gt;&lt;/View&gt;),
      headerRight: (&lt;TouchableOpacity activeOpacity={0.8} onPress={ async () =&gt; {
  
          let cloud = await AsyncStorage.getItem('cloud');
          cloud = cloud === 'true';
          cloud = !cloud;
  
          await AsyncStorage.setItem('cloud', cloud.toString())
          console.log((await syncUtil.getLocal()).cloud)
  
        } } style={{ marginRight:15 }}&gt;
          &lt;Icon name="cloud" type={ typeof navigation.state.params == 'undefined' ? "solid" : (navigation.state.params.cloud ? "solid" : "light") } color="#3F61E7" size={30} /&gt;
        &lt;/TouchableOpacity&gt;)
    } 
  }
  
  const AppStack = StackNavigator({ 
    Home: { screen: MainScreen, navigationOptions: navo },
    Settings: { screen: SettingsScreen, navigationOptions: navo },
  });
  
  export default SwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack
    },
    {
      initialRouteName: 'AuthLoading', 
    }
  );
  </code></pre>