Setup React Native environment with Typescript

React Native(RN) is a mobile application framework created by Facebook. It is like React so, making it easy for Javascript developers to develop mobile apps easily.

In this post, we’ll make an RN app using typescript.

Set up the environment

Before start, we need to install some dependencies. RN runs above both android and ios OS. So environments suitable for each os must be set. In both environments needs Node, Watchman, and Typescript.

Official RN page recommends using Homebrew. Note that, the Watchman is a tool for watching changes in filesystem.

$ brew install node
$ brew install watchman
$ npm install -g typescript

Android

1. Install the Java Development Kit(≥8)

Native Android app is written by Java.

$ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

2. Install the Android Studio and Android SDK

You can download the Android Studio official page.

If the installation is done, Open it and go to Configure > SDK Manager.

Check over the Android 10(Q) version in the SDK Platforms tab. And check Android SDK Build-Tools in the SDK Tools tab.

3. Configure the ANDORID_HOME environment variable

In order to build the RN to native code, some environment variables are required.

Edit the $HOME/.bash_profile or $HOME/.bashrc. Write down that codes(You can see the right ANDROID_HOME path in the SDK Manager).

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

After editing, reflect the file and check the changes.

$ source $HOME/.zprofile
$ echo $ANDROID_HOME

iOS

1. Install Xcode & CocoaPods

iOS is simpler than Andorid. You can install Xcode in the App Store. And set the Command Line Tools in Preferences > Locations.

Install the Xcode library dependencies manager, cocoapods.

$ sudo gem install cocoapods

Getting Started with Typescript

Now, let’s start creating a project. We’ll use the react-native command with the npx. It supports the typescript template.

$ npx react-native init ReactNativeTutorial --template react-native-template-typescript

When you run the command, The project creation script will be executed. After creation, enter the new project. The project will have configuration files for each OS(android, ios), Typescript code(App.tsx), and package.json.

In the package.json file, there are some npm scripts we can use.

First, run the ‘start’ script. And run ‘ios’ or ‘android’ script.

$ yarn start
$ yarn ios  // or yarn android

The RN app will be run on your Simulator!