Build React Native App (4) - Redux, Jest, and NativeBase

Image
From this blog, typescript feature will be added. There are couple of ways to implement static type checking like; flow from facebook, PropTypes and Typescript.Typescript is well integrated with Visual Studio Code and supports better linter, error messages, and intellisense.Reference siteGithub Sample Ex4Currnet versionD:\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 Creating React Native App$ react-native init ex4 If you want to specify the version, add "--version 0.57.3" at the end.Add NativeBase to React Native$ npm install native-base --save ... + native-base@2.8.1 added 71 packages from 42 contributors, removed 50 packages, updated 829 packages and audited 34989 packages in 138.542s found 0 vulnerabilities $ $ yarn yarn install v1.9.4 warning package-lock.json found. Your project contains l…

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

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

Popular posts from this blog

Using GIT(Bitbucket), Visual Studio Code

Installing Icinga 2.4.1, Graylog 1.2.2, and Cacti 0.8.8 on Ubuntu 14.04