Local require() paths for React-Native

Question

I am looking for a convenient way to access files in the root of my application while avoiding require() strings that look like:

require('../../../../myModule')

There are some good solutions out there for Node (https://gist.github.com/branneman/8048520) but I haven't seen a way to use global variables in React Native.

Does anyone have a clean solution to this problem?

Answer 1

Put code below on top of your myModule file:

/**
 * @providesModule myModule
 */

Then you can use require('myModule') in any other files.

Answer 2

You can mark a directory as a package by adding a package.json within the root directory you want to resolve.

e.g:

- app
    - package.json     // ← Add this package.json file
    - config
    - components
    - ... (etc)

package.json should look like this:

{ "name": "app" }

Restart your packager

react-native start --reset-cache

Now you can use the following in all of you project files:

import store from 'app/config/store';
import Button from 'app/components/Button';

You can use this same method across other directories in your project, I don't think this works via require, although image paths seemed work.

---

As noted in the comments, you may lose auto-complete in your editor (VSCode).

For Jetbrains IDE's there are some ongoing tickets here:

• https://youtrack.jetbrains.com/issue/WEB-17254
• https://youtrack.jetbrains.com/issue/WEB-20104#comment=27-1486526
• https://intellij-support.jetbrains.com/hc/en-us/community/posts/205434510-Configure-custom-modules-resolve-folder

This might help with Jetbrains IDE's in the meantime.

// A slash may allow auto-complete to work in your IDE (but will fail to resolve)
import Button from '/app/components/Button'; // Cannot be resolved

Answer 3

Complementing @Tiagojdferreira

You can use his solution with babel-plugin-module-resolver library.

Install with:

npm install --save-dev babel-plugin-module-resolver

Configure .babelrc adding plugins property like this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@src": "MyApp/src",
        "@otherAlias": "MyApp/src/other/path",
      }
    }]
  ]
}

Usage:

require('@src/utils/moment-twitter');

Hope this helps!

Answer 4

You can use global variables in react native, same as node, properties defined on global are accessible globally.

e.g.

global.foo = "blah";
console.log(foo); //logs "blah"

Most of the node solutions in the gist above should work correctly.

One I've used in the past is defining a global function at the top directory level, usually on the first line like

global.rootRequire = function(path) { return require(path); }

Which simply allows deeply nested requires to be from the root, and avoids all of the ../../ business.

However the other comment is true, if this is really an issue, there is probably something structurally deficient with the project.

Answer 5

From Marc Shilling's answer on https://github.com/facebook/react-native/issues/3099

You can use an absolute path on imports/requires:

import {ProximaNovaText} from 'MyApp/src/components'; require('MyApp/src/utils/moment-twitter');

where 'MyApp' is whatever name you registered in your index.ios.js file

Note for VS Code: This works, but be warned that you might lose intellisense and cmd/ctrl + click. Thanks Johan for the info about CS code