Step-by-step on how to create a react-native app from scratch. This guide is for Mac users.

Pre-requisites

  • Xcode 11
  • Android Studio 3.2 or later

Install NVM

Follow the steps in this link to install nvm. https://github.com/creationix/nvm. If you have node already installed, please uninstall it and use nvm to manage your node installations.

Install node

As of this current writing, react-native 0.57 works well with node version 8.12.0. Set your node version as default.

$ nvm install 8.12.0
$ node alias default 8.12.0

Install React Native CLI

You will need this to link the dependencies of your project easier. Better to install globally.

$ npm install -g react-native-cli

Create new project and link the dependencies

Now it is time to create your new project from scratch. Keep in mind that creating project with dashes (e.g. my-project) has some issues with upgrading versions of react-native. So better create projects in small cases or camel-case.

$ mkdir myproject
$ react-native init

Afterwards, you will need to link dependencies to ios / android.

$ react-native link

Now, you need to run the react-native app. But this won’t run any simulator yet.

$ npm start

Run iOS simulator

Open the xcode project in your project folder / ios.

$ cd ios
$ open myproject.xcodeproj

or 

$ open myproject.xcworkspace

In the upper left of your Xcode IDE, press Play button. Yey! You finally run your first react-native application. Congrats!

Running on iOS device

You may be able to run to actual iOS device if you have Apple Developer Provisioning Profile. If you have one, then it will be the same procedure.

To take note is that, if you will run the app on device. You must set it as Release mode. You can change that in Xcode IDE

Edit Scheme > Run > Info tab > Build Configuration: Set to Release

You may also use Debug to on device. But keep in mind that the network of you Xcode and device should be the same. Better to run it on the same Wi-fi network. If not, then use Release mode.

Leave a Reply

Your email address will not be published. Required fields are marked *