Setting up my MacBook for React Native App Development

Pankti Bardolia
2 min readDec 11, 2023

--

I just got my hands on a brand-new Macbook Pro featuring the M3 chip — pretty cool, right? My immediate goal was to create an app compatible with both iPhones and Android phones. Fortunately, I made the wise choice of opting for React Native! However, setting up my Macbook for React Native development proved to be a bit challenging initially. Despite searching extensively, I couldn’t find a single blog that guided me through the process. But fear not! I’ve taken on the task of doing all the heavy lifting so you don’t have to.

First and foremost, you’ll need an Integrated Development Environment (IDE). My personal favorite is VS Code, but feel free to choose any IDE you’re comfortable with.

1. Download VS Code

Select the MacOS download from the Link.

2. Setup the workplace

Creating a dedicated workspace for all your development projects in your root directory is advisable. Open the VS Code terminal from the bottom, go to the root directory, and create a development workspace with the following commands.

cd ~
mkdir workplace

3. Install and configure brew

Install Homebrew using the link:

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

Configure Homebrew in the ZShell

vim ~/.zshrc

Add the following PATH configuration:

PATH=/opt/homebrew/bin:$PATH

Save changes by pressing :wq and source the ~/.zshrc file:

source ~/.zshrc

Update Homebrew

brew update

4. Install Node with Homebrew

brew install node

Test the Node and npm versions:

node -v
npm -v

You should see the node and npm version output shown below

5. Get started with ReactNative

Make sure you’re in your workplace with pwd. If not cd ~/workplace
Then Run the following command to create a new React Native project called “AwesomeProject”

npx create-expo-app AwesomeProject

cd AwesomeProject

Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer.

npx expo start

After running the above command, You’ll be able to see a QR Code. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

Congratulations! You’ve successfully completed the setup for your React Native app on your Macbook :)

--

--