React-Native using multiple modules to build the App

Question

I'm a beginner with react native. But not with JavaScript.

In my app.js I would like to do something like that :

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 (<View>{views}</View>);
    }
}

In my mod_menu.js I have :

Class MenuGame extends React.component{
    render(){
        return(<Text>foo</Text>);
    }
}

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'

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.

Can you help me ?

EDIT : source code : https://jsfiddle.net/n7habkt3/

max23_ · Accepted Answer · 2016-11-23 13:52:36Z

2

Edited:

Notice the following in mod_menu_game.js and mod_menu_game.view.js:

var {
  Text
} = React;

This is the cause of your issue. <Text> component should be imported from react-native, not react.

To fix it, replace it (both files) with the following:

import { Text } from 'react-native';

P.S: In mod_menu_game.js, you are returning two components (line 53 and 54) in render(). My suggestion would be wrapping them in a <View> before returning them. Again, please make sure it is imported from react-native.

edited Nov 23, 2016 at 13:52

answered Nov 22, 2016 at 14:57

max23_

6,6894 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Su4p Over a year ago

This is exactly what I did, I'll edit my post and add all the files.

Su4p Over a year ago

The idea was to get the view from mod_menu_game.view.js but because I had some trouble I shorcuted the view.

max23_ Over a year ago

@Su4p Glad that I managed to help. Nothing to be ashamed of, hope you will enjoy learning RN.

Su4p Over a year ago

I always enjoy learning ;). I'm trying to enjoy RN. If I can make RN work as I want it should be fine. I now know that I can. You definitely helped a lot.

Collectives™ on Stack Overflow

React-Native using multiple modules to build the App

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related