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 |