Make React Native Import from root
While writing React Native applications, we often need to import components from other parts of the application, by default, we have to use relative import, and if you have a large codebase with many customized components, you’ll end up with a lot of path imports like import ../../../../<some_path_to_component>/component/<some_component>
Some tutorials like this one talk about using package like babel-plugin-root-import, but I didn’t get it working with Expo, which is the recommended way of working with React Native, instead, I found a simple way to achieve the same result by using babel-plugin-module-resolver.
To make it work with Expo, add the following code to babel.config.js, here app alias is the name you want to call for the root path.
and to make TypeScript happy:
With these changes, now you can keep the annoying relative path dots from polluting your codebase!
