Setting up my MacBook for React Native App Development
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 :)