iOS Simulator and Live Code Reloading— React Native

In the previous post, we setup the environment for React Native development (Xcode, Node.js, watchman, React Native CLI). In this post, we’ll create our first project and run the app in the simulator.

First Project

Enter the following command in your Terminal to generate the precursor project template.

react-native init MyTaskList

In the iOS folder there is a file — “MyTaskList.xcodeproj”. Double click to open.

Xcode Window after Processing the Project

Building App Bundle

Browse to the folder where your project files are created.

cd MyTasKList

Now it’s time to build the app by using the build-in package manger of React Native.

npm start

All the JavaScript code will be bundled so that the app will be capable of running on iOS!

NPM Start Process Running in the Terminal

Now click on the play button to launch the iPhone simulator and get a view of the default app. By the way if you directly click on Play without hitting ‘npm start’ in the terminal, then the terminal will be automatically launched by Xcode.

Here is how it looks in the simulator:

Edit Code and Refresh

Fire up your favourite editor and open the index.ios.js file.

We’ll just make one minor change, i.e. replace “Welcome to React Native!” (line 20) with “Welcome to My List!”.

Now we’ll just press CMD + R to see the changes we made reflect in the simulator. This is indeed of the most remarkable feature of React Native.

Following is the simulator screen after updating the code.

In the next post we’ll start learning about React Components.