React native MVC architecture.

App Architecture and Folder setup for React native App Development

Most of the React native app is based on the container design pattern with React-Redux along with this we can also use Redux-Thunk and Redux-Saga to work as middleware that lets you call action creators that return a function instead of an action object.

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments. this means the entire data flow of the app is handle within a single container while persisting pervious state.

Redux can be broken down into few sections while building the application which are listed below.

Actions: “Are payloads of information that send data from your application to your store. They are the only source of information for the store.” this means if any state change necessary the change required will be dispatched through the actions.

Reducers: “Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.” when an action is dispatched for state change its the reducers duty to make the necessary changes to the state and return the new state of the application.

Store: With help of reducers a store can be created which holds the entire state of the application it is recommended to use a single store for the entire application than having multiple stores which will violate the use of redux which only has a single store.

Components: This is where the UI of the application is kept.

Folder Structure

Although we use a Redux design pattern in app development but for folder structure we can still use a MVC design pattern to segregate the different layer of app for decoupled design mention below,

• Presentation Layer: Responsible for user interaction consists of all the component and screen.
• Business Layer: Responsible for business logic. We can create a separate manager class for same.
• Data Layer: Responsible for Local Data base communication. We can create a separate manager class for same.
• Service Layer: Responsible for consuming a web-service. Data coming from server as JSON/XML pass to the business layer or datalayer.
• Locals: To provide a multilingual feature in app.
• Utils: To provide a Utility class and method.
• Resources: To provide a images , fonts , style-guides.
• Redux: Composition based design pattern too provide a container to run the app while doing state management.It consist of actions and reducers folder.
• Helper : To provide helper class.
• Configs: Responsible to handle all the configuration statement and setting cmd.

References : Some reference taken from stack overflow and other blogs.

Best way to do it is, by using Redux or Relay Architecture

react native is only view, but you can try to build your MVC Architecture. here is my model you can use it as a model for your mvc Architecture.

Sources of this data from internet search.