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

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -

martygo profile image

👀 How Check Memory Leaks in React?⚠️🚨🚨

Martins Gouveia -

rajnandan1 profile image

Built a cli for browser

Raj Nandan Sharma -

abhay_yt_52a8e72b213be229 profile image

Render Props Pattern in React: A Comprehensive Guide

Abhay Singh Kathayat -