Quick Steps :

  1. Install Expo client on the desktop as well as device
  2. brew update (if u already have installed brew) OR 
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. brew install node OR  brew upgrade node (if u already installed)
  4. brew install watchman
  5. create the project in “expo” client

Detail Steps :

Step 1 : Desktop Development Tool: XDE

XDE stands for Expo Development Environment. It is a standalone desktop app that includes all dependencies you’ll need to get started.

Download the latest version of XDE for macOSWindows (64-bit), or Linux.

On Linux, open with chmod a+x xde*.AppImage and ./xde*.AppImage.

you may see Expo app as  Expo-Logo.png click and open expo app you may see expo UI as Expo-UI.png

Step 2 : Mobile Client: Expo for iOS and Android

The Expo client is like a browser for apps built with Expo. When you boot up XDE on your project it generates a unique development URL for you, and you can access that from the Expo client on iOS or Android, either on a real device or in a simulator.

On your device

Download for Android from the Play Store or for iOS from the App Store

iOS simulator

If you can Xcode installed on your mac then no need to worry else follow the following steps

Install Xcode through the Apple App Store. It’ll take a while, go have a nap. Next, open up Xcode, go to preferences and click the Components tab, install a simulator from the list.

Once the simulator is open and you have a project open in XDE, you can press Open on iOS simulator in XDE and it will install the Expo Client to the emulator and open up your app inside of it.

Android emulator

Download Genymotion (free version) and follow the Genymotion installation guide. Once you’ve installed Genymotion, create a virtual device – we recommend a Nexus 5, the Android version is up to you. Start up the virtual device when it’s ready.

Once the emulator is open and you have a project open in XDE, you can press Open project in Expo on Android in XDE and it will install the Expo client to the emulator and open up your app inside of it. If you run into any issues follow our Genymotion guide.

Step 3 : Node.js

Now for the installation. React native uses Node.js to build the JavaScript code. If you already have it installed on your computer, you can skip the next few steps, otherwise, proceed.

We’ll install Node.js using Homebrew This isn’t the only way to install Node but I find that Homebrew is great as a package manager. With it you can easily install the latest as well as specific versions of a package, have different versions of a package, select which version to use, update and uninstall packages, e.t.c. To install Homebrew, go to their website and follwow the instruction at the top of the page.

Follow following command to install Homebrew

  1.  If you have already Homebrew installed
$ brew update

OR 1. If you don’t have Homebrew installed, To install Homebrew run following command in terminal (this link may change so better copy from their website)

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

After Homebrew is installed, install Node.js by pasting the following in a Terminal window.

$ brew install node

To get started with Expo you don’t necessarily need to have Node.js installed, but as soon as you start actually building something you’ll want to have it. you can also Download the latest version of Node.js.

Step 4 : Watchman

Only for mac users

Some macOS users encounter issues if they do not have this installed on their machine, so we recommend that you install Watchman. Watchman watches files and records when they change, then triggers actions in response to this, and it’s used internally by React Native. Download and install Watchman.

Follow following command to install watchman

 1. To install watchman
$ brew install watchman

OR 1. To install the latest build from github:

$ brew install --HEAD watchman

We have completed with all the required setup to run our first app.

To run app follow the steps below 

Step 1 : Create new projectExpo-create

Step 2 : Choose a project name and directory

Screen Shot 2018-02-07 at 10.28.47 PM.png

Step 3 : Run app on simulator

click on device icon and select simulator

Screen Shot 2018-02-07 at 11.35.14 PM.png

Step 4 : Run app on device

click on share icon and scan code from mobile using expo client or you can share via email or phone number

Screen Shot 2018-02-07 at 11.38.14 PM.png

Step 5 : Go to project folder and open node.js file

Do some change in code like change text or change color to see the change in app.

Hello World   or   backgroundColor: ‘red’,

AND YOUR FIRST REACT APP IS READY.

240_F_77959340_hWLiOY93juohUoXqjKzqPB79552nw8XU

Hope you find this blog useful. Please feel free to contact with me in case you have any query, suggestions.  You can comment, like and follow posts.

You can request any topic related to Swift and iOS development.

Advertisements