React native, passing variables from other files

Question

I am new to react native and I am having trouble passing variables from one file to another.

module.exports works great when passing classes. However is there any way in native to pass variables from file to file by exporting?

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).

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?

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.

Apologies for such a basic question asked in such a complicated way.

//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(
                <TouchableHighlight onPress={this.rNumberGen} style={styles.center}>
                        <Text style={styles.button}>Generate!</Text>
                </TouchableHighlight>
            );
    }

});

module.exports = rNumbers;
module.exports = Button;

//this is genreSelector

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(
                <View style={styles.genre}>
                    <Text style={styles.center}>{genre}</Text>
                </View>
            );
    }
});

module.exports = Genre;

//This is main.js

 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(
        <View style={styles.container}>
            <Text style={styles.title}>Genre Genrerator</Text>

            <Text style={[styles.h2, styles.h21]}>I am listening to</Text>
            <View style={styles.genreContainer}>
                 <Genre selected='{genres[1]}'/>
                 <Genre selected='{genres[2]}'/>
                 <Genre selected='{genres[3]}'/>
            </View>
            <Text style={styles.h2}>You filthy casual</Text>
            <Button/>
      </View>
    );
  }
}

 module.exports = Main;

Answer 1

module.exports = rNumbers;
module.exports = Button;

You are overwriting it by assigning like that. You should use export keyword:

export {rNumbers};
export {Button};

then import like so:

import {rNumbers} from './button.js';
import {Button} from './button.js';

edit: error: expected { after export. Added in