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

om_vaja profile image

Node JS - The Event Loop

Om Vaja -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 81-90 (Part 9)

Probir Sarkar -

aniruddhadak profile image

👨‍💻 My Developer Portfolio: Showcasing My Journey and Projects 💖

ANIRUDDHA ADAK -

codemaker2015 profile image

Building a video insights generator using Gemini Flash

Vishnu Sivan -