Useful Tips For React-Native

3 min readMay 17, 2019

Hi there, I try to collect some of the most important tricks, tips and snippets code for react developers to create an awesome react-native app.

package.json scripts

"scripts": {
    "shake": "adb shell input keyevent 82",
    "run-a": "react-native run-android",
    "run-i": "react-native run-ios",
    "clean": "cd ./android && ./gradlew clean",
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug",
    "build:an": "cd android && gradlew assembleRelease"
},

Scripts description:[npm run ScriptName]
clean => clean old fetch libs and dependencies for android.
android => download and install new dependencies, run this after clear
build:an => build release APK (need to do signing process)
shake => shake emulator

Update React-native-CLI

npm uninstall -g react-native-cli
npm install -g react-native-cli

Create-React-App for support IE-11

Step1:
yarn add react-app-polyfillStep2:
add these 2 lines at the very most top of index.js before import react.// --- Support EI-11 for react app
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// ---Step3: add "ie 11" into package.json for both sub section of browserslist:"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

ProjectName/android/app/debug.keystore’ not found for signing config ‘debug’ in react-native

You can generate the debug keystore by running this command in the android/app/ directory:

keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

Generating Signed APK

1- Go to C:\Program Files\Java\jdkx.x.x_x\bin and then use keytool
2- Run below script in the terminal from the above address and answer to questions (password, names and…):

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

3-The, in current directory my-release-key.keystore will be available. Copy It
4-Place the my-release-key.keystore file under the android/app the directory in your project folder.
5-Edit the file ~/.gradle/gradle.properties or android/gradle.properties, and add the following (replace ***** with the correct keystore password, alias and key password),

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

6- Edit the file android/app/build.gradle in your project folder, and add the signing config, (Bold texts must be added)

... 
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         
     }     
} }
 ...

7-Generating the release APK: Simply run the following in a terminal:
run ‘build:an’ script from above section(scripts)
cd android && gradlew assembleRelease

npm run build:an

8- The generated APK can be found under android/app/build/outputs/apk/release/app-release.apk, and is ready to be distributed.

9- Go to the above address and run below script in Terminal from current location to install signed APK to the connected device (real device or emulator)

adb install app-release.apk

Reference:
https://facebook.github.io/react-native/docs/signed-apk-android