DEV Community

Dainy Jose
Dainy Jose

Posted on • Edited on

🚀 Setting Up React Native (Expo Bare + TypeScript) Development Environment on macOS

#reactnative #typescript #mobile #tutorial

If you’re starting with React Native (Expo Bare + TypeScript) on macOS, you need a complete setup for Android and iOS development. This guide covers everything from installing prerequisites to running the app on simulators.

👉 Reference Repo: rn-expo-typescript-bare-template

🔧 System Setup

1. Install Homebrew 

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

2. Install Node & NPM 

brew install node
Enter fullscreen mode Exit fullscreen mode

3. Install Git 

brew install git
Enter fullscreen mode Exit fullscreen mode

Set up your Git identity:
👉 Git username and email setup

4. Install Watchman 

brew install watchman
Enter fullscreen mode Exit fullscreen mode

5. Install Java JDK (17) 

brew install openjdk@17
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk
Enter fullscreen mode Exit fullscreen mode

Add to your ~/.zshrc or ~/.bashrc:

export JAVA_HOME=$(/usr/libexec/java_home -v17)
export PATH=$JAVA_HOME/bin:$PATH
source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

6. Install CocoaPods (for iOS) 

brew install cocoapods
Enter fullscreen mode Exit fullscreen mode

7. Install Expo CLI 

npm install -g expo-cli
Enter fullscreen mode Exit fullscreen mode

8. Install VS Code

👉 Download VS Code

📱 Android & iOS Setup

Android Studio

👉 Download Android Studio

sdk.dir=/Users/username/Library/Android/sdk
Enter fullscreen mode Exit fullscreen mode

Xcode (for iOS)

👉 Download Xcode

Switch versions if you maintain multiple Xcodes:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcode-select -s ~/Downloads/Xcode.app/Contents/Developer
Enter fullscreen mode Exit fullscreen mode

Open .xcworkspace in Xcode to build for iOS.

📂 Project Setup

1. Clone the project: 

git clone <your-repo-url>
cd rn-expo-typescript-bare-template
Enter fullscreen mode Exit fullscreen mode

2. Install dependencies: 

npm install
Enter fullscreen mode Exit fullscreen mode

3. For react-native-snap-carousel issue, import ViewPropTypes manually: 

import { ViewPropTypes } from 'deprecated-react-native-prop-types';
Enter fullscreen mode Exit fullscreen mode

Update inside:

  • react-native-snap-carousel/src/carousel

  • pagination, paginationDot, parallaxImage

4. iOS setup: 

cd ios
pod install
cd ..
Enter fullscreen mode Exit fullscreen mode

5. Run the app: 

npm run ios
npm run android
Enter fullscreen mode Exit fullscreen mode

✅ Wrap-Up

You now have a fully functional React Native (Expo Bare + TypeScript) setup on macOS 🚀.
This covers Node, JDK, Android Studio, Xcode, Git, Expo CLI, Pods, VS Code, and extra dev tools.

📌 Reference Repo: rn-expo-typescript-bare-template

✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Top comments (0)