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)