Setup React Native Environment in Mac for iOS and Androd

-

Step 0 — Install npm and node.js

Go to the node.js website (https://nodejs.org/en/)and install node.js. npm is distributed with Node.js which means that when you download Node.js, you automatically get npm installed on your computer.
npm is a package manger for JavaScript programming language, and the default package manager for Node.js Javascript runtime environment.

Step 1 — Install Homebrew

Open your terminal and run the following code to install Homebrew −
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
If for some reason copying and pasting the above didn’t work, please go directly to the website and copy and paste the command/code from there.

Step 2 — Install Watchman

Run the following code to install Watchman.
brew install watchman

Step 3 — Install React Native

Now, run the following code to install React Native.
sudo npm install -g react-native-cli

Step 4 Android — Install Android Studio

You can install Android studio by following this link.

Step 4 IOS — Install XCode

For IOS development you will need XCode.

Step 5 — Create First App

We will initialize our first app by running the code given below in the terminal from the folder where we want to create the app (in our case Desktop).
cd Desktop
react-native init reactTutorialApp

Step 6 — Run React Native Packager

First, we need to open the app folder in terminal.
cd reactTutorialApp
Now, we can run the packager.
react-native start
You should keep this terminal window running while developing your app.
You may get an error from the above command like below:
NOTE: when you run the app from the .xcodeproj, everything should work fine.
Found Xcode project TestProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer   
tool or in PATHCommand failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer 
tool or in PATH

To resolve the ERROR

Check whether the Xcode command line tools are installed on your Mac:
  1. Start Xcode on the Mac.
  2. Choose Preferences from the Xcode menu.
3. In the General window, click the Locations tab.
4. On the Location window, check that the Command Line Tools option shows the Xcode version (with which the Command Line Tools were installed). This means that the Xcode Command Line Tools are already installed and you do not need to install them.
If the Xcode Command Line Tools are not installed:
In this case the Command Line Tools option does not show the Xcode version. You can install the Xcode command-line tools in either of two ways:
To install the necessary Xcode tools using Xcode on the Mac:
  1. Start Xcode on the Mac.
  2. Choose Preferences from the Xcode menu.
  3. In the General panel, click Downloads.
  4. On the Downloads window, choose the Components tab.
  5. Click the Install button next to Command Line Tools.
6. You are asked for your Apple Developer login during the install process.
To install the necessary Xcode tools from the Web:
  1. On your Mac, to download the Xcode command line tools directly from the developer portal as a .dmg file, go to https://developer.apple.com/downloads/index.action.
  2. You are asked for your Apple Developer login during the install process.
  3. On the Downloads for Apple Developer list, select the Command Line Tools entry that you want.

Step 7 — Run the App on IOS simulator

This step will open your app in the IOS simulator. Run the following command in another terminal.
react-native run-ios
Source: https://www.youtube.com/watch?v=iLgJreGpfyM
The book Learning React Native: Building Native Mobile Apps with JavaScript gives a practical introduction to React Native, the JavaScript framework for writing and deploying fully featured mobile apps that look and feel native. With this hands-on guide, you’ll learn how to build applications that target iOS, Android, and other mobile platforms instead of browsers. You’ll also discover how to access platform features such as the camera, user location, and local storage.
With code examples and step-by-step instructions, author Bonnie Eisenman shows web developers and frontend engineers how to build and style interfaces, use mobile components, and debug and deploy apps. Along the way, you’ll build several increasingly sophisticated sample apps with React Native before putting everything together at the end.

Popular posts from this blog

How to use nsxmlparser in Iphone SDk?

-
Image
NSXMLParser is a forward only reader or an event driven parser. What it means is, an event is raised whenever the parser comes across a start of an element, value, CDATA and so on. The delegate of NSXMLParser can then implement these events to capture XML data. Some of the events are raised multiple times like the start of an element, value of an element and so on. Since NSXMLParser is known as an event driven parser, we can only read data at the present node and cannot go back. The iPhone only supports  NSXMLParser  and not  NSXMLDocument , which loads the whole XML tree in memory. Books Application To understand how to use an instance of NSXMLParser, let’s create a simple navigation based application where we will list the title of the book in the table view and upon selecting a title, display the detail information in a detail view. Click  here  to see the sample XML file, used in this application. Create a new application in XCode by selecting Navig...
Read more

About Xcode 4 features

-
Image
Xcode 4 is the latest iteration of Apple’s integrated development environment (IDE), a complete tool set for building Mac OS X and iOS applications. The Xcode IDE includes a powerful source editor, a sophisticated graphical UI editor , and many other features fromhighly customization builds to support for source code repository management. Xcode can help you identify mistakes in both syntax and logic, and will even suggest fixes. Xcode 4 features a single window, called the  work space window , that holds most of the data you need. A second window, called the  Organizer window , is used for organizing your projects and reading documentation. For iOS projects, the Organizer window is also used to manage  devices. Xcode 4 has many features to make your job easier.          Xcode 4 has a single-window interface for all major workflows (you can have multiple workspace windows and multiple tabs per window)....
Read more

Blocks in iPhone?

-
As a programmer, you’re used to data types like   String , which is a variable type for text. We also are aware of things like   int ,   float , and   double , which are variable types to store numeric values. Finally, we know about things like   NSObject , which is a foundation level class that allows us to bundle various collections of both data types and methods (a.k.a. functions). Blocks bring something significantly different to the table, providing a data type for executable code storage. If that doesn’t make sense to you, don’t worry: blocks can be tough. Their purpose and function becomes much more clear upon seeing examples of their use. One of the most popular types of patterns in which blocks are used is for providing “completion blocks” to objects who perform some kind of asynchronous operation. The following is an example of a method signature provided in my UIView that takes advantage of accepting a completion block from a user: + (void)animat...
Read more