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

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 site

• Github Sample Ex4

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

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 lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 25.75s.
$
$ react-native link
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

Adding Unit Testing for JEST

Please refer tutorial 3.

Adding Typescript

Adding dependencies

$ npm install --save-dev typescript react-native-typescript-transformer @types/react @types/react-native
...
+ react-native-typescript-transformer@1.2.10
+ @types/react@16.4.18
+ @types/react-native@0.57.6
+ typescript@3.1.3
added 50 packages from 58 contributors, removed 47 packages, updated 831 packages and audited 34864 packages in 105.171s
found 0 vulnerabilities

Add tsconfig.json file

Add contents to tsconfig.json

{
    "compilerOptions": {
        "target": "es2015",
        "jsx": "react",
        "noEmit": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "lib": ["es2015", "es2016"],
        "allowSyntheticDefaultImports": true
    },
    "exclude": ["node_modules"]
}

Add rn-cli.config.js

Add config file for the React Native Typescript Transformer called "rn-cli.config.js".

Add contents to rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};

This file will indicate that any files with ".ts" or ".tsx" extension compile with "react-native-typescript-transformer".

Migrating to Typescript and support JEST for Typescript

Except "index.js" on the root folder, all files should be replaced with ".ts" or "tsx" if the file contains JSX.

To support JEST for the Typescript, "ts-jest" and "@types/jest" packages should be added.

$ npm install --save-dev ts-jest @types/jest
...
+ @types/jest@23.3.5
+ ts-jest@23.10.4
added 9 packages from 26 contributors, updated 4 packages and audited 34894 packages in 25.723s
found 0 vulnerabilities

Adding tslint and code formatter

To get all benefit of Typescript from Visual Studio Code, install "TSLint" plugin and Prettier for Code Formatting

$ npm install --save-dev tslint tslint-config-prettier tslint-react
...
+ tslint-react@3.6.0
+ tslint-config-prettier@1.15.0
+ tslint@5.11.0
added 5 packages from 3 contributors and audited 34948 packages in 36.058s
found 0 vulnerabilities

After installing, add tslint.json file

{
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "rules": {
        "arrow-parens": false,
        "cyclomatic-complexity": [true, 10],
        "object-literal-sort-keys": false,
        "object-literal-shorthand": false,
        "member-access": false,
        "interface-name": false,
        "no-any": false,
        "jsx-no-lambda": false,
        "no-var-requires": false
    }
}

Adding tslint and formatter setting to Visual Studio Code

Add following contents to the Visual Studio Code workspace

"tslint" extension must be installed to Visual Studio Code. If this extension is not installed, "tslint.autoFixOnSave" will complain about "Unkown module"

{
  "editor.formatOnSave": true,
  "tslint.autoFixOnSave": true,
  "javascript.format.enable": false
}

Screenshot for the Visual Studio Code setting

Intellisense screenshots

Sample file, test.jsx, for JSX

filename: test.jsx

import React from 'react';
import { TouchableOpacity, View } from 'react-native';

export default class App extends React.Component {
    render() {
        return (
            <View>
                <TouchableOpacity></TouchableOpacity>
            </View>
        )
    }
}

Summary

The next blog will demonstrate how to add redux with typescript and unit testing.