React-Native using multiple modules to build the App
<p>I'm a beginner with react native. But not with JavaScript.</p>

<p>In my app.js I would like to do something like that :</p>

<pre><code>export default class App extends Component {
    constructor(props){
        super(props);
        //init a lot of modules
        this.all_modules = [];
        var MenuGame = require ('/modules/mod_menu/mod_menu.js');
        this.all_modules.push(new MenuGame());
    }
    render(){
        //render all modules
        var views = [];
        views = this.all_modules.map(function(module){
            return module.render();
        });
        return (&lt;View&gt;{views}&lt;/View&gt;);
    }
}
</code></pre>

<p>In my mod_menu.js I have :</p>

<pre><code>Class MenuGame extends React.component{
    render(){
        return(&lt;Text&gt;foo&lt;/Text&gt;);
    }
}
</code></pre>

<p>When I run this code I get the following error Element type is invalid : expected a string or a class/function but got undefined check the render method of 'App'</p>

<p>The aim is to have a kind of controller App.js who is responsible for the life cycle of the app. App.js just need to init all modules and call render on them. Each module will build the App.</p>

<p>Can you help me ?</p>

<p><strong>EDIT : source code</strong> : <a href="https://jsfiddle.net/n7habkt3/" rel="nofollow noreferrer">https://jsfiddle.net/n7habkt3/</a></p>