Setting Up React Native in M2 MacBook Pro (Updated 12-Oct-23)

Brandon S. Ha

3 min readMar 3, 2023

Start with official doc

Setting up the development environment · React Native

This page will help you install and build your first React Native app. If you are new to mobile development, the…

reactnative.dev

Installing dependencies

we will need so many things to download.

Android

Node & Watchman

brew install node
brew install watchman

Java Development Kit

brew tap homebrew/cask-versions
brew install --cask zulu11

Android development environment

1. Install Android Studio

Download Android Studio & App Tools - Android Developers

Create dynamic layouts with Jetpack Compose. Then preview your layouts on any screen size and inspect Compose…

developer.android.com

Android SDK
Android SDK Platform
Android Virtual Device

2. Install the Android SDK

More Actions > SDK Manager > Click “show package Details”.

Look for and expand the Android 12 (S) entry, then make sure the following items are checked:

Android SDK Platform 31
Sources for Android 31
ARM 64 v8a System Image
Google APIs ARM 64 v8a System Image
Google Play ARM 64 v8a System Image

3. Configure the ANDROID_HOME environment variable

Add the following lines to your ~/.zshrc config file:

$ vi ~/.zshrc
export ANDROID_HOME=/Users/jiwon/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
## esc
## :wq exit after saving
 
## save and confirm env file
$ source ~/.zshrc
$ echo PATH

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

Wow! Seems like i completed 50% for Android.

But getting an error related to iOS.

Updated at 12.Oct for AOS

If you go to Android Studio, you will be able to find gradle-wrapper.properties. If you click that, you will be able to see some warning in terminal and then click to install whatever it requires.

iOS

Install Xcode from App store.

Installing Bundler will ask to install CocoaPods.

Cocoapods

$ sudo gem install cocoapods
$ pod --version

curl -L https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 2.7.6
rvm --default use 2.7.6

Updated at 12.Oct for IOS

First, i inserted

gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'

goes into ios in terminal

1. bundle update
2. bundle install
3. pod repo update
4. bundle exec pod install

After updating Cocoapods to 1.13.0 it throws error

I updated Cocoapods to 1.13.0 and after calling pod install it throws an error: conversions.rb:108:in 'class:Array'…

stackoverflow.com

If you success to install pod install part, it should be good to go!

Outdated

If you apply TypeScript in your React Native project, check this.
Below one is outdated package. and RN team introduced the new App Template is TypeScript By Default(v 0.71).

GitHub - react-native-community/react-native-template-typescript: 👾 Clean and minimalist React…

React Native added first-class support for Typescript in version 0.71, with the base template now utilizing it…

github.com

yarn start > choose android or iOS