Rn-clean-architecture-template NPM

:space_invader: React Native Clean Architect Template TypeScript

React Native clean architecture for quick start with React Native

**This project follow the diagram of ResoCoderflutter-tdd-clean-architecture-course

:star: Features

Elegant usage directly within the React Native CLI
Consistent with the default React Native typescript template
Clean architecture implementation
Reactive implementation
Redux + Redux-Observable by default
Blueprint template for module uses redux observable or React-sweet-state
React Navigation by default
Type guide for React Native project
React Native config
Asset Icon Generator script
Dependency injection with tsyringe

:star: ToDos

Resource values - Such as: Component dimension, Text Theme ...
Fastlane template
Lean code ...

:star: Example

Demo implementation for this template Example

:arrow_forward: Usage

npx react-native init MyApp --template rn-clean-architecture-template

Usage with older versions of React Native

See the below table to find out which version of the template to use.

React Native <=> Template Version

React Native	Template
0.63.3	0.2.*
0.63.2	0.1.*

Note on the legacy CLI

There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli), for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

Further information can be found here: https://github.com/react-native-community/cli#about

Source component usage

Blueprint template: generate files with available template in folder: blueprint-template
- Require: Blueprint template plugin's installed in VSC
- Usage: New file with template and choose the one you want to create
- Available template:
  - Hot redux module: Create new module with new reducer, action, epic to handle the module's own logic
  - React sweet state: Create new module with react sweet state integration by default
Asset Generator script: Generate index file for asset folder
- Rule: icon-facebook.png => export const ICON_FACEBOOK = require('icon-facebook.png');
- Usage: node <script_name> <folder paths need to index, separate with space>