React Native Absolute imports — made easy for beginners.
Absolute imports help to simplify the paths and better organize the project as it grows. Also with absolute imports, it’s easier to copy-paste the code with imports into another file in the project and not have to tinker with import paths. 😆
When the project’s folder structure is complex, we are going to have long relative imports in the project like this:
import Input from ‘../../../components/form/input’;
It can be pretty hard to refactor and looks messy. The solution is to convert relative imports to absolute imports.
Step 1 — Install babel-plugin-module-resolver
 plugin
$ npm install --save-dev babel-plugin-module-resolver
Or
$ yarn add --dev babel-plugin-module-resolver
Step 2 — Update babel.config.js
Add the following code snippet in babel.config.js
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
'@app': './src',
},
},
],
],
}
Note:Â @app
 is an alias one can give whatever one wants.
Step 3 — Setup jsconfig.json
 or tsconfig.json
Using JavaScript
Create/open jsconfig.json
 file (in the root directory of the project) and add baseUrl
 and paths
 setting inside compilerOptions
 as shown in the snippet below:
{
"compilerOptions": {
"baseUrl": ".",
"paths" : {
"@app/*": ["src/*"]
}
}
}
Using TypeScript
If you’re using TypeScript in React Native project, update tsconfig.json
 file (in the root directory of the project) and add the same setting inside compilerOptions
 as JavaScript.
{
"compilerOptions": {
"baseUrl": ".",
"paths" : {
"@app/*": ["src/*"]
}
}
}
Step 4 — Implement Absolute Import
Absolute imports setting is now successfully configured with src
 folder as a custom base directory and we can import an input component located at src/components/form/input.js
 from like so:
import Input from '@app/components/form/input';
Happy Learning! Feel free to give this article a clap and follow to stay up to date with more articles!