Setup React Native environment with Typescript
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
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).
After editing, reflect the file and check the changes.
$ source $HOME/.zprofile
$ echo $ANDROID_HOME
- 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!