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 run socket.io in the background on iOS in a React Native app?
  • main.jsbundle, Foundation and Security missing in the project, causing error
  • React-Native - Custom navigation with Navigator component
  • Global Variable / Constant in React Native
  • React native: get current scroll position of scrollview
  • Disable Debugging in Expo For React Native App
  • 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 ?