Go ProSign in

This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    Reduce Long Import Statements in React Native with Absolute Imports

    Chris AchardChris Achard

    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.

    You must be a Member to view code