How is a React Native project structured?

Question

Accepted Answer

A React Native project has a structure combining **JavaScript/TypeScript code** with **native iOS/Android projects** and configuration. Understanding the structure and key files helps navigate and build React Native apps.

## Key parts of the structure

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## JavaScript ecosystem

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## Organizing your code

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## Why it matters

Understanding how a React Native project is structured is necessary practical knowledge for navigating, building, and organizing React Native apps, so it's useful foundational knowledge.

Knowing the **key parts** — that **App.js/App.tsx is the root component** (the entry point), your **JS/TS code lives in `src/`** (where you spend most of your time), **package.json** manages dependencies and scripts (like any JavaScript project), and the **native `ios/` and `android/` projects** exist (for bare React Native, while Expo manages them) — is necessary to find your way around a React Native project, which combines JavaScript code with native projects.

Understanding the **JavaScript ecosystem** aspect is important: React Native projects use **package.json and npm/yarn** for dependencies (with the huge npm ecosystem available — a major advantage), **Metro** (React Native's bundler), and Babel — reflecting that React Native development is JavaScript development with familiar tooling, valuable for web developers.

Understanding how to **organize code** (structuring `src/` into folders by feature or type — components, screens, navigation, services, hooks, utils, store) reflects good practice for maintainable projects as they grow.

Since working with React Native requires navigating the project structure (JS code plus native projects), managing dependencies via package.json and npm, understanding the bundler, and organizing code, and since this knowledge is necessary practical foundation for any React Native development, understanding how a React Native project is structured — the key files, the JavaScript ecosystem, and code organization — is valuable, foundational practical knowledge for working with React Native projects, necessary for building and maintaining apps and a basic competency that's especially approachable for developers familiar with the JavaScript/npm ecosystem.