How to run your first React Native App on macOS for iOS devices

I am currently working on React Native Apps and I thought to share the steps I do when I create a new React Native App through Xcode.

P.S. This guide is only for macOS users and target OS is iOS device.

Step 1: Installing Node and Watchman

Official guide suggests to use Homebrew to install Node and Watchman. So first thing first, run this command to install Homebrew

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

After brew is installed, run these commands to install Node and Watchman respectively.

brew install node
brew install watchman

Make sure you have 8.3 or newer version of node.

Step 2: Installing Xcode

Open your AppStore and search Xcode to install. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

We shall also need to install the Xcode Command Line Tools.

• Open Xcode.
• Choose "Preferences..." from the Xcode menu.
• Go to the Locations tab and install the tools by selecting the most recent version in the Command Line Tools dropdown.

And to install an iOS simulator.

• Open Xcode.
• Choose "Preferences..." from the Xcode menu.
• Go to the Components tab and download a simulator you want to use.

Yass! we are half way through to run a new app. ✌️

Step 3: Installing CocoaPods

In official guide they used gem to install CocoaPods, run this command

sudo gem install cocoapods

if "gem" command dont work for you used this command instead.

brew install cocoapods

Step 4: Creating a new Application

Now all the dependencies are installed and we can create our new Application. Run this command to create new React Native App

npx react-native init AwesomeProject

This will create a new project named AwesomeProject.
If you used "gem" to install CocoaPods, you would also need to run pod install command to install all the dependencies.

Wow! We are almost done. 👏
Here I am mentioning 2 ways to run React Native App.

✅ Running App through Command line

• First navigate to project folder. cd AwesomeProject
• then execute this command to run App in simulator npx react-native run-ios

This will open your App in simulator shortly. 🎉 🎊

✅ Running App through Xcode

• Go to your App folder, then go to ios folder. You'll see a file named AwesomeProject.xcworkspace.
• Open this file and it will open your App in Xcode.
• Select the desired simulator and click the ▶️ button to run your App.

and Tadaaa!! 🎉 🎊