Using Absolute Paths in React Native

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