Requiring Modules in react-native

I’m stuck on a problem in a react-native project. I’m trying to do a general require file, where I export all my modules. After that I would like to require only my “require.js” file to avoid calls like this require(‘../../ModuleName’) in every file.

I have 4 files:

  • How to retrieve number of hours past midnight from an NSDate object?
  • URL encoding iOS NSURL error
  • Google Maps iOS SDK move “My Location” button to bottom left hand corner
  • Proper architecture for iOS connecting to database?
  • push notification in ios
  • How to get the list of friend without opening FBFriendPickerViewController iOS
  • index.ios.js
    /app/home.js
    /app/MyView.js
    /app/require.js
    

    require.js:

    module.exports = {
    
        Home: require('./home'),
        MyView: require('./MyView')
    
    }
    

    in index.ios.js (he modules Home and MyView are getting importet correctly)

    'use strict';
    
    var React = require('react-native');
    var {
        AppRegistry,
        StyleSheet,
        Text,
        View,
    } = React;
    
    var {
        Home,
        MyView
    } = require('./app/require');
    
    class Test_require extends React.Component {
    
        render() {
    
            return(
                <Home />
            );
        }
    
    }
    
    
    
    AppRegistry.registerComponent('Test_require', () => Test_require);
    

    Home.js (the module MyView is not getting importet)

    'use strict';
    
    var React = require('react-native');
    
    var {
        View,
        Text
    } = React;
    
    var {
        MyView
    } = require('./require');
    
    class Home extends React.Component {
    
        render() {
            console.log(MyView);
            return(
                <MyView />
            );
        }
    
    }
    
    module.exports = Home;
    

    In the Home.js the MyView variable is “undefined”. If I want to require a module in a Module, that gets already imported in another file, the variable is undefined.

    Do you guys have any clue why I can do this or is there a better solution for my problem? Thanks for any clue

    2 Solutions Collect From Internet About “Requiring Modules in react-native”

    So I’m posting my own answer in case someone else has the same problem.

    In a syntax like this the required files are getting loaded synchronously. So if the component’s build is faster than requiring files, this problem happens. Either make your components load lazy when you need them or use es6 import syntax like this (import loads asynchronously):

    import React from 'react-native'
    

    cheers!

    Add @providesModule moduleName in your file header comment. And you can import using require(‘moduleName’) other place in your project.
    See this issue.
    BTW, how come that such a amazing feature never documented anywhere ?