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

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.

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,

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"