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.

Image for post
Image for post

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


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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

After editing, reflect the file and check the changes.

$ source $HOME/.zprofile


  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.

Image for post
Image for post

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
Image for post
Image for post

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
Image for post
Image for post

The RN app will be run on your Simulator!


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store