Facebook React Native for cross browser mobile application development

Since the inception of Inducesmile.com, I have focused on writing tutorials on how to develop android applications. Although I will continue to write quality and educative tutorials on android platform but I also feel that now is the time to incorporate React Native for cross platform mobile application development (Android and iOS).

If you have not heard for React and React Native. These are two technologies from Facebook which they have been using to development most of their application (both mobile and web).

You can check it out on Facebook official website for React.js and React Native.

Although there are few other technologies that have been in this area – using HTML(5), CSS(3) and Javascript to build cross platform app. Many of the have suffered with performance when use in heavy graphic or intense process application.

This category will focus on how to develop both android and iOS mobile application using React Native. It is will not go into why React Native is better than Cordova or phonegap war. Every technology has it own win and lose.

React Native is base on Component programming. Each component is responsible in a particular task. More so, every single element in the application interface can be represented as a component.

This is an excerpt from Facebook React Native guide.

Native Components

With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.

// iOS

var React = require('react-native');

var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({

render: function() {

return (

<TabBarIOS>

<TabBarIOS.Item title="React Native" selected={true}>

<NavigatorIOS initialRoute={{ title: 'React Native' }} />

</TabBarIOS.Item>

</TabBarIOS>

);

},

});

// Android

var React = require('react-native');

var { DrawerLayoutAndroid, ProgressBarAndroid } = React;

var App = React.createClass({

render: function() {

return (

<DrawerLayoutAndroid

renderNavigationView={() => <Text>React Native</Text>}>

<ProgressBarAndroid />

</DrawerLayoutAndroid>

);
},
});

This is a brief idea but React Native tutorials we will be covering in our blog. I hope that at the end of the day we will learn so much and become a better React Native developer.

This will also be beneficial to companies, individuals and indie developers that want to use a single source code to power their android and iOS application.

I will like to hear from you and know what you think about Facebook React Native.

Add a Comment