karthikKulkarni / RN_Boilerplate

A boiler plate for latest React Native, TS, ES Lint, Prettier, Jest

ReactNative_TS_ESlint_Prettier

A boiler plate for React Native, TS, ES Lint, Prettier, Jest

Upgrade all the libs/dependencies to latest before starting off to build actual functionality

$ yarn upgrade-interactive --latest

Steps:

1. Create react native app with typescript template

$ npx react-native init <ProjectName> --template react-native-template-typescript

3. Update the package name/ bundle identifier if necessary

a. iOS:

Open xcode -> <ProjectName> -> Targets <select ProjectName> -> General -> Bundle Identifier.

b. Android:

Package name can be updated using "react-native-rename" npm. But this also changing of app name.

4. Add project to git Link

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin <remote_repository_URL>
$ git remote -v
$ git push -u origin master

5. Install ESlint, prettier and types for each

$ yarn add --dev eslint prettier eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-prettier husky pretty-quick

6. Config ES & TS lint

Make sure you have ESLint plugin installed for VSCode
And update .eslintrc.js
module.exports = { root: true, extends: ['@react-native-community', 'airbnb-typescript', 'prettier', 'prettier/@typescript-eslint', 'prettier/react'], };

Add rule to suppress v3 of TS Link rules:['@typescript-eslint/camelcase': 'off',]

Update eslint to include tsconfig.json

  parserOptions: {
    createDefaultProgram: true,
    tsconfigRootDir: __dirname,
    project: './tsconfig.json',
  },

Additionally update the VSCode Workspace setting, add
"eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ]

7. Config prettier

Make sure you have Prettier plugin installed for VSCode
{ "singleQuote": true, "trailingComma": "all", }

8. Exclude test files from ts in tsconfig.js

"exclude": [ "__tests__/**/*-test.ts" ]

9. Enable Hermes engine for android Link

android/app/build.gradle
"enableHermes": true // clean and rebuild if changing
proguard-rules.pro
-keep class com.facebook.hermes.unicode.*_ { _; }

10. Build the app

$react-native run-ios / react-native run-android
or
$yarn ios / yarn android

11. Commit all the new git changes

$ git add .
$ git commit -m "Config TS ES prettier"
$ git push

12. Setup Husky and configure to check any prettier and Eslint

Install Husky

$ npm install --save-dev pretty-quick husky

Configure husky in package.json

"husky": { "hooks": { "pre-commit": "pretty-quick --staged && npm run lint" } }

All set!!! build the app using $react-native run-ios/run-android
or
$yarn android/ios