How to install and Setup React Native on MacOS

How to install and Setup React Native on MacOS

Ina HranovaIna Hranova 2 minutes 196 views

Share:

React Native is a popular framework that builds UI Components. It offers faster mobile development, and more efficient code sharing across iOS, Android, and the Web. So we will learn how to install and setup React Native on macOS and create a simple app.

React Native

1. Install Node and Watchman

Firstly, you have to install node and npm. So let’s move to termimal andย  run the following commands in a terminal after installing Homebrew.

brew install node
brew install watchman

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

You can verify npm and node installation, type the following commands:

node -v
npm -v

2. Install react-native-cli

Run the following command in the terminal:

npm install โ€“g react-native-cli

This line will install the npm package react-native-cli with dependencies inside the globally shared node_modules folder.

3.Initiate the project

npx react-native init my-app

It contains the actual React Native framework code and is installed locally into your project when you run react-native init. Because react-native init calls npm install react-native, simply linking your local GitHub clone into npm is not enough to test local changes.

It will install all new react-native packages and create my-app structure for us including iOS and android folders.

4.Run React Native App

cd my-app

5.Finally, run the project with Simulator/Emulator on macOS

I hope you have already installed Xcode. If you haven’t Xcode, go to read here. Once you have installed Xcode via the App Store, open the Xcode and the menu bar, choose Xcode > Preferences as follows

Click the Components tab, and install a simulator from the list of provided simulators:

Installing iOS simulator in Xcode | React Native
We recommended installing the latest version 11x.ย  Type the following command:

react-native run-ios

This will open the simulator iPhone lastest version and you’ll see the app.

 

React Native with Android and iOS

That’s it! You’ve successfully run your first React Native app. Happy coding. ๐Ÿ™‚