Set up React-Native App with Typescript

Also configure VS Code and setup TSLint

Initialize the React Native Project

Follow the official installation for Building Projects with Native Code https://facebook.github.io/react-native/docs/getting-started

$ npm install -g react-native-cli

Since React Native 0.57 Typescript is support out of box

$ react-native init myapp --template typescript

Go to app folder

$ cd myapp

If you want to be able to import json file, add in the tsconfig.json add the following line in the compilerOptions

"resolveJsonModule": true,
"noUnusedLocals": true,
"noUnusedParameters": true

TSLint Installation and Setup

Install this:

$ npm install tslib tslint tslint-react tslint-config-standard tslint-config-prettier tslint-react-hooks tsutils tslint-etc --save-dev

At the project root create a file tslint.json (it’s only my preferences, you can change them to your convenience)

Move files to src folder

When it comes to the folder structure, I like to have my components in a directory called src/and put App.tsx in the root of it. Let’s do that now. Create a folder called src/ and move App.tsx into it and rename it app.tsx. Now we also need to modify index.js to point to the new location of App.tsx.

As I don’t want to use class anymore I change the content as:

import React, { FC } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
const instructions = Platform.select({
  ios: `Press Cmd+R to reload,\n Cmd+D or shake for dev menu`,
  android: `Double tap R on your keyboard to reload,\n Shake or press menu button for dev menu`
});
const App: FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to React Native!</Text>
      <Text style={styles.instructions}>To get started, edit App.tsx</Text>
      <Text style={styles.instructions}>{instructions}</Text>
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Be sure that in index.js you import App as Appwithout bracket

import App from "./src/app";

Also in the test __tests__ folder change the file name to app-test.tsx

Add scripts in package.json

"scripts": {
...
"lint": "tslint src/**/*.ts* --project tsconfig.json",
...
},

Now from your terminal you can run lint with npm run or yarn and fix the errors :)

Launch lint before commit or push

We use the library Husky that allows custom scripts to be ran against your repository.

$ npm install husky --save-dev

Add in the package.json the following commands:

"husky": {
  "hooks": {
    "pre-commit": "npm run lint",
    "pre-push": "npm run lint"
  }
}

Now from your terminal you can run lint with npm run or yarn and fix the errors :)

VSCode plugins

For my team to use the same plugin, I like to add the file in my repo

Create a folder .vscode and create a fileextensions.json

VSCode preferences

Also I have some preferences for my VSCode, to install in the folder .vscode ,create a filesettings.json

Setup Test with Jest and Enzyme

I recommend you this great article: https://medium.com/@jan.hesters/3-easy-steps-to-set-up-react-native-with-typescript-jest-and-enzyme-592ca042262f

Thanks to @martin_hotell

You can find a great setup for React project here: https://github.com/Hotell/ts-setup

You can also check his great articles about typescript:

10 TypeScript Pro tips/patterns with (or without) React

Ultimate React Component Patterns with Typescript 2.8