1.0.5 • Published 2 years ago
react-native-absolute-imports v1.0.5
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 |