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

Currnet version

D:\GitRepo\reactnative>npm --version

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

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

VSC Preference Menu

VSC User Setting

Intellisense screenshots


Class name

JSX Components

Auto import

Auto Import

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 (


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


  1. Great blog.
    The information that you shared with your blog really very specific and knowledgeable. It is very useful to understand the concept of react native.
    I was searching for the best react native app development company India and got this blog.
    Thanks for sharing such a great blog.

  2. Rails is basically a web application framework, which is consist of everything needs to create database baked web application. It helps the developers to create websites and applications by providing structures for all codes written by them. Moreover, common repetitive tasks are simplified with the help of this technology.
    ruby on rails software house
    Popular rails gems and APIs
    Websites made with ruby
    Best ruby gems 2019
    React native and React Js


Post a Comment

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