Getting started with React native


It's been a long time since i have posted anything in this blog. I have been trying react-native for the last 3 months. And it's been a wonderful experience. From a Angular background it seemed difficult to adopt react initially. Once i got it, it seems very easy and interesting. About the performance of RN is just awesome.
I am using
 Windows 10 
 Android
Installation
Installation is pretty simple. There are two ways to create an application, using expo-cli and react-native-cli. I prefer the second one. It seems like a little complex but when developing large application it's the best way to start.

Setup
As a prerequisite we need to install nodeJS, Python, JDK and need to setup Android. We need to install react-native-cli globally for creating and running the project
 npm install -g react-native-cli

Running
Once you install the cli we can create the application.
 react-native init firstProject
After creating the application we can move into the application folder and run the application. Before running the application we need a running emulator or a device connected to the system.
cd firstProject 
react-native run-android
Voila you could see the application in the emulator/device.

Debugging
Debugging is pretty easier. There is remote debugging is possible in RN. On emulator just run
Ctrl + M
it will show menu with "Debug JS Remotely". Select the option it will open the debugger window on the browser. If the debugger not loading try 
http://localhost:8081/debugger-ui/

On Device run the following command on the shell 
 adb shell input keyevent 82

Network Debug
Debugging the http network is little bit tricky. I use Reactotron which is basically a good way to check the request/response of each http calls. In Windows for installing got the releases page and download the appropriate zip. Unzip it in a convenient place and add the folder it to the ENVIRONMENT VARIABLES. Once you added, you can run the app from bash/command. Before running you need import config file in the index.js or app.js. I generally add in the index.js.
You need to install the reactotron-react-native
npm install reactotron-react-native --save-dev
Sample config file looks something like this
 import Reactotron from 'reactotron-react-native';

Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!
Also you may have to run the following command to connect to the port
 adb reverse tcp:9090 tcp:9090
On Production release you have to comment the import unless it will have some performance issues.

So that's it. Try react-native!



Location: Thiruvananthapuram, Kerala, India

Comments

Post a Comment

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done.
Am using
PostgreSQL 9.1WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists
1. Apache Version :2.2.17  2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin.
Install WAMP server where ever you need.
Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation.

At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error.

Your PHP installation does not support PostgreSQL. You need to recompile PHP using the --with-pgs…
Read more

Upload Video to Facebook Using Actionscrpt 3.0

For the last one week am searching for uploading video to Facebook using Graph Api from Flash. First challenge is to find something which will help to capture video from webcamera and convert it to ByteArray.
The problem is Actionscript doesn't had any utlity to save video from webcamera. It uses Flash media server to save video. But i need something which not uses any server side acript.
After searching several hours in google i found a link.
http://www.zeropointnine.com/blog/updated-flv-encoder-alchem/

In this utility it uses snapshots from the webcamera which will encode it . Though it had some drawbacks and limitations, it serves my requirement for small videos. I used it for creating videos.

Next i need to upload video to facebook. This is the api used to connect facebook using Actionscript.

http://code.google.com/p/facebook-actionscript-api/

This API uses a different function for uploading videos to facebook .Facebook.uploadVideo(). The reason for different function is that ,…
Read more

Angular - 4 year road map

Image
AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework.
My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4
One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interesting. …
Read more

Flash FLV player using PHP

After a long experiments , i have developed another player which uses XMOOV for streaming.Actually i got this php from flashcomguru.com.I didn't change the php file instead of it i developed a player using this php.
The player will start streaming anywhere from the file and it also make the seeking operation in the cached file.

Download Source here

I have no server space so i use freewebs space ,.Pls forgive me :D

The main problem of this technology is the performance of the php server.It need a good php server which can handle more requests at a time.
Other problem is the encoding of the flv. Flv file should be added with the 'keyframes' metadata . So it need another utility called metadata injector ,which will inject metadata to the flv. It can be downloaded from here.
That's all ..... and all other ups to you.
Try this..
If you are using this file please let me know your feedback.
Read more

Angular4 - primeng, ngx-bootstrap

In previous post we tried to create module, component and routing. Lets look into how to add third party libraries.

You could check out the code from here.
git checkout -b part3.0 origin/part3.0
In Angular4 adding third party libraries is pretty easy. Install using npm and add the module. Its one of my most loved feature in Angular4.

PrimeNG

PrimeNG is one of the most used and most popular Angular4 library. It consists lot of components and its easy to setup and use. Besides it does have a good team working behind this library. In my experience it's one of the fast developing library.
To install PrimeNg run

npm install primeng --save
npm install font-awesome --save
PrimeNg needs font awesome for icons . Unlike any other libraries , PrimeNG had separate module for each component, which helps to include only selected component in the bundle.
Lets include styles for the components. In .angular-cli.json add

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.cs…
Read more