React Native Project Folder Structure

Welcome back, did you get the fresh react native app running on your physical device like I asked in my last blog post?! If not, then you are here for other reasons, either way… great!

As this is a fresh install, I wanted to first share my folder structure and slowly talk about each section in upcoming posts. Below is my current react native project structure from root directory:

App/
├── assets/ (moved here from root)
│   ├── fonts/
│   ├── images/
│   └── loading/
├── components/
│   └── icons/
├── config/
├── data/
├── navigation/
├── preload/
├── redux/
│   ├── actions/
│   └── reducers/
└── screens/

That’s it, this keeps everything close to the root and super simple. So now import references look like this:

// global styles
import { colors, utilStyles } from '../config/styles';

// grab auth navigation stack
import { StackAuth } from '../navigation/stackAuth';

And it keeps you from having to go down the rabbit hole of directory structure references (of what not to do) like this:

// this is not optimal
import { deepReference } from '../../../../config/styles';

Things to think about at least, I hope this helped!