Requirements

Node : v18.19.0 or Higher Watchman: 2024.01.22.00 or Higher Cocoapods: 1.15.2 or Higher Zulu: 17

This boiler plate use react native version 0.79.0, with enabled new architecture

Installation

Installation command

Replace MyCustomApp with your project name

npx @react-native-community/cli init MyCustomApp --template rn-codeid-template --skip-install

Install node modules

yarn install

Ios Installation

This library already support auto linking for native ios, just run command in ios directory

pod install

Description

This template already include feature:

1. Absolute path
2. React Navigation
3. Redux
4. Redux Toolkit
5. React Native Vector Icons
6. MMKV
7. Environment Config
8. React Native Unistyles
9. Color & Theme Configuration
10. Jail Break Protection
11. Translation

Development Guideline

README

I. General

1. Folders & Files

• Use the screen folder for screen files inside src
• Each screen, navigation, store, services, and hook should be placed in their respective related screen.
• Use .webp for images and .svg for icons.
• File naming for components and screens should follow camelCase (e.g., LoginMain.tsx).
• Components should be use atomic architecture.
• Avoid using inline styles and please use stylsheet from unistyles
• Create components and custom hooks to minimize the number of lines in the code.
• Use Typescript

2. Naming Conventions

• Variable names should use camelCase (e.g., userName, userEmail).
• Boolean variables should preferably use the is prefix (e.g., isPasswordMatch).
• Constant names should use UPPERCASE SNAKE_CASE (e.g., NEXT_API_URL).
• Every custom hook should have use as the prefix for the file name and the function name (e.g., useLoginForm).

3. Additional Libraries

• Monitor security vulnerabilities in the libraries and dependencies you use.
• Ensure that the libraries or modules being used have an active community and regular updates.

5. Translation

Please dont hardcode wording in Component or Screen, put it in utils/language/json/en & utils/language/json/id put in matching file in json or create a new file match with module used

6. Color

Please avoid hardcode string color, put it in unistyles.ts, so it will be support in theme for light and dark.

7. Environment

Please use environment variable for url, api key and put it inside .env. Dont hardcode credential outside env file

8. Sensitive Data

Please store sensitive data using MMKV since MMKV use encryption storage for sensitive data like token, user data, etc.

What is Improvment need for this template ?

1. Need to implement SSL Pinning for penetration issue, you can use this npm lib react-native-ssl-public-key-pinning, this template not include that because is need to configure public key of api that you use.

2. Need to configure variant if you need flavour development, staging, production, etc.