(React Native) Build the base for a React Native App – Init Project

Tram Ho

Hi All.

Starting today, I will switch to a new category that is React Native. And in this series, I aim to build 1 base app enough for 1 app to use.

Since it is the base, I will not focus too much on the UI part but aim to build a base with the following items:

  • Use TypeScript
  • Apply React Navigation
  • Apply Mobx for state management
  • Apply Mobx for validation
  • Manage App State change
  • Linking

Init Project with TypeScript

Before we begin, we will answer the question why you use TypeScript, just search Google you can find a lot of reasons, and I would like to list some benefits when we use it. TypeScript in developing applications that use Javascript:

  • TypeScript simplifies JavaScript code, making reading and debugging easier.
  • TypeScript is open source.
  • TypeScript provides high productivity development tools for IDEs and JavaScript practices, like static testing.
  • TypeScript makes code easier to read and understand.
  • With TypeScript we can greatly improve over simple JavaScript.
  • TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus higher productivity.
  • TypeScript can help us avoid the painful errors that developers often encounter when writing JavaScript by testing the code.
  • Powerful class system, including generics.
  • TypeScript is nothing but JavaScript with some extra features.
  • Structure, rather than nominal.
  • TypeScript code can be compiled according to the ES5 and ES6 standards for the latest browser support.
  • Aligns with ECMAScript for compatibility.
  • Start and end with JavaScript.
  • Support static typing.
  • TypeScript will save developers time.
  • TypeScript is the super suite of ES3, ES5 and ES6.

And with TypeScript’s great top features that should make it worth a try:

  • Object oriented programming
  • Interfaces, Generics, Inheritance and Modification of Method Access
  • It is not allowed to alternate values ​​with different data types.
  • The Complice runtime allows us to know whether the data type being used is correct or not
  • ……

Now that we go back to our series, there are two ways you can apply TypeScript to your project:

With new project

The new project will be quite simple, just init project with Type Script is done

With Expo

For projects already code

  1. Add TypeScript and the types for React Native and Jest

  1. Add a TypeScript config file. Add the tsconfig.json file, remember that this file is in the same row as node_modules:

  1. Add jest.config.js to config jest using TypeScript

  1. Get started by adding new .tsx files or renaming files ending in .js to .tsx

You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.

The React native homepage recommends keeping the index.js file intact in case of production build errors

  1. run the yarn tsc command to check the Typescript files

Using Custom Path Aliases with TypeScript

To make it easier to import modules without having to use the absolute path, we can configure as follows:

  1. Edit the tsconfig.json file and update the following keys:

  1. Add the babel-plugin-module-resolver library

  1. Finally there is the babel.config.js config

So we have a full Reat Native project setup. Please try yarn run-android or yarn run-ios to check if there are any more errors.

In the next session we will go over to setup and use React Navigation

Share the news now

Source : Viblo