Build React Native App (1) - Setup Dev Environment

From this series, we will create simple testing app with Redux and NativeBase which retrieve rest data and display on the screen.

Reference site

• Jest https://jestjs.io/
• React-devtools https://github.com/facebook/react-devtools
• Github Sample Ex1

Currnet version

D:\GitRepo\reactnative>npm --version
6.3.0

D:\GitRepo\reactnative>react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

D:\GitRepo\reactnative>yarn --version
1.9.4

The development server returned response error code: 500

React Native version 0.57.2 has issue with "response error code: 500". Must use 0.57.1.

Two ways;

1. Create project with specific version

$ react-native init --version 0.57.1 ex1

2. Update package.json file

{
  "name": "ex1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "react": "16.5.0",
    "react-native": "0.57.1"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Installing React-devtools

Please find tutorial based on your browswer

Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Firefox: https://addons.mozilla.org/firefox/addon/react-devtools/

Create test project with jest

# react-native init ex1

JEST will be installed as part of initialzation process. To check package, look at package.json file in ex1 folder.

{
  "name": "ex1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Running project

Before running program, we will need to launch simulator.

There are so many tutorials how to add virutal devices, so I am skipping this (https://developer.android.com/studio/run/managing-avds)

However, lauch simulator from the Android Studio is really time consuming and this is the command line to launch program.

AVD folder tree example and AVD image name is "Pixel_XL_API_26"

C:\USERS\ALEX.JOH\.ANDROID\AVD
└─Pixel_XL_API_26.avd
    ├─data
    │  ├─app
    │  │  ├─ApiDemos
    │  │  ├─CubeLiveWallpapers
    │  │  ├─GestureBuilder
    │  │  ├─SmokeTest
    │  │  ├─SmokeTestApp
    │  │  ├─SoftKeyboard
    │  │  └─WidgetPreview
    │  ├─benchmarktest
    │  │  ├─binderAddInts
    │  │  ├─libbinder_benchmark
    │  │  ├─libhwbinder_benchmark
    │  │  ├─libjavacore-benchmarks
    │  │  └─netd_benchmark
    │  ├─misc
    │  │  ├─adb
    │  │  └─pstore
    │  └─nativetest
    │      ├─asan-test
    │      ├─bsdiff_unittest
    │      ├─clatd_microbenchmark
    │      ├─clatd_test
    │      ├─hwbinderThroughputTest
    │      ├─libhwbinder_latency
    │      ├─libjavacore-unit-tests
    │      ├─libweave_test
    │      ├─memory_replay_tests
    │      ├─netd_integration_test
    │      ├─nvram_hal_test
    │      ├─tcp_nuke_addr_test
    │      ├─tpm_manager_test
    │      ├─trunks_test
    │      └─vold_tests
    └─snapshots
        └─default_boot

Batch file to run android simulator.

# run-simulator.bat
# avd file is located at ~/.android/avd folder
# simulator is located at the Android Studio Installation folder
D:\Android\sdk\emulator\emulator.exe -avd Pixel_XL_API_26

Go to the "ex1" folder and type below command to run on android simulator.

$ react-native run-android

Summary

From next series, we will add ReactNative components