React Native Design Pattern

There are different design pattern in react native
Building a mobile application can be a complex task, using design patterns can make the code more organized, maintainable, and resusable.Please check below, there are listed below.
  • Component Composition
  • Conatiner/Presentational Components
  • Statefull/Stateless Components
  • Atomic Design
    • Atoms
    • Molecules
    • Organisms
  • Higher Order Components
  • Render Props
  • Provider Pattern
  • Component Injection
  • Dependency Injection

Component Composition

Component Composition
This is design pattern that involves composing multiple components to create more complex components this pattern involves creating component that can be combined to together to create more complex components. Making the code more modular s reusable.

Container Presentational Components

Container Presentational Components
The design pattern that separates the logic from the presentation of components. The container components & presentational components. The container components are responsible for handling the logic and data fetching. Presentation component are responsible for rendering the UI.

Statefull/Stateless Components

Statefull/Stateless Components
State full/Stateless Components: This design pattern that differentiate between components that manage their own state and component do not. Statefull components are responsible for managing the state of the application. Stateless do not have any state of their own.

Atomic Design

Atomic Design
Atomic Design: Atomic design is a design pattern that involves breaking down the application into smaller and reusable components. This pattern involves creating components at the atomic level such as atoms, molecules and organisms’ atoms are the smallest component such as buttons and inputs molecules are groups of atoms such as a form organisms are groups of molecules such as navigation bar. This pattern makes the code more modular and reusable.

Higher Order Components (HOC)

Higher Order Components (HOC)
Higher Order Components (HOC): HOC is a design pattern that allow us to reuse code between components. This pattern involves creating a function that take a component as a props and return a new component with additional functionality.

Render Props

Render Props
Render Props: Render props is a design pattern that allow us to share code between component using a prop that is a function. this pattern involves passing a function as a prop to a component that component can call to get the data or functionality it needs.

Component Composition

Component Composition
Provider Pattern: The provider pattern is a design pattern that allow us to pass data or functionality to pass props manually at each level. This pattern involves creating a provider component that wraps the components tree and provides the data or functionality using context.

Component Injection

Component Injection
Component Injection: It is a design pattern for injecting components s into other components to add functionality. Creating component that accepts other component as props and render them in a specific way.

Dependency injection

Dependency injection
Dependency injection: It is a design pattern that allow us to inject dependency into components to dependency the code pass injection dependency as props to component easier to reuse.