How to start use? 💻

npx react-native init AwesomeApp --template https://github.com/CrisangerA/react-native-template-clean-arch.git

I recomend this library after init project. React Native Rename

$ npx react-native-rename AwesomeApp

Table Contents

• Why this template
• Configuration
• Strucure folders
• Features
• Extra
• Scripts
• Components
• Hooks
• Patterns and best practices
• Screenshots
• Remove Firebase
• Troubleshoot

Why this template? What needs does it solve? 🤷‍♂️ 🤷‍♀️

The main function of this template is to meet the requirements of modern applications in terms of scalability and maintainability over time. That is why it was implemented with the concept of clean architecture (Onion architecture).

The main motivation for this template is to use as many native features as possible for the requirements of modern applications such as scalability and maintainability over time. The reason for using native platform features is because they offer better performance than features that run on the JS thread.

Among other things the project includes this plugin https://www.npmjs.com/package/eslint-plugin-hexagonal-architecture that will help you to build the rest of your application with the onion architecture concept https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html.

If you have not yet heard of clean architecture or know anything about the concept, I invite you to first understand what this topic is about, since this is the main architecture under which the template is built.

Clean Architecture Resourses. Video and Blog:

• The Clean Architecture — Beginner’s Guide
• Mejora tu código aplicando Clean Architecture
• Clean Architecture: La mejor forma de escalar y mantener tu código

Configuration

Global configuration of styles, api routes, navigation and dependency injection are located in src/config.

• navigation.ts

  • Define type of root navigation
  • If you created a new screen describe it here. Only Screens not Modals

• style.ts

  • Colors
  • Font Sizes
  • Spacings

• di.ts

  • Configuration of dependency injection. Check it when your run the command: yarn module

• api.routes.ts

  • Endpoinds of your API's

Strucure folders

Features

Verify the versions in the package.json

• ✅ Bash Scripts
• ✅ React Native 70.x
• ✅ Typescript
• ✅ React Native Navigation (Full Native)
• ✅ Typed-Inject Lightweight dependency injection container for JavaScript/TypeScript
• ✅ React Native Async Storage
• ✅ Firebase
• ✅ React Hook Form
• ✅ React Query

Pending from implementation:

• React Native Keychain key Keychain Access for React Native.

Pending from installation:

• Testing Library
• Detox E2E Testing

Extra

• ⭐ Hermes Engine.
• ⭐ Dependency Injection.
• ⭐ React Native Turbo Modules (New Architecture)
• ⭐ Animations between screens
• ⭐ Eslint Plugin Hexagonal Architecture

Scripts

⌨️ For create new Context:

yarn context nameOfYourContext

⌨️ For create new Modules:

yarn module nameOfYourModule

Components

⌨️ For create new Component:

yarn component (-s|-c) (core|layout|global) nameOfYourComponent

Descriptions of aguments:

• component:
  • -s simple: a single file with logic and styles
  • -c complex file into a folder
• Scope of component
  • core: base components for the graphical interface, overwriting of components of the main library. For example buttons, text, card and others.
  • layout: components that belong to the style of the application, inherits from core and global. For example the page component that is used with each page. A shared header, Titles and others.
  • global: at the developer's discretion. to separate the components of each page by folder or for components that are used a lot between pages. See the auth/ and @forms/ examples.

Components located at ./src/ui/components/layout

• Box
• Margin
• ModalBottomSheet
• Not Records
• Padding
• Page

Components located at ./src/ui/components/core

• Card
• CardTitle
• Button
• ScrollView
• Text

Hooks

⌨️ For create new Hook:

yarn hook nameOfYourHook

• useQuery. Implementation of React Query

interface Props {
  key: QueryKey;
  service: () => Promise<any>;
  options?: UseQueryOptions | any;
}

• useNavigation. Implementation of React Native Navigation (Wix)

interface INavigationContext {
  componentId: string;
  goTo: (screen: string, props?: any) => void;
  showModal: (name: string, props?: any) => void;
  dismissModal: () => void;
}

Patterns and best practices

• ⭐ Single responsibility
• ⭐ Liskov substitution
• ⭐ Interface segregation
• ⭐ Dependency inversion
• ⭐ Pattern repository

Screenshots - Uplabs design

Remove Firebase

If you want remove firebase uninstall this two packages:

• @react-native-firebase/app
• @react-native-firebase/auth

and implement the necesary login in this files:

• ./index.js
• ./src/modules/authentication/infrastructure/firebase.repository.ts

Your new implementation in infra should inherit authrepository located in the domain

Troubleshoot

• For Firebase you only need generate google-services.json credentials. See the docs

• The test are made in Linux - Ubuntu 20.04. If you have a problem related with CMAKE as me, You should install this packages:

  • sudo apt-get install -y libicu-dev
  • sudo apt-get install -y build-essential