How to run your first React Native App on macOS for iOS devices
Aneeqa Khan
Posted on March 5, 2020
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!! 🎉 🎊
Posted on March 5, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.