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 Navigation-Based Application,
Read more

How to draw a pie chart using iPhone sdk?

-
Image
Here’s one way to draw a PIE chart using the latest iPhone SDK. There are a ton of tutorials out there that let you get started with the iPhone app development itself and I am by no means any authoritative source on learning how to develop one. Having said that, here’s a class file that will help you use the UIKit and Quartz to draw vector graphics.  GraphView.h 1 2 3 4 5 6 7 8 9 10 11 12 # #(nothing to see here) #   #import <UIKit/UIKit.h> #import <Foundation/Foundation.h>   @interface GraphView : UIView {   }   @end GraphView.m 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 #import "GraphView.h"   #define PI 3.14159265358979323846 static inline float radians ( double degrees ) { return degrees * PI / 180 ; }   @implementation GraphView   - ( void ) drawRect : ( CGRect ) rect {   CGRect parentViewBounds =
Read more

What is the iPhone SDK?

-
The iPhone SDK is a software development kit that will allow third parties to create applications that can run directly on the iPhone and the iPod Touch . The kit is significant because Apple can't possibly anticipate, nor produce, all the applications that people might want to use on an iPhone. And some of those applications will convince people who weren't sure about the iPhone to buy it.        The apple iOS SDK   (Software Development Kit) is a collection of tools and documentation that you type your code used to develop iOS apps. The main tools that make up the SDk are: Xcode : Apple’s integrated development environment (IDE) that lets your products, type your code, trace and fix bugs, and lots more. Interface Builder : A tool fully integrated into the Xcode IDE that lets you build your application’s user interface visually. iOS Simulator : A software simulator simulate the functions of an iPhone or An iPad on your Mac. Instruments : A toll that you will help
Read more