- Sotiris Karapostolou
Using Absolute Paths in React Native
Updated: Nov 29, 2020
How to Simplify the require/import path in our project.
You’ve probably had a problem with relative paths being too complicated in React Native. Let’s see what that looks like:

To change the behavior of import to root based paths and be able to setup custom alias for directories install:
$ npm install --save-dev babel-plugin-module-resolver
To use:
Add a babel.config.js file in the root directory of your application and write:
#babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'authmode': './authMode.js',
'test': './test'
//setup custom alias
},
},
],
],
};
};
With everything set up, it is now possible to import your files using the absolute path with your root being the src/ directory. Here's an example below:
Note: The layout is a directory and NOT a file. Check out the bonus to found out how.
import { Card } from 'components/UI/layout';
I still have the feeling that I am missing something.. Oh yeah!!
How to Enable VScode to alias autocompletion.
Add a jsconfig.json (tsconfig.json for TypeScript) file in the root directory of your application and write
#jsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"checkJs": false,
"baseUrl": "src",
"paths": {
"authmode": ["./authMode.js"],
"test": ["test/*"],
//Your custom alias
}
},
"include": ["src", "jsconfig.json"]
}
The custom alias should match the ones that were defined in the babel.config.js file.
Bonus
How to provide easy entry points on a Directory per Component / View pattern.
If you have noticed in my import above I said
import { Card } from 'components/UI/layout';
instead of saying:
import { Card } from 'components/UI/layout/Layout.js';
If we split our components and views to directories of their own, we could end up with something like this which basically groups files according to their respective component:
src/
├── assets
├── components
│ ├── UI/
│ │ ├── layout/
│ │ │ │ ├── Layout.js
│ │ │ │ ├── index.js
│ ├── buttons/
├── screens/
│ ├── auth/
│ │ ├── Auth.js
│ │ ├── index.js
│ ├── catalogue/
├── store/
├── services/
App.js
jsconfig.json
babel.config.js
test/
In each component directory we add an index.js file so we can export it
Here is an example of an named and default export:
#index.js on layout/
export { Container, Card } from './Layout';
&
#index.js on auth/
export { default } from './Auth.js';
Well, I hope that helped! Right to the point! If you like this and want to support me on making more stories you can contact me on Linkedin
#reactNative #javascript #require #import #resolve #alias #babel #module