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?
Yes the latest React Native tutorials and examples use the new import syntax. I think most people prefer the new ES6 syntax. However no JS engines implement ES6 modules currently, so it needs to be converted by an ES6 transpiler (e.g. Babel) to require statements.
The most convenient way : Use react-native-document-picker, on selection it will give you a Relative path, something like this content://com.android...... . Pass that Relative path to Stat(filepath) function of the react-native-fetch-blob library. The object will return absolute path.
React Native doesn't deal with dynamic images, only static images. Therefore, you have to front up all the images – you cannot construct the name and path dynamically.
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
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:
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
Put code below on top of your myModule
file:
/**
* @providesModule myModule
*/
Then you can use require('myModule')
in any other files.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With