Step-by-Step Guide: Running Your First React Native iOS App in 2023
Tags: reactnative, javascript, beginners, programming
Published: 2023-02-28 16:46:36

Previously I wrote about react native getting started guide in 2020

{% embed https://dev.to/aneeqakhan/how-to-run-your-first-react-native-app-on-macos-1ha8 %}


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)"
```
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
```

*Make sure to install Node 14 or newer versions. You can check the version by this command.*
```
node -v
```

---------

## 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
```
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
```

2- Install the stable version of ruby by running this command.
```
ruby-install 2.7.6 -- --enable-shared
```
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
```
*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
```
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
```
Make sure to not use `sudo` while installing any gems. Moncef Belyamani explained it [here](https://www.moncefbelyamani.com/why-you-should-never-use-sudo-to-install-ruby-gems/)

--------

## 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
```

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

---------

## 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
```

### 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
```
You'll get a new react native app running in the simulator like this

![react native demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmy8yvdvtdwol0mcsukh.png)