Skip to main content

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

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

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

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';

  .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!


Amy Wong said…
Listen, they advised me that this site well free online casino said that it’s not the scam that I decided to take the risk for and while everything was fine and you were on this site?
Tony Chew said…
Kriteria kartu jackpot poker online Royal Flush >> Mendapatkan bonus jackpot sebesar 80% dari total jackpot di meja. Straight Flush >> Mendapatkan bonus jackpot sebesar 30% dari total jackpot di meja. Four of a Kind >> Mendapatkan bonus jackpot sebesar 10% dari total jackpot di meja.
bandar ceme terbaik
paito warna terlengkap
syair sgp
Nice Post thanks for the information, good information & very helpful for others. flipkart lucky draw For more information about Online Shopping Lucky Winner, Flipkart, HomeShop18, Shopping Lucky, Draw, Contest, Winner, Prize, Result, 2018 - 2019 Flipkart Lucky Draw Winner
steve said…

تعد الاول افضل شركة تنظيف خزانات بالمدينة المنورة تعمل على استخدام افضل ادوات تنظيف وتعقيم خزانات المياه
steve said…

اعالى الخليج تقدم افضل خدمات نقل العفش الدولى المتميزه باسعار متميزة ومنها :

شركة شحن عفش من الرياض الى دبي
نقل عفش من الرياض الى الاردن شحن عفش من الرياض الى الاردن
Steve Roger said…
In this present era of digitalization, a mobile application is one of the primary necessities for today’s modern-age businesses to stand-out in the industry, including even the top Indian app developers of the market are swapping towards mobile applications rather than the ordinary websites. The applications developed through cross-platform are apparently becoming more prevalent in the market, and React Native is one of the most preferred cross-platform development solutions by the developers as it allows them to preserves native platform compatibilities through react development.

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…

Angular 4 - Modules, components and routing

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing.

You could check out the code from here.
git checkout -b part2.0 origin/part2.0
We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components.

npm install bootstrap@3
We need to add the bootstrap stylesheet in tha .angular-cli.json.

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Our first Module

Lets add a new module employee. Inside "src/app" run

ng generate module employee or
ng g m employee
Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also.
ng g m employee --routing
Time for component

It will create new employee module with its own routing.lets add a component for listing the employee. So inside employee folder run

ng g c empl…

Angular - 4 year road map

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. …