title: Accessing global state when using Context API
body: <p>I have used context API for state management which worked successfully to access data in a component.The data being used is currency prices for Foreign Exchange Pairs. This data keeps on updating after an interval of 1000ms as its being fetched from an API. How do i access this data in another component in the same manner as i receive it in the first component. Passing the prices data as arguments in the <code>navigation.navigate('CreateAlertScreen)</code> does not pass the data that keeps updating. Below is the code.</p>
  <p>//HomeScreen</p>
  <pre><code>import React, {useContext} from 'react'
  import { Text, View, ActivityIndicator, ScrollView, TouchableOpacity } from 'react-native'
  import {ListItem, Card, Button, Icon} from 'react-native-elements'
  //import CurrencyPair from '../../CurrencyPair'
  import {firebase} from '../../../firebase/config'
  import {CurrencyContext} from '../../../context/Context'
  
  function HomeScreen({navigation}) {
  
      const currency = useContext(CurrencyContext);
  
  
  return (
          &lt;ScrollView&gt;
      
          &lt;Card&gt;
              &lt;Text style={{textAlign: &quot;center&quot;}}&gt;
                  Welcome
              &lt;/Text&gt;
              &lt;Button title=&quot;Sign Out&quot; type=&quot;outline&quot; onPress ={() =&gt; firebase.auth().signOut()}/&gt;
              &lt;Button title=&quot;My Alerts&quot;  onPress ={() =&gt;navigation.navigate(&quot;AlertScreen&quot;) }/&gt;
              
          &lt;/Card&gt;
    
          &lt;View&gt;
              {currency.data.prices &amp;&amp; currency.data.prices.map((prices, index) =&gt; {
                  return (
        &lt;ListItem
          key={index}
          //passing data from HomeScreen to CreateAlert Screen with  the initialized parameters
          onPress = {() =&gt; navigation.navigate('CreateAlertScreen')}
          bottomDivider&gt;
          &lt;ListItem.Content&gt;
              &lt;ListItem.Title&gt;
              {currency.data.prices[index].instrument}        {currency.data.prices[index].closeoutAsk}        {currency.data.prices[index].closeoutBid}
              &lt;/ListItem.Title&gt;
          &lt;/ListItem.Content&gt;
        &lt;/ListItem&gt;     
                  )
              })
  }
          &lt;/View&gt;
         
      &lt;/ScrollView&gt;
  
  
      
  )
  }
  export default HomeScreen
  </code></pre>
  <p>// Context</p>
  <pre><code>import React, {createContext, useState, useEffect}from 'react'
  import {ActivityIndicator} from 'react-native'
  import axios from '../utils/axios'
  
  const CurrencyContext = createContext();
  
  const CurrencyProvider =(props) =&gt; {
      const [data, setData] = useState([])
      const [isLoading, setIsloading] = useState(true)
  
      useEffect(() =&gt; {
          const interval = setInterval(() =&gt; {
              const fetchpairs = async() =&gt; {
                  const results = await axios.get('/v3/accounts/101-004-14328428-002/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
                  setData(results.data)
                  setIsloading(false)
              }
              fetchpairs() 
          },1000)
        }, []);
  
        if(isLoading) {
          return (
              &lt;ActivityIndicator size=&quot;large&quot;/&gt;
          )
      }else
      return (
          &lt;CurrencyContext.Provider
          value={{
              data,
              setData,
              isLoading,
              setIsloading
          }}&gt;
              {props.children}
  
          &lt;/CurrencyContext.Provider&gt;
  
         
      )
  }
  
  export {CurrencyProvider, CurrencyContext}
  </code></pre>
  <p>// CreateAlertScreen</p>
  <pre><code>import React, {useContext,useState} from 'react'
  import { View, Text,TextInput, StyleSheet, Picker, TouchableOpacity, Button, PushNotificationIOS } from 'react-native'
  import {Card, CheckBox } from 'react-native-elements'
  import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
  import {FoodContext} from '../../../context/Context'
  import styles from './styles'
  
  const CreateAlertScreen =()=&gt; {
  
      const create = useContext(FoodContext);
  // hook for the message textinput
      const [message, setMessage] = useState(null)
  
      return (
          &lt;View style={styles.container}&gt;
              
               &lt;KeyboardAwareScrollView
                  style={{ flex: 1, width: '100%' }}
                  keyboardShouldPersistTaps=&quot;always&quot;&gt;
              &lt;Card&gt;
                  &lt;Card.Title&gt;
                      Pair:   {} 
                  &lt;/Card.Title&gt;
                  &lt;Card.Divider/&gt;
                  &lt;Text style={{textAlign:&quot;center&quot;}}&gt;
                 BidPrice: {BidPrice} / AskPrice:{AskPrice}
                  &lt;/Text&gt;
                  &lt;Card.Divider/&gt;
                  &lt;Text style={{textAlign: &quot;center&quot;}}&gt;
                      Alert When : 
                  &lt;/Text&gt;
  
                  &lt;TextInput
            style={styles.textInputStyle}
            placeholder=&quot;Price&quot;
            placeholderTextColor=&quot;#60605e&quot;
            numeric
            keyboardType='decimal-pad'    
          /&gt;
                  &lt;Card.Divider/&gt; 
  
                  &lt;TextInput
                  value={message}
                  onChangeText={(message) =&gt;setMessage(message)}
                  style={styles.input}
                  /&gt;
                  &lt;TouchableOpacity
                  style={styles.button}
                  onPress={() =&gt; navigation.navigate('AlertScreen', {
                      alert: message
                  })}
                  &gt;
                      &lt;Text style={styles.buttonTitle}&gt;CreateAlert&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  
  
              
          &lt;/Card&gt;
          &lt;/KeyboardAwareScrollView&gt;
          &lt;/View&gt;
      )
  }
  
  export default CreateAlertScreen
  </code></pre>