[React Native] Reduce Long Import Statements in React Native with Absolute Imports

Posted 2020-11-01 Answer1215

In large React Native projects, it’s common to have long relative import paths like:

import MyComponent from ‘../../../screens/MyScreen/MyComponent‘

With import paths that go up and down the folder hierarchy like that, it can be confusing to figure out which file or folder you’re actually importing, and it generally just looks messy to have several of those import statements at the top of your file.

Instead, we can convert relative import paths to absolute import paths by creating a new package.json file at any level of the folder hierarchy. That package.json file needs to specify a name that you want to call that folder:

{ "name": "screens" }

And then you can begin your import statements with that new module name:

import MyComponent from ‘screens/MyScreen/MyComponent‘

Note that this only works for React Native projects, and not other npm based projects like create-react-app web apps.