Clean Up the Folder Structure

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

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.

Folder structure

Having all the files in the root app folder is fine when starting a project, but pretty soon it will get out of hand without some structure. Lets add a src folder with a components and styles folder in it.

.
└── src
    ├── components
    └── styles

By adding a package.json file with a single value of name {"name": "components"} allows other files to use absolute imports.

import Header from 'components/Header'

Instead of specifying the relative path from the current file.

import Header from '../../components/Header'

Absolute imports make import statements much cleaner, and allow for really easy refactoring and moving of files, without needing to think about where the current file is now located in relation to the file being imported.

👍It is a good idea to add absolute imports for the styles and components directories.

.
└── src
    ├── components
    │   └── package.json
    └── styles
        └── package.json

🐦   Previous   💼   Next