react-native-absolute-imports

react-native-absolute-imports configures your react-native project to support absolute imports like in web react project

✅ Use import like this

import store from 'store'
import moduleAStore from 'modules/moduleA/store'
import ComponentA from 'modules/moduleA/ComponentA'
import Avatar from 'components/ui/Avatar'

❌ Not this

import store from '../store'
import moduleAStore from '../../../modules/moduleA/store'
import ComponentA from '../../../modules/moduleA/ComponentA'
import Avatar from '../../../../../../components/ui/Avatar'

Installation

from npm

npm install --save-dev react-native-absolute-imports

from yarn

yarn add -D react-native-absolute-imports

Configuring

You need also install babel-plugin-module-resolver

from npm

npm install --save-dev babel-plugin-module-resolver

from yarn

yarn add --dev babel-plugin-module-resolver

Change your babel.config.js file

const setupAbsoluteImports = require('react-native-absolute-imports');

const alias = setupAbsoluteImports({tsEnabled: true, srcDirName: 'src'});

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        alias,
      },
    ],
  ],
};

Run metro with cache clearing

❗Run metro with cache clearing always when you change (renaming,removing, adding) top level directories in your source directory

  yarn start --reset-cache

✅ All done

Properties

Prop	Default	Type	Description
srcDirName	-	string(required)	Specify your source directiory
tsEnabled	false	bool	Specify if your project configured with typescript