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.

Practice

1. In a typical React Native project, where should you place your main app code for better organization?

easy

A. Inside the android folder

B. Directly in the root folder

C. Inside a folder named src

D. Inside the ios folder

Solution

1. Step 1: Understand folder roles

   The android and ios folders contain platform-specific native code, not app logic.

2. Step 2: Identify app code location

   App code is best organized inside a src folder to keep it separate and clear.

3. Final Answer:

   Inside a folder named src -> Option C

4. Quick Check:

   App code = src folder [OK]

Hint: App code goes in src folder, not platform folders [OK]

Common Mistakes:

• Putting app code inside android or ios folders
• Keeping all code in the root folder without organization

2. Which of the following is the correct folder name for platform-specific Android code in a React Native project?

easy

A. android

B. android_src

C. AndroidCode

D. androidApp

Solution

1. Step 1: Recall standard folder names

   React Native uses android as the folder name for Android platform code by default.

2. Step 2: Compare options

   Only android matches the exact folder name used by React Native.

3. Final Answer:

   android -> Option A

4. Quick Check:

   Android folder = android [OK]

Hint: Platform folders are named exactly android and ios [OK]

Common Mistakes:

• Using camelCase or underscores in platform folder names
• Confusing app code folder with platform folders

3. Given this React Native project structure:

myApp/
├── android/
├── ios/
├── src/
│   └── App.js
└── package.json

Where will the main app component be located?

medium

A. Directly in the root folder

B. Inside ios folder

C. Inside android folder

D. Inside src folder

Solution

1. Step 1: Analyze folder contents

   The src folder contains App.js, which is the main app component file.

2. Step 2: Understand platform folders

   The android and ios folders hold native code, not React Native components.

3. Final Answer:

   Inside src folder -> Option D

4. Quick Check:

   Main app component = src/App.js [OK]

Hint: Main app code lives in src, not platform folders [OK]

Common Mistakes:

• Assuming main app code is inside android or ios
• Looking for app code in the root folder

4. You see this error when running your React Native app: "Cannot find module './App'". Your project structure is:

myApp/
├── android/
├── ios/
├── app/
│   └── App.js
└── package.json

What is the likely cause?

medium

A. The package.json file is corrupted

B. The app code is inside app folder but should be in src

C. The android folder is missing App.js

D. The ios folder is empty

Solution

1. Step 1: Identify folder mismatch

   The app code is in app folder, but React Native expects it in src or root by default.

2. Step 2: Understand module resolution

   Since the code is not where expected, the bundler cannot find ./App module.

3. Final Answer:

   App code is inside app folder but should be in src -> Option B

4. Quick Check:

   App folder mismatch = module not found error [OK]

Hint: App code folder must match import paths exactly [OK]

Common Mistakes:

• Ignoring folder naming conventions
• Assuming platform folders hold app code
• Not checking import paths

5. You want to add a new feature to your React Native app. Which project structure change helps keep your code organized and maintainable?

hard

A. Create a new folder inside src for the feature components

B. Add all new files directly to the root folder

C. Put new feature files inside the android folder

D. Mix new feature files with existing files in ios folder

Solution

1. Step 1: Understand best practices for organization

   Keeping feature code inside src in dedicated folders helps maintain clarity and separation.

2. Step 2: Avoid mixing platform and app code

   Platform folders android and ios are for native code, not React Native components.

3. Final Answer:

   Create a new folder inside src for the feature components -> Option A

4. Quick Check:

   Organize features inside src for maintainability [OK]

Hint: Keep features inside src in separate folders [OK]

Common Mistakes:

• Adding app code to platform folders
• Cluttering root folder with many files
• Not grouping related files