A small guide on how to run your React Native app on iOS using the XCode Simulator

You decided to create a new application for iOS and you want to program the app with the React Native framework.

Here is a list with all the steps you have to take if you want to start XCode Simulator and test the UI of your application on your developer machine:

• Open a terminal

• If this is your first application with React Native, then install the framework globally in your developer machine by typing this command in the terminal: npm install -g react-native-cli

• In the terminal navigate to the folder you want to store your new React Native app

• Run the following command react-native init NAME_OF_THE_PROJECT

• A new folder with the name NAME_OF_THE_PROJECT was created. The folder contains the standard structure of a React Native application for both iOS and Android devices.

• You now have two options if you want to test your new application using the XCode Simulator:

  • Type react-native run-ios, and the XCode Simulator starts automatically. You want to choose this option when you do not use XCode to write you code but another IDE.

    There is often the case that when you do a change in your application and hit command+R in the Simulator, that the application will not be updated. If that is the case, then terminate the execution of the command in the terminal and run the command again.

  • If you want to use XCode as your standard IDE then start XCode and click on the Run (Play) button. The application will be built and after a while you are going to see your application in the XCode Simulator.

    Changes are that you are going to see the following error screen:

    If that is the case, you will have to run the following command in the terminal npm start, so that the node server runs and can answer the requests sent from the Simulator to the application.

There might also be the case, that you already started a node server for your application, you want to start the Simulator again and now you get the following error message in the terminal when you hit npm start:

The error message indicates that you are trying to start a node server on a port that is already being used (most probably by an older node server instance). To solve this error just run the two suggested commands:

• lsof -n i4TCP:8081, will show you which process is using the 8081 port and which is the PID of this process.

• kill -9 THE_PID_FROM_THE_PREVIOUS_COMMAND

Now you can rerun the npm start command.

Drop me a line if this small guide helped you.