DEV Community

Cover image for Step-by-Step Guide: Running Your First React Native iOS App in 2023
Aneeqa Khan
Aneeqa Khan

Posted on • Updated on

Step-by-Step Guide: Running Your First React Native iOS App in 2023

Previously I wrote about react native getting started guide in 2020

But a lot is changed since 2020. So here is the focus to running your first latest version react native iOS app on macOS.

I have used macOS M1 version(13.2.1) for this guide.


1. Install Homebrew

Run this command in the root directory to install homebrew.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Enter fullscreen mode Exit fullscreen mode

After this command ran successfully, the brew will tell you commands to add brew to your terminal. You can run those commands so then later use brew to install more dependencies.


2. Install Node and Watchman

Run these commands to install Node and Watchman.

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

Make sure to install Node 14 or newer versions. You can check the version by this command.

node -v
Enter fullscreen mode Exit fullscreen mode

3. Install Ruby

React Native guide recommends to installing Ruby version manager to align your macOS version with React Native.

Currently, macOS 13.2 is shipped with Ruby 2.6.10 which is not what is required by this version of React Native (2.7.6).

Check your macOS ruby version with this command

ruby -v
Enter fullscreen mode Exit fullscreen mode

It gave me 2.6.10 version.

Install chruby

For this I installed chruby ruby version manager.

1- Run this command to install chruby and ruby-install

brew install chruby ruby-install
Enter fullscreen mode Exit fullscreen mode

2- Install the stable version of ruby by running this command.

ruby-install 2.7.6 -- --enable-shared
Enter fullscreen mode Exit fullscreen mode

After the above command is executed, I got ruby 2.7.6 version installed.

3- Configure your shell with the latest ruby version

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-2.7.6" >> ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Make sure to add the same version (2.7.6) in the above command that was installed in step 2.

4- Quit, relaunch the terminal, and check the ruby version again by running this command.

ruby -v
Enter fullscreen mode Exit fullscreen mode

It should say ruby 2.7.6


4. Install Xcode

The best way to install Xcode is through the App store. It will also install the necessary tools and an iOS simulator to build an iOS app.

Make sure to install Xcode of version 10 or newer.

1. Install Command Line Tools

For Xcode's latest version (14.2), open Xcode and choose Behaviors > Edit Behaviors from the Xcode menu.

For previous Xcode versions, select "Preferences..." from the Xcode menu.

Go to Locations section and select the most recent option available from the Command Line Tools dropdown menu.

2. Install CocoaPods

Install CocoaPods by running this command

gem install cocoapods
Enter fullscreen mode Exit fullscreen mode

Make sure to not use sudo while installing any gems. Moncef Belyamani explained it here


5. Create a new application

Let's create a new React Native project called AwesomeProject using React Native's built-in command line interface.

npx react-native@latest init AwesomeProject
Enter fullscreen mode Exit fullscreen mode

After the new app is created, you need to run this command in your project ios folder to install pods

pod install
Enter fullscreen mode Exit fullscreen mode

6. Running an app

1. Start Metro

To run a react-native app, you need to start the metro first. Run this command in the terminal to start metro.

npx react-native start
Enter fullscreen mode Exit fullscreen mode

7. Start the application

Open a new terminal, and run this command to run the app on the iOS simulator.

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

You'll get a new react native app running in the simulator like this

react native demo app

Top comments (0)