Ospfolio

Two-way to make absolute import path in React Native

September 3, 2019 • ☕ 3 min read

In the time of writing this article, I am using React Native v0.60.5 with Typescript.

When your project grow bigger and bigger, no matter how beautiful the project structure was. The path ‘../../../../’ folder reference problem does not seem to be solved. You may see somewhere else using package.json to solved it.

Option 1: Package.json

I will brief about package.json which can be solved the folder reference problem. If you’re fimillar with it. You can skip this section.

Here is our project structure.

android/
ios/
src/
├── assets
│   ├── images/
│   │   ├── logo.png
│   ├── package.json
├── modules
│   ├── so/
│   │   ├── depth/
│   │   │   ├── down/
│   │   │   │   ├── DepthScreen.tsx
├── App.tsx

In our package.json file inside assets folder should have sample code below:

// package.json

{
  "name": "@assets"
}

In DepthScreen.tsx,if we don’t use package.json, we may do import like below:

// DepthScreen.tsx

const LogoImage = require('../../../../assets/images/logo.png')

by using package.json, we can do import like this:

// DepthScreen.tsx

const LogoImage = require('@assets/images/logo.png')

Option 2: Babel Plugin Root Import

As you can see, package.json also can solved our problem so far. But in this section, we will use Babel plugin (babel-plugin-root-import) to add the opportunity to use import and require with root based paths.

It’s much more convenience than using package.json. I am also writing a comparison between package.json and babel-plugin-root-import which you can find in the section below.

  • install

open up your terminal and run this command below:

// terminal

npm install babel-plugin-root-import --save-dev

or

yarn add -D babel-plugin-root-import
  • config

modify babel.config.js in your React Native project like below:

// babel.config.js 

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
}

As you can see my folder structure above, src folder has all source codes . Therefore, I use src folder as root folder. You can choose any folder in your project. If you want to custom root path prefix, Check Docs here

  • typescript (optional)

If you’re not typescript user, you don’t need this section. I use typescript on my React Native project, so I should set root folder reference to typescript configuration.

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",   // all paths are relative to the baseUrl
    "paths": {
      "~/*": ["*"]        // resolve any `~/foo/bar` to `<baseUrl>/foo/bar`
    }
  },
  ...
}

it worked

it worked! 🙂

Comparison

  • unncessary file

unncessary

  • confusing npm module

confusing

  • IntelliSense suport

VSCode support

In Closing

Now that you know pretty much everything about import path based on root in RN project. Does it make sense? Did I miss something? (I haven’t run out of paper yet!)

Thanks for reading.