When working on larger React or React Native projects with deep directory structures, managing imports using relative paths can become cumbersome and error-prone. However, with some simple configurations, you can set up relative paths in your React Native project, making imports more manageable and improving code readability. In this article, we'll explore how to set up and use relative paths effectively.
In this setup, if you want to import the Input component into home.tsx, you would typically use a relative path like this:
As the project grows and the file hierarchy deepens, relative imports can become hard to manage.
Let's see how we can simplify this using relative paths.
Understanding the Relative paths
In React / React Native, relative paths allow you to import modules or components by specifying the path relative to the current file's location. For example, consider the following file structure:As the project grows and the file hierarchy deepens, relative imports can become hard to manage.
Let's see how we can simplify this using relative paths.
Configuring Babel for Relative Paths
To use relative paths, we'll configure Babel to handle module resolution. Babel is a JavaScript compiler that transpiles modern JavaScript code into an older version compatible with most browsers and platforms.Install the required package as Dev dependency
if using NPM
npm install --save-dev babel-plugin-module-resolver
if using Yarn
yarn add --dev babel-plugin-module-resolver
Babel Config
If you have "babel.config.js" file in your root, just open and add the root path of the imports as given in example below
After that update your metro config as well;
Now you are done!.
Now you can import like below. Thanks
Tags:
Moduler imports