React Native Project Structure

A new React Native project creates dozens of files and folders. The layout looks crowded at first glance. Each item has a clear job, and a handful of them carry most of your daily work. Knowing the map lets you find any file in seconds and organize your own code with confidence.

The Default Project Map

An Expo project, the beginner-friendly way to start, produces a layout like this.

my-app/
├── assets/            → Images, fonts, app icon
├── node_modules/      → Downloaded libraries (never edit)
├── App.js             → Entry screen of the app
├── app.json           → App name, icon, version settings
├── babel.config.js    → Code translation settings
├── package.json       → List of libraries and scripts
└── package-lock.json  → Exact library versions

A bare React Native project adds two more folders named android and ios. Those folders hold the native shells that wrap your JavaScript code.

App.js: The Starting Point

The phone opens App.js first. Whatever component this file returns becomes the first screen. Small apps keep everything here. Larger apps use it to connect navigation, themes, and shared data.

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>My first screen</Text>
    </View>
  );
}

package.json: The Shopping List

This file records every library your app needs, plus handy command shortcuts. Picture a recipe card with an ingredient list. Another developer runs one install command, and the tool downloads every listed ingredient.

{
  "name": "my-app",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android"
  },
  "dependencies": {
    "expo": "~51.0.0",
    "react": "18.2.0",
    "react-native": "0.74.0"
  }
}

dependencies and devDependencies

The dependencies block lists libraries that ship inside the app. The devDependencies block lists tools used only while you build and test.

node_modules: The Library Warehouse

This folder stores the code of every installed library. It grows very large, often hundreds of megabytes. Never edit files inside it and never upload it to a code-sharing site. The install command rebuilds the folder from package.json at any time.

app.json: App Identity Card

This file holds the name, icon, splash screen, and version that users see in the app store.

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "version": "1.0.0",
    "icon": "./assets/icon.png"
  }
}

A Scalable Folder Layout

As an app grows, a single App.js turns into a tangled file. Create a src folder and group code by purpose.

src/
├── components/   → Reusable pieces (Button, Card)
├── screens/      → Full pages (Home, Profile)
├── navigation/   → Stack and tab setup
├── services/     → API calls
├── hooks/        → Custom hooks
├── context/      → Shared app data
├── utils/        → Small helper functions
└── constants/    → Colors, sizes, fixed text

Where Does Each File Go?

Use a simple test. A piece that appears in many places belongs in components. A piece that fills the whole screen belongs in screens. Code that talks to a server belongs in services. A piece of logic with no visuals belongs in utils.

Naming Habits That Help

• Name component files with a capital first letter, such as ProfileCard.js
• Name helper files in lowercase, such as formatDate.js
• Keep one main component per file
• Pick names that describe the job, such as LoginScreen instead of Screen2

Files to Keep Out of Sharing

A .gitignore file lists items that version control skips. Secret keys, node_modules, and build output belong on that list. A leaked key can expose private data, so store secrets in environment files and exclude them from sharing.

Summary

Every React Native project follows the same map. App.js starts the app, package.json lists libraries, app.json defines identity, and node_modules stores downloaded code. Add a src folder with components, screens, services, and hooks to keep growing apps organized.