React Native Project Structure

Project structure means the way files and folders are organized inside an application.

A good structure makes it easier to find components, screens, assets, services and configuration files.

React Native Project
        ↓
Files + Folders
        ↓
Organized Application

my-first-app/
├── app/
├── assets/
├── node_modules/
├── package.json
├── app.json
└── ...

This is a simplified structure. The exact files depend on the Expo template and version used to create the project.

In Expo projects using file-based routing, the app directory can contain the application's routes and screens.

app/
├── index.tsx
├── about.tsx
└── profile.tsx

Each route file can represent a screen or route in the application.

In a file-based routing project, an index file commonly represents the default route for a directory.

app/
└── index.tsx

For example, the index route can be used as the initial screen of an application.

Application screens can be organized into route files or separate screen components.

app/
├── index.tsx
├── login.tsx
├── profile.tsx
└── settings.tsx

This can represent screens such as Home, Login, Profile and Settings.

The assets folder is commonly used for static resources such as images, icons and fonts.

assets/
├── images/
├── icons/
└── fonts/

Keeping static resources organized makes them easier to manage.

Images such as logos, profile pictures and application graphics can be stored inside the assets directory.

assets/
└── images/
    ├── logo.png
    ├── banner.png
    └── profile.png

A local image can then be loaded by the React Native Image component.

import {
    Image
} from "react-native";

<Image
    source={require("./assets/images/logo.png")}
    style={{
        width: 100,
        height: 100
    }}
/>

The exact relative path depends on the location of the component file.

The node_modules directory contains packages installed for the project.

node_modules/
    ↓
Installed Packages
    ↓
Application Dependencies

You normally should not edit files inside node_modules manually.

The package.json file is one of the most important files in a JavaScript or React Native project.

It can contain:

• Project name
• Project version
• Scripts
• Dependencies
• Development dependencies
• Project metadata

Dependencies are packages required by the application.

{
    "dependencies": {
        "react": "...",
        "react-native": "..."
    }
}

The exact versions depend on the project.

npm projects can contain a package-lock.json file.

It records detailed dependency information used by npm to reproduce the project's installed dependency tree.

Expo projects can use app.json for application configuration.

{
    "expo": {
        "name": "My App",
        "slug": "my-app"
    }
}

Configuration can include application information and platform-related settings.

Expo projects can also use JavaScript or TypeScript configuration files when dynamic configuration is needed.

app.config.js

This allows configuration to be generated using JavaScript logic.

As an application grows, reusable UI components can be placed in a components folder.

components/
├── Header.js
├── Button.js
├── Card.js
└── StudentCard.js

Components can then be imported into screens.

In projects that do not use route files as the main screen organization, a screens folder can contain screen components.

screens/
├── HomeScreen.js
├── LoginScreen.js
├── ProfileScreen.js
└── SettingsScreen.js

The exact structure depends on the navigation approach used by the project.

A services folder can contain reusable code for communicating with backend APIs.

services/
├── api.js
├── authService.js
└── studentService.js

This keeps API-related code separate from UI components.

Custom React Hooks can be organized in a hooks folder.

hooks/
├── useAuth.js
├── useFetch.js
└── useStudents.js

Custom Hooks help reuse stateful logic between components.

Context providers can be organized into a context folder.

context/
├── AuthContext.js
├── ThemeContext.js
└── AppContext.js

This can help organize shared application state.

A utils folder can contain reusable helper functions.

utils/
├── validation.js
├── formatDate.js
└── constants.js

Utility functions should generally perform small reusable tasks.

Larger applications may organize reusable style definitions in a styles folder.

styles/
├── colors.js
├── spacing.js
└── typography.js

This can help maintain consistent design across the application.

Application-wide constant values can be stored separately.

constants/
├── colors.js
├── routes.js
└── config.js

For example, route names or reusable configuration values can be defined in one place.

React Native Community CLI projects normally contain an android directory.

MyApp/
└── android/

This directory contains the native Android project and its configuration.

Expo projects can also generate or use native directories when a native development workflow requires them.

React Native Community CLI projects normally contain an ios directory.

MyApp/
└── ios/

This directory contains the native iOS project and its configuration.

Native iOS development requires macOS and Apple's development tools.

React Native uses Metro as its JavaScript bundler.

A project may contain a metro.config.js file when custom Metro configuration is required.

metro.config.js

Most beginners do not need to modify this file.

React Native projects can use Babel for transforming JavaScript and related source code.

Depending on the project template, you may see a file such as:

babel.config.js

The exact configuration depends on the project and tooling.

my-app/
├── app/
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
│
├── components/
├── screens/
├── services/
├── hooks/
├── context/
├── utils/
├── styles/
├── constants/
│
├── package.json
├── app.json
└── ...

This is an example organizational structure. You should adapt it to the requirements of your application rather than creating every folder from the beginning.

Screen
   ↓
Components
   ↓
Hooks / Context
   ↓
Services
   ↓
Backend API
   ↓
Database

For example, a Student screen can use a StudentCard component, call a custom Hook, use an API service and display the returned data.

student-app/
├── app/
│   ├── index.tsx
│   ├── login.tsx
│   ├── students.tsx
│   └── profile.tsx
│
├── components/
│   ├── StudentCard.tsx
│   └── Header.tsx
│
├── services/
│   └── studentService.ts
│
├── hooks/
│   └── useStudents.ts
│
├── assets/
│   └── images/
│
├── package.json
└── app.json

This structure separates screens, reusable components, API logic, Hooks and assets.

A well-organized React Native project can follow this general relationship:

Application
     ↓
Routes / Screens
     ↓
Reusable Components
     ↓
Hooks / Context
     ↓
Services / API
     ↓
Utilities
     ↓
Assets / Styles
     ↓
Configuration
     ↓
React Native Runtime
     ↓
Android / iOS

The most important rule is to keep related code organized and make each part of the application easy to locate and maintain.