How to run the first React Native iOS app in 2023

Previously I wrote about react native getting started guide in 2020

How to run your first React Native App on macOS for iOS devices
Aneeqa Khan ・ Mar 5 ’20 ・ 2 min read

#reactnative
#…


This content originally appeared on DEV Community and was authored by Aneeqa Khan

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

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

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

2. 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


This content originally appeared on DEV Community and was authored by Aneeqa Khan


Print Share Comment Cite Upload Translate Updates
APA

Aneeqa Khan | Sciencx (2023-02-28T16:46:36+00:00) How to run the first React Native iOS app in 2023. Retrieved from https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/

MLA
" » How to run the first React Native iOS app in 2023." Aneeqa Khan | Sciencx - Tuesday February 28, 2023, https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/
HARVARD
Aneeqa Khan | Sciencx Tuesday February 28, 2023 » How to run the first React Native iOS app in 2023., viewed ,<https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/>
VANCOUVER
Aneeqa Khan | Sciencx - » How to run the first React Native iOS app in 2023. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/
CHICAGO
" » How to run the first React Native iOS app in 2023." Aneeqa Khan | Sciencx - Accessed . https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/
IEEE
" » How to run the first React Native iOS app in 2023." Aneeqa Khan | Sciencx [Online]. Available: https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/. [Accessed: ]
rf:citation
» How to run the first React Native iOS app in 2023 | Aneeqa Khan | Sciencx | https://www.scien.cx/2023/02/28/how-to-run-the-first-react-native-ios-app-in-2023/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.