Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Clean Up the Folder Structure and Imports in a React Native App with Absolute Paths

    Chris AchardChris Achard
    react-nativeReact Native

    There’s no required folder structure for React Native applications, but we’ll structure our app with some common folder guidelines. Then, we’ll create a package.json file for each sub-folder, which allows us to import components using absolute references like components/Header instead of relative paths like ../../../components/Header.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: There is no defined file or folder structure for React native applications, but our root folder is getting crowded with all of the new files. Let's clean that up by adding some folders.

    Create a new source folder which we'll use to hold all of the source files. Under source, create a components folder. We'll start by moving the header component files into the components folder.

    Then let's make a styles folder inside of source. We can move the header style file into the styles folder. Now, if we want to import and use the header, instead of importing header from ./header, we have to use ./source/components/header.

    In order to avoid the complexity of relative paths, however, we'll first switch to absolute path imports. In the components folder, make a new package.json file. In that package.json, make an object and add a single name key with a value set to components.

    Now, that components folder will act like a module. Back in app.js, we can import directly from components, which cleans up the import significantly. We can do the same thing with the styles folder by adding a new package.json file and setting the name to styles.

    Now, in the header.ios and files, we can import the header directly from styles. Now, we can rerun with the new folders and the cleaned up imports.