React Native – Setup

-
There are a couple of things you need to install to set up the environment for React Native.We will use OSX as our building platform.

Install NodeJS and NPM  on UNIX/Linux/Mac OS X, and SunOS :

$ cd /tmp
$ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
$ tar xvfz node-v6.3.1-linux-x64.tar.gz
$ mkdir -p /usr/local/nodejs
$ mv node-v6.3.1-linux-x64/* /usr/local/nodejs


Add /usr/local/nodejs/bin to the PATH environment variable.


Linux : export PATH=$PATH:/usr/local/nodejs/bin

Mac   : export PATH=$PATH:/usr/local/nodejs/bin


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)"


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.

npm install -g react-native-cli

Step 4.1 Android – Install Visual Studio
You can install Android studio by following this link.

Step 4.2 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.

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.

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

Find Us :


        Facebook  :@apnaandroid

        Google+   : Apna Java

        Youtube   : Android & Java Tutorial



Comments

Post a Comment

Popular posts from this blog

Disable/Hide Year from DatePickerDialog in android

-
Image
DatePickerDialog in Android is the most essential part . We can easily customize DatePickerDialog in Android . Here is the example to disable/hide Year from DatePickerDialog in Android .   The given bellow code will work from API 5.0+ DatePickerDialog Constructor :  1. Context  : Require Application context  2. new DatePickerDialog.OnDateSetListener(){         onDataSet()  // this method execute when user select date and press ok button           {            a. Year  // selected year            b. Month // selected month , it's return previous month. Suppose you select March then it return 2 insted of 3 .            c. Day  // selected date       }     } ...
Read more

Custom Calendar in android

-
Image
Custom calendar is very important part in android . Using custom calendar we can easily customize calendar activity as per our requirements . I am describing how to create a custom calendar in android  . Its very easy to integrate in eclipse as well as studio. I hope it will help you a lot . For create a custom calendar you have to follow these bellow steps . The steps are 1.   Create a shape file  " circile_cyan.xml " in your drawable folder .        <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval" >     <solid android:color="#00FFFF" >     </solid> </shape> 2.   Create a shape file  " circile_grey.xml " in your drawable folder . <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" ...
Read more

Constructor in Java

-
Constructor is a special type of method for create a instance of class. Constructor  name is same as class name . It has no return type . There are two types of constructor in java . These are a) Default Constructor b) Parameterized Constructor. Here is an example   Default Constructor :       public class ConstDemo       {          ConstDemo()           {             System.out.print("Default Constructor");           }          public static void main(String[] args)             {                 ConstDemo demo = new ConstDemo();              }  ...
Read more