React Native: Clean Architecture

A clean architecture scaffold in React Native that is easy to understand.

Features

📁 Clean architecture. Layered file structure
🛡️ TypeScript bulletproof typing
🖌️ Code format: ESLint
🐩 Git hooks: Husky
💉 Dependency injection: Reactject
🌍 I18n: expo-localization + i18n-js
🚢 Navigation: @react-navigation/native
🧰 State Manager: Redux Toolkit

📁 Project File Structure

What makes the implementation of the clean architecture concept more difficult in my opinion is that since it is defined theoretically, each person implements it using different terminology or omitting/adding some layers or pieces to simplify it or continue to make it more complex.

For this reason, I think it is important to emphasize the documentation that accompanies the architecture to avoid obstacles with the rest of the people who are going to work with this system.

I briefly explain each of the layers that make up clean architecture within the /src folder:

└── /src
    ├── AppModule.ts               # Dependency injection entry point
    ├── /post                      # Post business entity folder
    │   ├── /domain                # Enterprise Business Rules (entities)
    │   ├── /application           # Application Business Rules (use cases)
    │   └── /infrastructure        # Technical details of the domain and application layers
    └── /ui                        # Contains the React Native source code
        ├── /i18n                  # I18n setup, injectable service and translations
        ├── /modules               # Modules/features
        │   ├── /core              # Project core UI
        │   │   ├── /components
        │   │   ├── /screens
        │   │   ├── /store
        │   │   └── /types
        │   └── /post              # Post related UI
        │       ├── /components
        │       ├── /screens
        │       ├── /store
        │       └── /types
        ├── /navigation            # Navigation setup
        ├── /store                 # Redux setup
        └── App.tsx

As you can see, the most notable customization I have done is to separate the domain and application infrastructure into different folders on the one hand, and the UI details on the other.

References

Run

Dev

yarn dev

Web

yarn web

Android

yarn android

iOS

yarn ios

Eject from Expo

expo eject

Support the project

☕️ Buy me a coffee so the open source party never ends.

YouTube ▶️ Instagram 📸 Twitter 🐦 Facebook 👍

godofprogramming.com