title: React-native global variable undefined
body: <p>I am pretty new to React-native so go easy on me! :)</p>
  
  <p>I'm creating an app which uses multiple large json objects for its core data which need to be accessible and updatable across multiple components.  I have achieved this but found that data is only visible across components if I force the object to an array. i.e.</p>
  
  <pre><code>global.a1['XX']=data.movies; // This works fine
  global.a2=data.movies; // This is undefined in other components.
  </code></pre>
  
  <p>It works but I don't understand why so want to understand what's going on before building the app.</p>
  
  <p>Thanks in advance for your help.</p>
  
  <p>Sample code is below:</p>
  
  <p>File: global.js</p>
  
  <pre><code>var a1 = new Object();
  var a2 = new Object();
  module.exports = { a1, a2 }
  </code></pre>
  
  <p>File: select.js</p>
  
  <pre><code>'use strict';
  import React, { Component,PropTypes } from 'react';
  import { Text} from 'react-native';
  import * as global from './global';
  class Select extends Component {
    render() { 
      console.log("a1:"+global.a1['XX'][0].title); // Ok
      console.log("a2:"+global.a2[0].title); // Fails with undefined is not an object
      return ( &lt;Text&gt;{global.a1['XX'][0].title} {global.a2[0].title}&lt;/Text&gt;);
  }}
  export default Select;
  </code></pre>
  
  <p>File: index.android.js</p>
  
  <pre><code>var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
  var PARAMS = '?apikey=7waqfqbprs7pajbz28mqf6vz&amp;page_limit=2';
  import React, { Component,PropTypes } from 'react';
  import { AppRegistry,Text} from 'react-native';
  import * as global from './global';
  import Select from './select';
  
  class test extends Component {
     constructor(props) {
      super(props);
      this.state = {loaded: false};
    }
    componentDidMount() {
      fetch(API_URL+PARAMS)
        .then((response) =&gt; { return response.json() })
        .then((responseData) =&gt; { return responseData; })
        .then((data) =&gt; {
          global.a1['XX']=data.movies;
          global.a2=data.movies;
          this.setState({loaded: true});
        })
        .done();
    }
  
    render() {
      if (!this.state.loaded) { return ( &lt;Text&gt;Loading...&lt;/Text&gt; );}
      console.log("a1:"+global.a1['XX'][0].title); // This works
      console.log("a2:"+global.a2[0].title); // This works
      return ( &lt;Text&gt;&lt;Select/&gt;&lt;/Text&gt; );
    }
  }
  AppRegistry.registerComponent('test', () =&gt; test);
  </code></pre>