usman19977 / reactnative-boilerplate

React Native Clean Architecture With All New React Native 0.71 - Redux , Redux Saga , Ant Design Mobile UI , Container View Design Pattern Implemented

React Native Boilerplate

React Native Clean Architecture With All New React Native 0.71 - Redux , Redux Saga , Ant Design Mobile UI , Container View Design Pattern Implemented

Folder Structure

Assets :

1 - The folder named "assets" is designated for storing all static resources, as implied by its name.

2 - Each individual asset should be properly registered and exported in the assets/index.js file.

3 - Consequently, all resources can be accessed and imported from the '/assets' directory.

4 - Examples of static assets that can be stored in this folder include images, logos, vector icons, fonts, and more.

Config :

1 - The folder named "components" is reserved for shared components that are used across different screens.

2 - All components should be properly registered and exported in the components/index.js file to provide a single access point.

3 - It's important to use named exports for each component to avoid any potential conflicts.

4 - For components that involve complex logic or integration with Redux, it's recommended to use the "Container-View pattern" and separate them into "component.container.js" and "Component.view.js" ,to incorporate Container View Design Pattern.

Tip: When exporting components, it's advisable to use named exports rather than default exports for clarity and readability , multiple exports per module , easier refactoring & modular structure .

Components :

1 - The path designated for storing all of the app's configurations is located here.

2 - This may include settings such as the date format, default language, a master data set, or any other similar configuration options.

i18n :

1 - Internationalization or multi-lingual support in the app is implemented through the use of the "i18next" library.

2 - This approach typically involves creating a configuration file, along with separate language.json files for each supported language that contain the corresponding translations.

Navigation :

1 - As name suggests this folder contains all the logic and mechanism regarding routing .

2 - File Contants.js contains all the routes defined as constants.

3 - File Navigators.js

  @react-navigation/native ,  react-native-screens  , @react-navigation/native-stack 

Above Packages are used in this boilerplate for navigation and routing mechanism and this file contain Navigation Container.

4 - File AuthRoutes.js contains all the routes regarding Authentication like Login , Sign Up etc. initially it is using Stack.Navigator you can modify this according to your requirements for more information visit

5 - File ProtectedRoutes.js contains all the routes those are protected like Home , About , Profile , Dashboards etc . initially it is using Drawer.Navigator you can modify this according to your requirements for more information visit

6 - Folder components if there is any of the shared component that is required for advance routing or for creating bridge between multiple layouts you can define those components here.

Redux :

1 - All State management logic is will go here as we are using Redux here for state management and for async operations we are using Redux Saga , every module has its respective folder and files as below

 
    Actions.js - Contains all the action creators for that specific module

    Constants.js - Contains all the constants regarding redux module the type  which will be used in reducer to identify which part of the state needs to be change and also we use these for dispatching the actions 


    Reducer.js - Contain Reducer of that module responsible for mutating the state immutably

    Saga.js - Contain the async generator function which could cause side effect in the app replacement of thunk middleware
    

2 - File rootSaga.js will combine all the sagas and run them in store.js

3 - File store.js contain's all the reducers to be combined via combine reducer hook also dev tool is attached and rootSaga.js is also attached to the store as a middleware to perform async operation . later this store will be imported by provider on the very top element in the Tree.

Screens :

1 - Contain all the screens of the app in a modular way and Container View Design Pattern implemented .

2 - Each Module has its relevant components & sub - component if needed .

3 - Module main entry point by the Navigator will be xxxModule.container.js

4 - Each module has two files xxxModule.container.js & xxxModule.view.js , xxxModule.view.js is the dumb component all the logic related work is done in xxxModule.container.js file and thus , xxxModule.view.js is reuseable , if needed.

Services :

1 - Contains all api calls it is also implemented in modular way 2 - Each folder is a module and has api.js file containing its relevant API call for external system.

3 - Axios is used for api calls.

Styles :

1 - Global styles are be implemented in index.style.js

2 - Module-wise styles can be exported via Folder of that module in style folder.

Utils :

1 - Contain utilities of the application or some common modules those are needed through out the app

Main.js will be the entry point of the application .

Important

Open for contributions and feedback , kindly add new features or enhancements and create Pull Request to develop branch , changes will be reviewed and merged back to main .