Project structure overview in React Native - Deep Dive

Overview - Project structure overview

What is it?

A project structure overview in React Native shows how the files and folders are organized in a mobile app project. It helps developers find and manage code easily. This structure includes places for app code, assets like images, and configuration files. Understanding it makes building and maintaining apps simpler.

Why it matters

Without a clear project structure, code becomes messy and hard to fix or improve. Developers waste time searching for files or accidentally break things. A good structure saves time, reduces bugs, and helps teams work together smoothly. It also makes adding new features faster and less stressful.

Where it fits

Before learning project structure, you should know basic React Native concepts like components and navigation. After this, you can learn about state management, testing, and deployment. Project structure is a foundation that supports all these advanced topics.

Mental Model

Core Idea

A well-organized project structure is like a tidy toolbox where every tool has its place, making building and fixing things faster and easier.

Think of it like...

Imagine your app project as a kitchen. The project structure is how you arrange your pots, pans, and ingredients in cabinets and drawers. If everything is in the right spot, cooking is smooth and fun. If not, you waste time searching and get frustrated.

ProjectRoot
├── src
│   ├── components
│   ├── screens
│   ├── navigation
│   ├── assets
│   └── utils
├── android
├── ios
├── node_modules
├── App.js
├── package.json
└── README.md

Build-Up - 7 Steps

1

Foundation

Basic folders and files explained

Concept: Learn the main folders and files in a React Native project and their roles.

The root folder contains important files like package.json (lists dependencies) and App.js (main app code). The android and ios folders hold platform-specific code. The src folder is where your app's JavaScript code lives, organized into components, screens, and assets.

Result

You can identify where to put new code or assets and understand what each folder does.

Knowing the purpose of each folder helps you avoid putting code in the wrong place, which keeps the project clean.

2

Foundation

Role of components and screens folders

Concept: Understand the difference between components and screens in app structure.

Components are small reusable pieces of UI, like buttons or headers. Screens are full pages or views the user sees, like a login screen or home screen. Keeping them separate helps organize code by size and purpose.

Result

You can create new UI parts in components and build app pages in screens, making code easier to manage.

Separating components and screens prevents clutter and makes it easier to reuse UI parts across the app.

3

Intermediate

Using navigation and assets folders

Concept: Learn how navigation and assets folders support app structure.

The navigation folder holds code that controls moving between screens, like stack or tab navigators. The assets folder stores images, fonts, and other media used in the app. Organizing these separately keeps code and resources tidy.

Result

You can add new screens and media without mixing them into code folders, improving clarity.

Keeping navigation logic separate helps manage app flow, and assets in one place make updates easier.

4

Intermediate

Why utils and helpers matter

Concept: Understand the purpose of utility functions and helper files.

Utils or helpers folders contain small functions used across the app, like formatting dates or validating input. Placing them in one folder avoids repeating code and keeps main code focused on UI and logic.

Result

You can reuse common functions easily and keep your code DRY (Don't Repeat Yourself).

Centralizing helpers reduces bugs and makes updates faster since you change code in one place.

5

Intermediate

Platform-specific folders explained

Concept: Learn why android and ios folders exist and what goes inside.

These folders contain native code and configuration for each platform. For example, Android uses Java/Kotlin files, and iOS uses Swift/Objective-C. React Native links your JavaScript code to these native parts to run on devices.

Result

You understand where to add native features or fix platform-specific issues.

Knowing platform folders helps when you need to customize or debug native behavior beyond JavaScript.

6

Advanced

Scaling project structure for large apps

🤔Before reading on: do you think one flat folder for all components works well for big apps? Commit to yes or no.

Concept: Learn how to organize code when your app grows big and complex.

Large apps split code into feature-based folders inside src, grouping components, screens, and utils by feature. For example, a 'Profile' folder contains all profile-related code. This reduces confusion and improves team collaboration.

Result

Your app stays organized and easier to maintain as it grows.

Understanding scalable structure prevents messy codebases and supports teamwork in bigger projects.

7

Expert

Monorepos and multi-package structures

🤔Quick: do you think a single React Native project can contain multiple apps or packages? Commit to yes or no.

Concept: Explore advanced setups where multiple apps or shared libraries live in one repository.

Monorepos use tools like Yarn Workspaces or Nx to manage multiple React Native apps and shared code in one place. This helps share code, keep versions consistent, and simplify dependency management across projects.

Result

You can build complex ecosystems with shared components and libraries efficiently.

Knowing monorepos unlocks powerful workflows for large teams and multiple related apps.

Under the Hood

React Native projects combine JavaScript code with native platform code. The JavaScript runs inside a special engine (JavaScriptCore) and communicates with native modules through a bridge. The project structure separates concerns so JavaScript and native code coexist without confusion, enabling smooth app building and running.

Why designed this way?

This structure evolved to balance flexibility and clarity. Early React Native projects mixed code, causing confusion. Separating folders by role and platform helps developers focus on their part without breaking others. It also supports cross-platform development by isolating native code.

ProjectRoot
├── src (JavaScript code)
│   ├── components (UI pieces)
│   ├── screens (pages)
│   ├── navigation (app flow)
│   ├── assets (images, fonts)
│   └── utils (helpers)
├── android (native Android code)
├── ios (native iOS code)
├── node_modules (dependencies)
└── config files (package.json, App.js)

Myth Busters - 4 Common Misconceptions

Quick: Is it okay to put all your app code in one big folder? Commit to yes or no.

Common Belief: Putting all code files in one folder is simpler and easier to manage.

Reality: A flat structure becomes confusing and hard to maintain as the app grows.

Why it matters: Without clear separation, developers waste time finding files and risk breaking unrelated parts.

Quick: Do you think the android and ios folders contain JavaScript code? Commit to yes or no.

Common Belief: All app code, including platform-specific parts, is written in JavaScript inside android and ios folders.

Reality: android and ios folders contain native code in Java/Kotlin and Swift/Objective-C, not JavaScript.

Why it matters: Misunderstanding this leads to confusion when debugging or adding native features.

Quick: Can you freely mix assets like images inside your components folder? Commit to yes or no.

Common Belief: It's fine to put images and fonts inside the components folder for convenience.

Reality: Assets should be in a dedicated folder to keep code and resources separate.

Why it matters: Mixing assets with code makes the project messy and harder to update or optimize.

Quick: Does a bigger app always need a more complex folder structure? Commit to yes or no.

Common Belief: Simple folder structures work well no matter how big the app is.

Reality: Large apps require feature-based or modular structures to stay manageable.

Why it matters: Ignoring this leads to tangled code and slows down development and collaboration.

Expert Zone

1

Some teams use a 'domain-driven' folder structure that groups code by business domain rather than technical role, improving team ownership.

2

The choice between flat and nested structures affects build times and developer experience, especially in large projects.

3

Monorepos require careful dependency and version management to avoid conflicts and ensure smooth builds.

When NOT to use

Avoid complex multi-package or monorepo structures for small or simple apps; they add unnecessary overhead. Instead, use a simple flat or feature-based structure. Also, don't mix native code inside src; keep platform code isolated.

Production Patterns

In real apps, teams often combine feature-based folders with shared components and utilities. Navigation is centralized for easier updates. Assets are optimized and sometimes split by platform. Monorepos are common in companies managing multiple apps sharing code.

Connections

Software Architecture

Project structure is a practical example of software architecture principles applied to mobile apps.

Understanding project structure helps grasp how software architecture organizes code for maintainability and scalability.

Version Control Systems

A clear project structure makes using Git or other version control tools easier and reduces merge conflicts.

Knowing how to organize files helps teams collaborate smoothly and track changes effectively.

Library Management

Project structure works closely with dependency management tools like npm or Yarn to keep external code organized.

Understanding structure helps manage libraries and avoid dependency issues in mobile projects.

Common Pitfalls

#1 Mixing all code and assets in one folder

Wrong approach:

src/
App.js
Button.js
logo.png
HomeScreen.js

Correct approach:

src/
components/
Button.js
screens/
HomeScreen.js
assets/
logo.png

Root cause:

Not separating code by type leads to clutter and confusion.

#2 Editing native code inside src folder

Wrong approach:

src/
android/
MainActivity.java
ios/
AppDelegate.swift

Correct approach:

android/
MainActivity.java
ios/
AppDelegate.swift
src/
(JavaScript code only)

Root cause:

Misunderstanding platform folder roles causes mixing of native and JS code.

#3 Using a flat structure for a large app

Wrong approach:

src/
Button.js
Header.js
ProfileScreen.js
SettingsScreen.js
utils.js
api.js

Correct approach:

src/
features/
profile/
ProfileScreen.js
profileUtils.js
settings/
SettingsScreen.js
settingsUtils.js
components/
Button.js
Header.js

Root cause:

Ignoring app growth leads to unmanageable codebases.

Key Takeaways

A clear project structure organizes code and assets into meaningful folders, making development easier.

Separating components, screens, navigation, assets, and utils keeps the project clean and maintainable.

Platform-specific code lives outside the main JavaScript source to handle native features properly.

As apps grow, adopting feature-based or modular structures prevents chaos and supports teamwork.

Advanced setups like monorepos help manage multiple apps and shared code efficiently in large organizations.