# Project structure in React Native

There are many valid ways to organize a project. Here we recommend a few common approaches for projects of different sizes, but if you're already familiar with web development, you can organize your project the same way you would for a web app

## Small Project

* When our App is small , we keep all the components in a single direction
    

```bash
MyApp
├── components
│   ├── Avatar.js
│   ├── Button.js
│   └── List.js
└── App.js
```

## Medium Project

* Here also we create a root component directory and inside that we have many component directories
    
* As our project size increases we create separate directories for separate components
    
* Eg: “screen“ components will go into the **screens** directory, “card“ components will go into the **card** directory etc.
    

```bash
MyApp
├── components
│   ├── buttons
│   │   ├── RoundButton.js
│   │   └── SquareButton.js
│   ├── cards
│   │   ├── ArticleCard.js
│   │   ├── ImageCard.js
│   │   └── VideoCard.js
|   |── screens
│       ├── Feed.js
│       ├── Search.js
│       ├── Post.js
│       ├── Reply.js
│       ├── Profile.js
│       └── Settings.js
└── App.js
```

## Large Projects

* When a project grows to include many different features or UI flows, it's common to categorize files by feature at the top level. If multiple teams are working on the app, the feature names will frequently align with the team names: e.g. accounts, growth, privacy.
    
* The feature directories are commonly grouped under a `modules`, `packages`, or `apps` directory. Components or utilities that are shared between multiple features/teams will often be in a special `shared` or `core` directory within that,
    

```bash
MyApp
├── modules
│   ├── accounts
│   │   ├── components
│   │   │   ├── UserProfile.js
│   │   │   └── LoginInput.js
│   │   ├── screens
│   │   │   ├── Profile.js
│   │   │   ├── Login.js
│   │   │   └── Deactivate.js
│   │   ├── utils
│   │   │   └── formatAccountName.js
│   │   └── App.js
│   ├── growth
│   │   ├── components
│   │   ├── screens
│   │   ├── utils
│   │   └── App.js
│   ├── privacy
│   │   ├── components
│   │   ├── screens
│   │   ├── utils
│   │   └── App.js
│   └── shared
│       ├── components
│       │   ├── Avatar.js
│       │   ├── Button.js
│       │   └── List.js
│       └── utils
│           └── format.js
└── App.js
```

## **Separation of concerns in components**

In React Native, the component is the *only* building block of our UI. Some frameworks separate concepts like "views" and "controllers", but React doesn't enforce any specific pattern. It's up to us to decide what abstractions we want.

One common abstraction is to separate **presentational** and **container** components.

### **Container components**

Container components contain application/business logic. They're usually just called "containers". You may also hear "smart components", or occasionally, "view controllers"

Containers are aware of the data and logic unique to your application. Containers pass data and callbacks as props to presentational components, and handle updating the data when a user interacts with the app

Containers *shouldn't* render core components like `Text` or `Image` - that's the responsibility of *presentational* components.

### **Presentational Components**

Presentational components render the visible UI, and should not contain any application-logic. Ideally, their only input is their `props`, so they could be used in a different app without any major modification.

Presentational components are often referred to as "components", in constrast with "containers"