Setting Up React-Native with Typescript Environment in Mac OS

Install and Set up an environment for React-Native with Typescript

Install Homebrew

Homebrew is installing a program for mac. Visit https://brew.sh and copy the following command and run it on the terminal.

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Install Visual Studio

brew install cask
brew install — cask visual-studio-code

Install Node.js

brew install wgettouch $Home/.zshrcwget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh

After running this command, the following data is inserted to $HOME/.zshrc

export NVM_DIR=”$HOME/.nvm”[-s “$NVM_DIR/nvm.sh” ] && . “$NVM_DIR/nvm.sh” # This loads nvm

After that, run this command to apply the changes to the shell.

source .zshrc

Install React-Native with TypeScript

Go to project folder by terminal and run this command to install react-native project with typescript

npx react-native init App_Name --template react-native-template-typescript

Install Java11 JDK

React-Native needs an Android SDK build tool and it uses Java version 11 JDK.

brew tap homebrew/cask-versions
brew install — cask temurin11

After that update the .zshrc file a little bit.

code $HOME/.zshrc//Add this line to .zshrc file
export JAVA_HOME=/Library/Java/JavaVirtualMachines/temurin-11.jdk/Contents/Home
source .zshrc

Install Cocoapod

You need to install Xcode in advance which can be downloaded on Xcode website.

To build an IOS app in React-Native, we need to build a Native Module which is Objective-C. However, Objective-C is not able to download OpenSource packages from hosted remote repository. Here cocoapod plays a role to download various packages and install in the local computer.

sudo gem install cocoapodspod -version//for m1 macbook, go to ios folder and run this command
sudo arch -arch x86_64 gem install cocoapods
sudo arch -arch x86_64 gem install ffiarch -arch x86_64 pod install

Install Watchman

brew install watchmanwatchman — version

Install Android Studio

Install android studio from the website after that,

[configure] -> [SDK manager] -> [SDK Tools] Select options to install. (Android Emulator, Android SDK build tool, Android SDK Tools, etc.)

code $HOME/.zshrcexport ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

Make sure You have installed the Same version for SDK and AVD and have installed SDK tools appropriately.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

All For Avoiding For. Investigating Array.from()

How to create Active NavLink in Nextjs

https://unsplash.com/photos/QofjUnxy9LY?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

3 Tips to Write Better React Components

JavaScript and its Industry use-case

How JavaScript strings work

Why do you need EditorConfig ?

JS Reminder APIs Quiz2

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
Sungho Park

Sungho Park

More from Medium

How to fix “pod install” error in React Native on Mac M1

MacOS Environment Setup for React Native (From Scratch)

Check node and npm versions

Announcing HackWithNativeBase

‘Stack.Navigator’ cannot be used as a JSX component — Typescript errors with Expo Application…