CODEWITHSUNDEEP
javascriptnode.jsreact-native
user3152131
user3152131

Reputation: 553

react-native to use absolute paths? instead of doing import X from '../../something/X'?

I'm wondering the best way for me to use a full path for my project.

For example, if I am importing a component, I don't want to do import Component from '../components/Component', rather just do import Component from 'app/components/Component';

Can someone help me out?

Upvotes: 16

Views: 14484

Answers (5)

Jhony Fung
Jhony Fung

Reputation: 3020

You can use absolute path by figuring out the name of your app in the package.json name section and then using it in front of your absolute path i.e

import Component from MyApp/components/Component

Here's more information on describing the issue https://github.com/facebook/react-native/issues/3099

Upvotes: 9

Eric Marques
Eric Marques

Reputation: 39

I tried many approaches. The one package.json file per folder sounds a bit too much for me. Also, I had issues with that, as it would start complaining about my import React from 'react' statements.

The best solution I found was this one, based on babel.config.js (if you're using Expo). It's using babel-plugin-module-resolver, a 40KB lib, millions of downloads. With that you'll have to:

  1. Set your babel.config.js to something like:
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['.'],
          extensions: [
            '.ios.ts',
            '.android.ts',
            '.ts',
            '.ios.tsx',
            '.android.tsx',
            '.tsx',
            '.jsx',
            '.js',
            '.json',
          ],
          alias: {
            app: './src/app',
            helpers: './src/helpers',
            ...
          },
        },
      ],
    ],
  };
};

This should be enough to work. But, if you're like me, using typescript, you may also want to please your IDE by preventing it from complaining about the imports.

  1. Edit your tsconfig.json as follows:
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "app/*": ["./src/app/*"],
      "helpers/*": ["./src/helpers/*"],
      ...
    },
    ...
  }
}

I struggled a bit to understand the configuration, because that article is showing app as the base folder, whereas I'm using src. No big deal, just had to translate it to my scenario. My file structure is as follows, btw:

project
 - android
 - ios
 - src
   - app
   - helpers
 index.js

Upvotes: 3

Robert Tirta
Robert Tirta

Reputation: 2911

On top of everyone's answer

You can actually create a package.json anywhere in other folders

For instance you have :

▾ assets/
  ▸ home/
  ▸ png/
    favicon.png
    icon.png
    splash.png
▾ components/
  ▸ display/
  ▸ filters/
  ▸ forms/
  ▾ images/home/
      feedback.js
    index.js
▸ crud/

If you create package.json inside assets folder with the value

{"name": "assets"}

Then you can import in any other JS using assets/png/someimage.png

Also you can use babel module resolver, with the babel.config.js that is included (if you're using expo)

Modify it to this:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            assets: "./assets",
            components: "./components",
            crud: "./crud",
            helpers: "./helpers",
          },
        },
      ],
    ],
  };
};

Upvotes: 1

Michael Scofield
Michael Scofield

Reputation: 389

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

You can use babel-resolver: npmjs.com/package/babel-plugin-module-resolver. May it can help you

Upvotes: 2

Alwaysblue
Alwaysblue

Reputation: 11830

To have an absolute path,

I am considering your package.json is in the root.

Inside, your package.json add a new property name with value whatever you want i.e 

"name": "root"

and then import all your routes relative to that route

import Component from root/components/Component

Upvotes: 10

Related Questions