react-native-template-haiau

This is project create template boilerplate for react-native

Table of contents

• Features
• Features Optional
• Folder Structure Conventions
• Installation
• Document
  • Path alias
  • Commit lint
  • Add custom fonts
  • Add support multiple language
• Inspired by
• Contributing
• Author
• License

Features

• React-native template
• Reanimated v2
• TypeScript
• Support path alias
• React navigation
• React navigation shared element
• Styled components
• Recoil
• Eslint
• Prettier
• Commit lint
• Husky
• Lint-staged
• Config variables for React Native apps
• React native vector icons
• Support custom fonts

Features Optional

• Support i18n

Folder Structure Conventions

.
├── __tests__               # Folder test
├── ios                     # Folder ios
├── android                 # Folder android
├── src                     # Source files
|   ├── assets              # Place contain images, fonts ...
|   |   ├── fonts           # Place contain custom fonts
|   ├── components          # Place contain common components
|   ├── routes              # Place contain react navigation
|   ├── screens             # Place contain screens
|   ├── stores              # Place contain global stores recoil
|   ├── styles              # Place contain styled theme global
├── LICENSE
└── README.md

Installation

npx react-native init <name project> --template react-native-template-haiau

Document

Path alias

• The project used library babel-plugin-module-resolver to support path alias import file
• Guide used:
  • Step 1: Create any directory in the folder src
  • Step 2: Run command for the auto-apply new folder in path alias

    npx react-native add-path-alias
    

Commit lint

• Guide used advanced commit lint custom rule scope:
• Assume you want to commit code with a prefix CMS-XXXX with XXXX is number ticket of project

Example:

git commit -m "CMS-0001: Commit template"

• Please custom file commitlint.config.json:

module.exports = {
  extends: ['@commitlint/config-conventional'],
  plugins: ['commitlint-plugin-function-rules'],
  rules: {
    'type-empty': [2, 'always'],
    'subject-empty': [2, 'always'],
    'scope-enum': [0], // level: disabled
    'function-rules/scope-enum': [
      2, // level: error
      'always',
      (parsed) => {
        const scopeEnum = parsed.header.split(':');
        const scopes = [
          {
            regex: /CMS-(\d+)/g,
            messageError: 'scope must is format CMS-XXXX',
          },
        ];
        const getIndex = scopes.findIndex(
          (scope) => scope.regex.test(scopeEnum) === false,
        );
        if (getIndex === -1) {
          return [true];
        }
        return [false, scopes[getIndex].messageError];
      },
    ],
  },
};

Add custom fonts

• Step 1: Add the font you want into the directory ./src/assets/fonts
• Step 2: Run command linking

  npx react-native link
  

Add support multiple language

• Support detect language device

npx react-native add-i18n

if you want custom advanced i18n please reference the link i18n

Inspired by

Create template for react-native

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Pham Minh Hai Au

License

MIT