React Native

Posted on 16/09/2020

1. Getting Started

1.1. Installing dependencies

React Native CLI Quickstart here

Node, Watchman, JDK

 brew install node
 brew install watchman
 brew tap AdoptOpenJDK/openjdk
 brew cask install adoptopenjdk8

The React Native CLI
```
 npm install -g react-native-cli
```
Xcode

1.2. Creating a new application

react-native init AwesomeProject

1.3. Using a specific version

If you want to start a new project with a specific React Native version, you can use the –version argument:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

1.4. Running your React Native application (IOS)

cd AwesomeProject
react-native run-ios

$ react-native run-ios --simulator="iPhone 6s (12.1)"
$ react-native run-ios --simulator="iPhone 6s (12.1)" --port=8088

Open simulator:

$ xcrun instruments -w "iPhone 6s (12.1)"

Run Simulator Device

$ npm install -g ios-deploy
# Run on a connected device, e.g. Max's iPhone:
$ react-native run-ios --device "iPhone Name"

Reset npm

$ killall -9 node
$ npm start -- --reset-cache

1.5. Running your React Native application (Android)

export ANDROID_HOME=/Users/tuanpi/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

react-native run-android

adb

adb devices
react-native run-android --deviceId=DEVICE_ID

Reload a React Native app on an Android device

#adb shell input text "RR"
adb shell input keyevent 82

2. Creating a Production Build

2.1. IOS

$ react-native run-ios --configuration Release
$ react-native run-ios --configuration Release --device "Your Device Name"

2.2. Android

Read more: here

1 - Generate keystore

Windows

$ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

MacOS

$ cd /your/jdk/path
$ sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2 - Copy keystore to project/android/app/
3 - Edit android/gradle.properties file with your password for keystore

MYAPP_RELEASE_STORE_FILE     = my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS      = my-key-alias
MYAPP_RELEASE_STORE_PASSWORD = ******
MYAPP_RELEASE_KEY_PASSWORD   = ******

4 - Edit android/app/build.gradle in your project folder and add the signing config

...
android {
  ...
  defaultConfig { ... }
  signingConfigs {
    release {
      if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
      }
    }
  }
  buildTypes {
    release {
      ...
      signingConfig signingConfigs.release
    }
  }
}
...

5 - Run this code in the command line

$ cd android
$ ./gradlew assembleRelease
# $ ./gradlew bundleRelease

If you ran into problem in building APK like this error: Unable to process incoming event ‘ProgressComplete ‘ (ProgressCompleteEvent) I recommend to

1- upgrade gradle to 4.3 to avoid building problems
2- or use Gradlew.bat assembleRelease instead

3. Config Release in Xcode

Product -> Scheme -> Edit Secheme… -> Chọn Release trong mục Buil Configuration

4. Installing Packages

$ npm install --save <pack_name>
$ react-native link
$ react-native link <pack_name>

5. Failed to load bundle

Clear watchman watches: watchman watch-del-all. 1_1. remove file: package-lock.json
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*. (null))

6. ESLint for React native

6.1. Install ESLint

$ npm install --save-dev eslint babel-eslint (hoặc: $ yarn add -D eslint)
$ npm install --save-dev eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import eslint-plugin-react-native

6.2. Create `.eslintrc.js` in project

1. Tạo thủ công
2. Tạo bằng cmd: $ ./node_modules/.bin/eslint --init

6.3. Cấu hình bộ quy tắc phát hiện lỗi trong file `.eslintrc.js`

module.exports = {
  "parser": "babel-eslint",
  "env": {
    //"browser": true,
    //"node": true,
    'react-native/react-native': true,
    jest: true,
  },
  "plugins": [
    "react",
    "react-native"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    //"react/prop-types": 0,
    //"react/no-deprecated": 0,
    //"indent": 'off',
    //"no-tabs": 0,
    //"react/jsx-filename-extension": [0],
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
    indent: ['error', 'tab', { SwitchCase: 1 }],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-undef': ['error'],
    'no-console': ['off'],
    'no-unused-vars': ['warn'],
    'react/prop-types': ['warn'],
    'react-native/no-unused-styles': ['warn'],
    'react-native/split-platform-components': ['warn'],
    'react-native/no-inline-styles': ['warn'],
    'react-native/no-color-literals': ['off'],
  }
};

6.4. Config `package.json`

"scripts": {
  ...
  "lint": "eslint .",
  #"lint": "eslint *.js **/*.js"
  ...
}

Sử dụng để check lỗi toàn bộ file trong dự án npm run lint hoặc yarn lint. Ngoài ra có thể tuỳ chọn file cầu hình.
Có thể kiểm tra từng file $ ./node_modules/.bin/eslint name_file.js

7. Git

$ cd iApp/
$ git init
$ git remote add origin <url>
$ OR $ git remote add url <url>
$ git add *
$ git commit -m "iApp"
$ git push -u origin master

Sử dụng file .gitignore để Git bỏ qua không push. Với điều kiện phải xóa cached

$ git rm -r --cached node_modules/
$ git rm -r --cached ios/build/

Sau đó thêm vào .gitignore dạng:

node_modules/
ios/build/
#...

8. Import .js .jsx .ts .tsx …

module.exports = {
  ...
  resolver: {
    ...
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx', 'svg']
    ...
  }
};