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 the require () lines:

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

There are some good solutions for Node ( https://gist.github.com/branneman/8048520 ), but I have not seen a way to use global variables in React Native.

Does anyone have a clean solution to this problem?

Answer 1

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

You can use an absolute path to import / requires:

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

where "MyApp" is any name you register in your index.ios.js file

Note for VS code: This works, but warn that you may lose intellisense and cmd / ctrl + click. Thanks Johan for the CS code info.

Answer 2

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

eg:

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

package.json should look like this:

 { "name": "app" } 

Reload the packer

 react-native start --reset-cache 

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

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

You can use the same method for other directories in your project, I don’t think this works through require , although the image paths look working.

---

As noted in the comments, you may lose autocomplete in your editor (VSCode).

There are some current tickets for the Jetbrains IDE 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 can help with the Jetbrains IDE 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

Put the code below on top of the myModule file:

 /** * @providesModule myModule */ 

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

Answer 4

In addition to @Tiagojdferreira

You can use its solution using the babel-plugin-module-resolver library.

Install with:

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

Configure .babelrc to add plugin properties as follows:

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

Using:

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

Hope this helps!

Answer 5

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

eg.

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

Most node solutions in the above view should work correctly.

One that I used in the past is to define a global function at the top level of the directory, usually on the first line, for example

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

What just allows deep investment, it is required that he be from the root and avoid the whole business ../../ .

However, another comment is correct, if this is really a problem, perhaps something structurally does not fit the project.