: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>

:computer: Contributing

Contributions are very welcome. Please check out the contributing document.

:bookmark: License

This project is MIT licensed.