React Native is a JavaScript framework that allows for the development of multi-platform Android and iOS applications using native user interface elements. It is based on React, Facebook’s JavaScript library for building UIs, and targets mobile platforms. Also, it supports new JavaScript (ES6+) features, such as async/await etc.
This open-source mobile application framework started in the summer of ’13 as Facebook’s internal hackathon project. After months of development, its first public preview was released in the first month of ’15 at Reactjs Conference and then in the third month, Facebook made React Native open and available on GitHub.
Since then, it has been widely adopted in the mobile development industry because of its ability to produce native apps and superlative UIs, while requiring less time and efforts for development. As easily evident from the figure below, in just a year after its release, the react Native usage increased exponentially when compared to others.
So now, it should not be surprising for you to find that many of the applications under use today have business logic built using mostly JavaScript rather than Java/Kotlin or Objective-C/Swift. Some of the most notable examples include Tesla, Facebook, Skype, and Instagram.
I think before going ahead, let’s first have a quick overview of what ‘native app’ means, so that those who are still little confused have their confusion cleared up.
What are the native mobile apps?
Well, they are those apps which are specifically created for an OS, either Android or iOS in this case. For building a native app on iOS, requires coding in Objective-C/Swift development language using Xcode and Android requires coding in Java/Kotlin where integrated development environment is Android Studio.
Coming to React Native, its apps are written using JavaScript web programming language and JSX markup syntax. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C or Java. The final UI is rendered using actual native views (not WebViews) and fundamental building blocks that are indistinguishable from the applications built using Swift or Java.
Another thing we should have a look at is React JS before we delve into the details of React Native.
What is React JS?
Let me describe it for you in simple three points:
- It is a JavaScript library created by Facebook Open Source
- It is a User Interface (UI) library
- It is a tool for building UI components
React Native have certain resemblance to it, however, React Native utilizes native components rather than web component as fundamental building blocks. To get a hold of the essential structure of a React Native app, you’ll have to go through the crucial React ideas, as JSX (XML-esque markup), components, state and so on. However, learning React JS is not strictly necessary, if you want to build apps in React Native, you can simply start with just React Native.
What is React Native?
Well, I think you can easily find the answer to this question in the beginning paras, the only thing that’s missing from those paras is the technical aspects of React Native architecture. So, here we’ll take a look at how it works.
If you cast a look at the JavaScript part of the code of a React Native app, you’ll find that it’s quite different to the extent that people familiar with the older standards of JavaScript only, will say it’s not JavaScript. ES2015 (formally ES6) brought a lot of enhancement to JS that is presently a part of the official standard.
Thanks to Babel transpiler, RN supports many features of JavaScript ES6, so you can utilize it without worrying over its compatibility with different devices. A grammar for encapsulating XML inside JavaScript, JSX appears like HTML, but instead of using <div> or <span>, you will utilize React Native components. Anything you see on the screen is a type of component.
In the end, let’s go through the pros and cons of React Native:
PROS — React Native
- Faster to Build
The primary advantage of React Native is that it is timesaving. The reason behind the shorter development time is the amount of pre-formed elements, meaning copy and paste approach can be taken quite often.
Since, it’s a new technology that’s why you’ll find that it lacks some solutions, so you would probably be required to make them from scratch. But it’s based on JS, which gives access to the largest package ecosystem in the world, npm, and as time passes it will only get better. As the RN community is growing and Facebook is regularly introducing new updates, I don’t think that day is very far when you’ll find ready components for most of the solutions.
- One Framework, Multiple Platforms
Another reason why the development time is considerably shorter is because React Native is a cross development platform, & when it comes to saving time and resources throughout the development process there is no better method than it, as it allows you to use the same code base for building an iOS and Android app. That’s one of the primary reasons many industries and even individuals today prefer using React Native.
Besides shortening the development time, it could help improve the consistency of your app’s business logic between all supported platforms.
- Hot Reloading
Thanks to hot reloading, you can see changes applied to the code on emulators, simulators, and hardware right away without the need to rebuild the app. This saves you time on the compilation. Now, you can fix bugs & add features quickly, thus allowing you to accelerate the development process.
- Smaller Teams
Since, React Native uses the same code base for building an iOS and Android app. Meaning that one development team will suffice, also it enables you launch apps on both platforms concurrently. Furthermore, you can update your app and add new features or changes simultaneously.
Making it superior to native development which requires two separate teams for Android (which requires coding in Java or Kotlin) and IOS (which uses Swift or Objective-C) due to a stark difference between the technologies required by these platforms. This can lead to a load of issues which will ultimately result in slower development time.
Cons — React Native
- Debugging
It is a complex procedure to debug an app built from RN. You will have to look into the manner in which this framework produces the code and decide how to act on it.
- Young technology
Officially released on November ’15, as mentioned above, React Native is still young. Despite the active support from Facebook and its growing popularity, there’s still a lack of ready components for most of the solutions. So if you are looking for advanced functionality, then I think Native development may be a better option for you.
Final thoughts
Alright this is it, I guess this much information will be enough to help you make up your mind. If you ask me, I’ll say despite having a few loopholes and hiccups, React Native is an exciting framework that enables you to create robust mobile applications using your existing JavaScript knowledge.
Remember, the final decision about which technology to choose for your project should be based on your resources and the kind of end product you are looking for. So, first clearly define a core purpose and key functionality of your app. Once the major features and the results you want to get are determined, from there on it’ll be easier for you to understand which approach suits your needs the best.