title: React native, passing variables from other files
body: <p>I am new to react native and I am having trouble passing variables from one file to another.</p>
  
  <p>module.exports works great when passing classes. 
  However is there any way in native to pass variables from file to file by exporting?</p>
  
  <p>In the example below, one file (button) is creating an array of random numbers and I want to access that array in another file (genreSelector). Similarly I am trying to pass an array of strings from (genre to genreSelector).</p>
  
  <p>I cant find an example of how to do this so I am under the impression that it isn't possible. How should I be passing information if this isn't possible?
  Do I need to have all the functions in my main and call them from within the child classes, if so how do I reference the function of the parent class rather than its own this.function?</p>
  
  <p>So main is rendered in index.android.js and it all works great. Bar of course the passing of arrays from file to file. I tried using states but still cant access the variables as desired. </p>
  
  <p>Apologies for such a basic question asked in such a complicated way.</p>
  
  <pre><code>//this is button.js
  import React, { Component } from 'react';
  import {
      Alert,
    AppRegistry,
    StyleSheet,
    Text,
    TouchableHighlight,
    View
  } from 'react-native';
  import styles from '../styles/styles.js';
  
   let rNumbers = [1,2,3];
  var Button = React.createClass({
  
      rNumberGen: function(){
          let rNumbers = [Math.random(), Math.random(), Math.random()];
      },
  
      render: function(){
          return(
                  &lt;TouchableHighlight onPress={this.rNumberGen} style={styles.center}&gt;
                          &lt;Text style={styles.button}&gt;Generate!&lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
              );
      }
  
  });
  
  module.exports = rNumbers;
  module.exports = Button;
  </code></pre>
  
  <p>//this is genreSelector</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      Alert,
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  import{
      genre1,
      genre2,
      genre3
  } from './genres.js';
  import rNumbers from './button.js';
  import styles from '../styles/styles.js';
  
   let a = rNumbers.toString();
   Alert.alert('This is', a);
  
  var Genre = React.createClass({
  
      render: function(){
  
          let genre = this.props.selected;
          return(
                  &lt;View style={styles.genre}&gt;
                      &lt;Text style={styles.center}&gt;{genre}&lt;/Text&gt;
                  &lt;/View&gt;
              );
      }
  });
  
  module.exports = Genre;
  </code></pre>
  
  <p>//This is main.js</p>
  
  <pre><code> import React, { Component } from 'react';
   import {
     AppRegistry,
     StyleSheet,
     Text,
     View
   } from 'react-native';
   import
       Button
    from './button.js';
   import
       Genre
       // genres
    from './genreSelector.js';
   import
       styles
    from '../styles/styles.js';
  
  
  class Main extends React.Component {
    render(){
      return(
          &lt;View style={styles.container}&gt;
              &lt;Text style={styles.title}&gt;Genre Genrerator&lt;/Text&gt;
  
              &lt;Text style={[styles.h2, styles.h21]}&gt;I am listening to&lt;/Text&gt;
              &lt;View style={styles.genreContainer}&gt;
                   &lt;Genre selected='{genres[1]}'/&gt;
                   &lt;Genre selected='{genres[2]}'/&gt;
                   &lt;Genre selected='{genres[3]}'/&gt;
              &lt;/View&gt;
              &lt;Text style={styles.h2}&gt;You filthy casual&lt;/Text&gt;
              &lt;Button/&gt;
        &lt;/View&gt;
      );
    }
  }
  
   module.exports = Main;
  </code></pre>