# Setting Up React Native for iOS Development on a Mac

Language: en
Canonical: [Setting Up React Native for iOS Development on a Mac](<https://allluckly.cn/en/journal/2016-07-27-setting-up-react-native-for-ios-development-on-a-mac/>)
中文：[中文 HTML](<https://allluckly.cn/react%20native/React-Native01>)
English: [English HTML](<https://allluckly.cn/en/journal/2016-07-27-setting-up-react-native-for-ios-development-on-a-mac/>)
Published: 2016-07-27T00:00:00+08:00
Modified: 2026-10-23T10:34:15+08:00
Author: [Bison](<https://allluckly.cn/about/>)

Records a React Native setup on macOS: installing Homebrew, Node.js, watchman, and flow, creating a project, opening the iOS project, and refreshing code in the simulator.

Originally credited to Bison. Content is retained as published.

English translation of the [Chinese original](<https://allluckly.cn/react%20native/React-Native01>), translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

**Before you read** This technical note dates from 2015–2017. The examples have not been rerun as part of this archive update. Published in 2016, the article uses index.ios.js and the React Native project initialization workflow available at the time.

1. If your Mac does not have [Homebrew](<http://brew.sh/>)Install in this order:

- Open Terminal and enter:

```

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

```

- Update Ruby; older versions cannot install some components.

`brew install ruby`

2. Install [Node.js](<https://nodejs.org/>)

Here I download and install it directly.[Node.js](<https://nodejs.org/>): [https://nodejs.org/en/download/](<https://nodejs.org/en/download/>) Simple and convenient.

3. Install [watchman](<https://facebook.github.io/watchman/docs/install.html>) and [flow](<http://www.flowtype.org/>)Execute these two commands separately:

```
brew install watchman

brew install flow
```

3. Install React-Native

```
sudo  npm install -g react-native-cli
```

Then enter your login password. Success produces this message:

![1](<https://allluckly.cn/images/blog/React%20Native/1.png>)

The environment is configured. Create a test project with the following code:

```
react-native init testProject
```

testProject is the project name and can be changed. Wait **After a while,**depending on network conditions, project initialisation completes. Success looks like this:

![1](<https://allluckly.cn/images/blog/React%20Native/2.png>)

4. Enter the project directory

` cd testProject  `

The directory structure is:

```
golddeMac-mini: testProject gold$ ls -l
total 24
drwxr-xr-x  10 gold  staff   340  7 27 10:46 android
-rw-r--r--   1 gold  staff  1103  7 27 10:46 index.android.js
-rw-r--r--   1 gold  staff  1069  7 27 10:46 index.ios.js
drwxr-xr-x   5 gold  staff   170  7 27 10:46 ios
drwxr-xr-x   5 gold  staff   170  7 27 10:46 node_modules
-rw-r--r--   1 gold  staff   238  7 27 10:46 package.json

```

![1](<https://allluckly.cn/images/blog/React%20Native/3.png>)

android and ios contain the respective platform projects. index.android.js and index.ios.js are their corresponding JavaScript files.

5. Run the project

For iOS, open the project in Xcode and run it. Edit index.ios.js, then press ⌘ + R in the simulator to reload JavaScript and see the changes.

Debugging on an iOS device is simple too: change the HTTP address.

```
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

```

Successful execution looks like this:

![1](<https://allluckly.cn/images/blog/React%20Native/4.png>)

References: [Official React Native documentation](<https://facebook.github.io/react-native/docs/getting-started.html#content>)

Questions are welcome in the comments. If helpful, give it a like. Time permitting, I will continue sharing what I learn about React Native.