DEV Community

Cover image for Using Absolute Paths in React Native
Lawson
Lawson

Posted on

Using Absolute Paths in React Native

#reactnative #javascript #beginners #react

Expectation 

// Hmmm
import {add} from '../../../../../../../utils';

// Awesome!
import {add} from 'utils';
Enter fullscreen mode Exit fullscreen mode

How ?

Step 1: Install babel-plugin-module-resolver

npm install --save-dev babel-plugin-module-resolver
// or
yarn add --dev babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

Step 2: Add the following code to babel.config.js file.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        root: ["./src"],
      }
    ],
  ]
};
Enter fullscreen mode Exit fullscreen mode

Step 3: Create file jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mshsayket profile image

Laravel 11 Generate and Read Sitemap XML File Tutorial

Saddam Hossain -

vaultdeveloper profile image

Event loop visualiser for lerners

Vault Developer -

msnmongare profile image

Safaricom Daraja API: Authorization API Guide for Access Tokens

Sospeter Mong'are -

mikeyoung44 profile image

Uncovering AI Hacking Tactics: New Honeypot Monitors Large Language Model Threats

Mike Young -