DEV Community

Cover image for How to run your first React Native App on macOS for iOS devices
Aneeqa Khan
Aneeqa Khan

Posted on β€’ Edited on

24 2

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)"
Enter fullscreen mode Exit fullscreen mode

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

brew install node
brew install watchman
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

brew install cocoapods
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!! πŸŽ‰ 🎊

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate usersβ€”but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post β†’

Top comments (1)

Collapse
 
aftabaminzoobiapps profile image
aftabaminzoobiapps β€’

I have this error Ld /Users/admin/Library/Developer/Xcode/DerivedData/newproject14-cvdiiugtqaaijpavompovzawknhm/Build/Products/Debug-iphonesimulator/newproject14.app/newproject14 normal x86_64

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay