React native, passing variables from other files
<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>