DEV Community

Dainy Jose
Dainy Jose

Posted on

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

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 — Mobile App Developer specialized in React Native and the MERN stack.

💼 Skills & Tools:

Mobile App Dev | MERN Stack | React Native | TypeScript | Redux | React.js | Node.js | MongoDB | MySQL | Express.js | REST API | JWT | Google Maps | Firebase | Jest | Agile | SDLC | Payments | Git | Bitbucket | Jira

📬 Connect with me:

🔗 LinkedIn

💻 GitHub

Top comments (0)