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       }     }      3. Year // popup visible year  4. Month  // popup visible month  5. Day   // popup visible date Step 1:   Create Project            a) Open Android Studio           b) Go to File >New> New Project  > Project Name  > Next > Next > Next > Finish  Step
Read more

Coordinator Layout in Android

-
Image
CoordinatorLayout is a super-powered FrameLayout.CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout As a container for a specific interaction with one or more child views By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation. Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate. Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. Thi
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