I spent last few years searching for a perfect hybrid mobile framework, and I still haven’t found what I was looking. At one point, I thought Ionic Framework was the one and while pretty close it was still not fluid enough (this may change with angular 2.0, but I won’t hold my breath).
To my surprise, for some reason, I completely missed React Native. It’s a semi-hybrid mobile framework, built by Facebook, made on a foundation of React.js.
First things first, React Native is not a direct competitor to frameworks like Ionic, Onsen UI, Kendo UI, jQuery Mobile. That’s why I’m calling it a semi-hybrid mobile framework. Previously mentioned frameworks are used to create hybrid mobile applications.
For those of you who never heard of this concept, that’s a mobile application made with JavaScript and HTML5 and wrapper using frameworks like Cordova or PhoneGap, where a code is displayed on a mobile platform web view.
React Native works a little bit different. In a similar fashion to Titanium or Xamarin, React Native uses JavaScript and JSX to create a fully native mobile application.
Applications made like this are entirely native, only real difference is that you don’t need to learn a particular language for every specific platform. So, Java and Object C are replaced with React.js (JavaScript). Or in case of Titanium or Xamarin with vanilla JavaScript or C#.
Unfortunately, this approach has one significant disadvantage. Using JavaScript and HTML5 (classic hybrid mobile application) you can create anything you can think of, UI is your playground. This approach, on the other hand, can use only components available to native application platforms.
Before we go further, let me warn you that this review is intended as an introduction to React Native. I have no intention of going too deep. If you need more specific information you can find it in React.js discussion forum.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


War between Hybrid and Native

Several years ago, we were introduced to iOS and Android platforms, and many mobile app developers are still trying to decide between a hybrid and native mobile development. From a native approach created by Google or Apple or generating apps with the help of cross-platform solutions. This is a tricky situation because each approach offers advantages and downsides.
Some experts believe that the use of native tools is much more beneficial in building the exceptional user interface experience. Native applications are faster, cleaner, and they behave and look just the way users expect them to be.
However, creating native applications is a bit harder to learn and can also require much more time to master properly compared to the hybrid mobile development. Additionally, native applications require a complete code rewrite before they can run on other mobile platforms.
In recent times, cross-platform development has been the bread and butter of most web developers. This includes the use of HTML, CSS, and JavaScript. In theory, this kind of development can be used to create a single product available on all available platforms.
Unfortunately, in reality, this approach is perforated with various issues that concern with the performance and compatibility. This can result in many problems; the user experience is halted due to the awkwardness of available UI, animations are usually not on the same level compared to native applications, they can even consume too much power resulting in device overheating thus, affecting battery life.
But with the innovation of React Native, there’s an excellent balance between the hybrid and native approach. This lets developers use JavaScript to create mobile applications for almost any mobile platform available while displaying the UI with the help of native platform mechanisms. This is one of the biggest reasons why many JavaScript developers have taken a big leap forward to embraced the emergence of native development frameworks like React Native.

What is React Native

React Native is a Facebook, and Instagram developed JavaScript library used in creating native mobile applications. This is the newly developed open source framework by Facebook, which permits someone to write iOS (this now also includes Android platform) applications using JSX, a known HTML look-a-like code, and JavaScript.
It is an innovation created on the foundation of the React.js JavaScript framework; however React.js is not natively supported in an iOS (or Android) applications unless you count execution inside a web browser like Safari or Chrome.
In few words, you will use JavaScript and JSX to create a native mobile application, altogether skipping all downsides of hybrid development.

What will developers get out of this

This new advancement allows developers to have declarative, independent user interface modules and quick development cycles on both major mobile platform. All of those have been achieved while keeping the swiftness, reliability and the look and feel of native applications.
As you can see, React Native lives to its popular paradigm, “Learn once, write anywhere”.
This approach may also give you a headake. React Native heavily relays on abstractions. Technically, there’s a layer of code between your implementation and what you see. Similar to what Cordova does for hybrid applications, React Native needs a way to communicate with native components, and this is where a problem lies. Because a lot of these components were written by the community, there’s a good chance you’ll encounter a bug, or ever worse, a memory leak. These are precisely the problems currently affecting Xamarin and Titanium, and they don’t even have such a large community.
I almost forgot to mention the most important bit of information. React Native is not a write-once-run-anywhere framework. Technically, code written for iOS will not work on Android platform and vice versa. You need to understand that iOS platform uses different layout flow, components, design patterns compared to Android. Because of this it’s impossible to create one solution to cover everything.

Why go for Open Source

Like any other developer, one may ask why Facebook agreed to give away such a powerful technology just like that. But, why did Facebook opened sourced the React Native? Tom Occhino, Facebook Engineering Manager, described the three main reasons below:
  • Contributions within the community: Numerous significant contributions are shared and collected among different communities.
  • Recruitment: Many people want to learn and expand their knowledge about the vast technology that influences many different things including Facebook. These people are keen enough to join groups that have something to do with creating stuff such as this.
  • Engineering onboarding: Engineers who believed in the power of React Native development will stay ahead, all thanks to the better understanding of current modern technologies.
Facebook may have given a lot when they decided to open source React Native, but what they gave up might just be the reason of what they have right now. Facebook acknowledges that they cannot do all on their own; it’s high time to give developers the opportunity to continue the mission on their own.

Why developers need React Native

Although creating a native mobile application needs ample time, it offers many reasons why experiences on mobile platforms are better compared to the web. Some of the reasons why native development is important are listed below:
  • Speed, speed, speed …. it’s all about speed
  • Developers can easily access platform specific UI components such as maps, pickers, dates, switches and navigation stacks
  • Automatically updates when having changes to the platform
  • Contains a sophisticated native mobile gesture recognizers

How React Native works

No matter what you see in the final product, applications created using the React Native will remain a hybrid apps, written in JavaScript and HTML.
Just like any native apps, react Native implements native views. A user can still get a similar platform look and feel on the Android and iOS, just like with any other native apps built with Java or Objective C.
React Native uses a special Xcode or Android SDK container for new applications. When a developer loads the code, the React code is fed into the JavaScript runtime that asynchronously connects with the main thread.

Pros of React Native

  • Renders native views with a native behavior and interaction … you’ll end up with a real native application
  • Has a paradigm of “Learn once, write anywhere” where developers only need React and JavaScript to create better application for Andoroid, iOS.
  • Uses native architecture and concept
  • It does not require a WebView
  • No need for compilation step which offers better development experience and faster loading rates
  • Cmd+R to refresh and you will immediately see related changes … no classic deploying
  • Excellent error reporting
  • CSS Flexbox is used for layout design
  • Ever growing community plus large 3rd party support

Cons of React Native (Limitations)

  • Code abstraction leads to bugs and memory leaks.
  • Cannot work without the API, which is provided by React Native, technically there’s no fallback like with classic hybrid mobile apps
  • When creating proper native applications, a developer will have more power and control regarding performance tuning
  • Currently it only supports two major platforms, iOS and Android.
  • Windows development is still not fully supported, this will hopefully change over time
  • React Native is still a new framework so we can’t predict possible problems and downsides
  • React Native is not a write-once-run-anywhere framework. Code writen for iOS will not work for Android and vice versa.
  • Some specific components will not have available implementation so you’ll need to write them on your own.
These cons are somewhat negligible, especially if we consider that React Native is empowering more and more native applications with each passing day.
Last but not least, React Native provides the separation between the native UI and the logic that energizes it, using a reactive approach. The UI runs on a developer’s mobile device while the logic can run anywhere. What does it mean? Technically when developing with React Native we can utilize the same workflow we are using when developing hybrid applications. The developer can see the effects of the changes being made on the mobile device. This way, you can save time, thus been more creative, with enough time to experiment with new ideas.

Other Features of React and React Native

Here’s a combination of React and React Native’s features that you should know.
  • Ability to share or combine source code between React and React Native
  • For the UI, react Native uses the Flexbox
  • Developers are able to use EcmaScript6

Important Reminder

If you decide to use React Native, you should also be able to learn how to use React.js. At first it may seem easy, but you may encounter several complications. You may be an expert at JavaScript, but that skill is not enough in this case. To be successful in this kind of application developer, one must be capable of building apps with the use of various components including but not limited to wrappers and APIs. That is why, learning and understanding the use of frameworks like React and React Native is crucial to most developers.


Since Facebook has already made React Native open sourced, it is now open to everyone, and it’s free to use. It’s for us (developers) to experiment with it and to master new ideas. Just like with any other software, React Native can quickly and explicitly incorporate other available frameworks and platforms.
So, what does it bring to developers and the world of web and mobile applications? Many have predicted that in time, there will be cleaner and more responsive way of building mobile applications. Also, even high-quality application development will turn out to be a lot inexpensive. Developers will also shift their income to create a much better user experience while at the same time creating more dynamic and imaginative applications.
The use of React and React Native may be stressful and complicated if you’re a mobile application development rookie. However, developers and end users will benefit from this powerful technology. All you need is to learn and understand how to effectively and efficiently use this framework, and it will be your key to a successful investment for a living.
So is this framework a next great thing? I would say no. Xamarin and Titanium didn’t change the playfield. Why should React Native succeed where those two frameworks failed.
But React Native has one significant advantage over Xamarin and Titanium, it’s oper source. Which will hopefully translate to much larger and stable community.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs: