React Native

Posted on 14/08/2019

1. Getting Started

1.1. Installing dependencies

React Native CLI Quickstart here

  1. Node, Watchman, JDK
     brew install node
     brew install watchman
     brew tap AdoptOpenJDK/openjdk
     brew cask install adoptopenjdk8
    
  2. The React Native CLI
     npm install -g react-native-cli
    
  3. 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

or

$ 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

  1. Clear watchman watches: watchman watch-del-all. 1_1. remove file: package-lock.json
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
  4. 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']
    ...
  }
};