React Native Guide – 2020 Intro to Top Mobile Framework

Share

If you are wondering what is React Native, let me explain that to you, step-by-step in the comprehensive guide below.

With over 3.2 billion smartphone users in 2019, it makes perfect sense that the mobile app industry is in bloom. The number of mobile internet users is even higher, reaching 4.2 billion. These numbers are still growing at a steady rate and there’s no sign that the tendency is about to reverse.

What are we all doing on our phones? Well, stats say that 90% of mobile time is spent on mobile applications.

With the market being huge, it got quite competitive in the mobile app business. Companies challenge to deliver a better mobile experience to their users not matter what. They can choose from a vast number of mobile app development frameworks, with React Native being one of them.

In this comprehensive React Native guide, we will explore:

  • what is React Native
  • the famous companies using it,
  • when and why you should use it for your project
  • what are its alternatives.
  • and how to start with it
Chef master is making an app platform

What is React Native

React Native is a JavaScript framework that lets you build mobile apps that can run natively on both Android and iOS. It was created upon React.js – a component-based framework for building frontend web applications and user interfaces.

The work on the popular mobile app development framework started during an internal Facebook hackathon in 2013. It was first released to a global audience at React.js conference at the beginning of 2015 and in March of 2015, it became an open library on GitHub, quickly taking the mobile development world by storm.

Since then, it has become widely embraced by companies and developers over the world. Why? Doubtlessly, because of its ability to develop beautiful UIs and native apps quickly.

Increase in React Native’s popularity since its release in 2015 – Source

React Native has proved tremendously successful, immediately beating interest in classic Android and iOS development and popularizing the concept of cross-platform app development. You may be confused about what cross-platform app means, so let me explain this shortly.

What is cross-platform mobile development?

Cross-platform mobile development is a cheaper and more convenient alternative to native Android and iOS development. The app is no longer written to run on one specific OS only.

React Native is considered to be one of the best mobile development options. It lets you save the time of development and cut costs, basically in half – cross-platform mobile development produces apps that can run both on Android and iOS.

How React Native works?

Just as React.js, React Native apps are written with a combination of JavaScript and JSX, an XML markdown language for developing UIs which replaces HTML and CSS. From JSX, the components are composed into native components. Dedicated to specific platforms, they can create a fast and natural experience for apps’ users.

Then, it invokes the native rendering APIs in Java, for Android, and Objective-C for iOS. It also exposes JavaScript interfaces for platform APIs, which allows RN apps to access features like GPS location.



What are the examples of apps built with React Native (that are not Facebook)?

The list of large companies using RN is impressive and you probably are using their apps daily. Let me use this guide to introduce you to some examples of organizations that decided to implement React Native library to their products.

Instagram

In 2016 Instagram dev team started exploring the possibilities of React Native. First, they started their adventure with the simple view of Push Notifications. However, as the results turned out great, they continued developing other parts of the app with the framework.

It allowed Instagram makers to deliver features to both Android and iOS versions of the app much, much faster. Now, the amount of shared code is super high – from 85% to 99% of the code is shared between Android and iOS apps.

Tesla

Screenshots of Tesla app
Source

All of Tesla self-driving vehicles and Powerwall come with built-in React Native applications. The app is a crucial part of the user interface, so the Tesla development team needed to go for the best choice for their business. Whether a Tesla owner uses an Android or Apple equipment, all features to control his car, such as lights, locks, roof, or a charger, are equally available on both platforms.

Skype

Screenshots of Skype app
Source

Before React Native, Skype native apps have suffered from several issues, such as losing the speed of the app while sharing GIFs and other media.

In 2017 they started working on a brand new application that would be written completely in RN. Therefore, with the old app rebuilt, they developed a couple of new features.

What more, they decided to also utilize React Native for the Windows desktop app, showing that its possibilities go further than the mobile app development.

Pinterest

Pinterest decided to integrate React Native in the mobile version of the app, starting with the onboarding process – the Topic Picker view. They saw it needed some smoothing as It is the first view user comes upon after signing up. The initial implementation on iOS took the Pinterest team a record-breaking time of 10 days.

Bloomberg

Source

The development team at Bloomberg’s decided to move their entire product to the cross-platform technology. Before, they used to build their apps with native technologies like Java. Their brand new consumer mobile app for both iOS and Android offers users a smooth, interactive experience letting them easily access personalized content across Bloomberg’s Media.

Another thing they loved about React Native is its automated code refreshments what speeds up the process of the new feature release. What they claim is that the development took their team only half the time they would spend not using it.

And that’s not all of it. RN is used by many Fortune 500 companies and startups. Some other names would be Walmart, Wix.com, Airbnb, Soundcloud Pulse, and many others.


See how React Native can bring your ideas to live!


The benefits and risks of using React Native in your project

As we were making this guide, we couldn’t ignore the fact that React Native has its pros and cons (pretty much like any other solution). Although the benefits radically outnumber the potential risks, let’s take a look at the good sides and the bad sides.


React Native pros

FROM A BUSINESS OWNER PERSPECTIVE

Time & Cost-saving

  • Cross-platform mobile development
    React Native allows you to use the same code for developing both Android and iOS apps. Meaning you only need to write the code ones and you no longer need a bunch of engineers who specialize in different languages like Java, Swift, or C++. All you need is a JavaScript developer who is familiar with the native UI library]ies, APIs, and hybrid mobile app development.
  • Cost-effective and time saving
    A single development team, reusable codes, and a supported library mean saving time and money. One of the biggest advantages of utilizing React Native into your product for startups and young businesses who especially care about the money factor.
    Learn more about how React Native can cust your development costs.
  • Live updates
    RN solves the eternal iOS development problem – waiting for App Store to approve any app updates. As long as your app has access to the server to check for a new version, you can publish updates to your app whenever you want – much more like in a web application.
  • Extended code sharing
    With React Native you can share code not only between mobile platforms but also in a web browser. Just imagine, all of your channels covered by one shared codebase. Isn’t it great?

UX & Performance

  • Great user experience
    A mobile application built with this framework guarantees a flawless user experience. With an extremely high responsive User Interface, it feels smooth and appealing, which will delight your users.
  • Great performance
    As applications are compiled into a natively written code, they not only work on both the operating systems but also work the same way on both the platforms with no performance losses.

    For example, the Xbox team switching from Electron to React Native UWP for their new Xbox app beta for Windows 10. The effect was a leaner native experience on Windows, decreased memory usage (by over 50%) causing massive performance enhancements, and a decrease in app installation size – from nearly 300MB to 60MB.
  • Stable future
    Facebook is considered a truly stable enterprise and after the success of its library, and therefore it has stood by its frameworks, supporting and growing it with a consequence. As it is open sources, it makes the vast number of developers continuously help to grow it.

FROM A DEVELOPER’S PERSPECTIVE:

  1. Pre-developed components
    As React Native is widely supported with a great community, you can find plenty of pre-made assets to utilize in your project, making the pace to a release much shorter and faster.
  2. Easy learning curve
    Many frameworks require that you learn a big number of rules that you can apply only within that technology. RN does an exact opposite of this, therefore one of its greatest strengths is how readable it is, even at the first contact.
  3. One ecosystem
    One of the advantages of cross-platform development is that a developer can build a versatile application with React Native without dealing with the ecosystem and language specifics of each OS.
  4. Third-party support
    React Native is an open-source project, so it comes with an open environment. You can easily integrate with various third-party modules.
  5. Great developer experience
    Chrome developer tools, flexbox for layout, and many other facilitations – RN has a great development environment that will make building apps easy and enjoyable.
An infographic with React Native pros and benefits

React Native cons

FROM A BUSINESS OWNER’S PERSPECTIVE:

  1. It’s a relatively young technology
    As a quite immature technology, RN isn’t flawless – it lacks some custom modules and some need further development. The great majority of custom modules you will need are working properly, in other words, there are chances that your developers will need to build some solution from scratch. Good comfort is that the solutions are continuously added by great developers from all around the world.
  2. You may still need help from a native developer
    The implementation of some more advanced features typical for native apps may still require support from a dedicated Android and iOS developer. This may be an issue for teams with the limited project budgets.

FROM A DEVELOPER’S PERSPECTIVE:

  1. Debugging
    As React Native brings another layer to your project, it can also make debugging harder and more problematic.
  2. Configuration
    It can happen that local library coordination inside a React Native app will require plenty of configurations, so you need to consider some extra time for that.
An infographic with React Native cons

React Native is still a young technology and, as any solution, it doesn’t come without flaws. Yet, in the end, the benefits definitely outnumber the risks.


When you should consider using React Native for your app?

By going further in the guide, we also have to mention the best option where React Native should be used.

Some certain situations clearly call for, at least, considering RN technology. If at least one of the following reasons feels familiar, React Native may be a good solution for you:

  • When you want a stable and fast solution that performs just like a native app
  • If you want to build an app that will work on various operating systems, but don’t really want to support two or more separate development teams
  • When your app is all about the User Interface
  • When you are currently working on a web app, but consider creating a mobile app someday in the future

How React Native can impact your Business

Next by the guide, we have also built a report for people wondering if React Native can have an impact on their business objectives?

Read our latest 2020 Report: React in a Business Perspective.


What is the future of React Native

Change is the only certain thing in the future.

Looking at React Native’s GitHub repository, we can see that over 2,100 contributors have committed over 20,00 times in 71 branches with over 340 releases.

We know, that their team is currently working on “Fabric” – a new implementation of the React Native UI layer written in C++ that will make it more flexible and able to integrate with JavaScript-based hybrid infrastructure. Fabric will include some significant changes that will deal with the current framework’s issues and help RN grow, such as:

  • Improved UX of core components
  • New threading model
  • Async rendering capabilities
  • Type-safe – an interaction between UI managers and JavaScript
  • Simplified bridge, that will make building debugging tools easier
  • Faster startup

Before You Build a Future-proof App With React Native


What are the React Native alternatives?

In this part of the guide, we will quickly present some of the most popular alternatives to React Native.

Flutter

Flutter is a quite fresh mobile development framework created by Google. It uses the Dart programming language that supports most of the object-oriented concepts.

It is not so well-known in the development world and has a much smaller community than React Native. On the other hand, it can provide great performance, has excellent build automation tooling, and allows easy and painless setup on CI/CD servers, thanks to its strong CLI tools.

+ Great developer tools
+ Easy to learn Dart language
– Still in development
– Small community

Learn more about React Native vs Flutter!

Ionic

Ionic was created in 2013 as an open-source software development kit for hybrid mobile applications.

First, it is famous for providing platform-specific UI elements with its library of native components for Android and iOS.

Secondly, it uses frontend technologies like HTML, CSS, JavaScript, and Angular for app development that allows creating cross-platform mobile apps with a single codebase.

Finally, it’s popular – with over 5 million apps built with Ionic it has a very large community of active users who contribute on a regular basis.

+ Cordova native plugins
+ Active community
– Sometimes gets buggy

NativeScript

NativeScript is an open-source framework for building native apps. It’s known for its elasticity – you can choose whether you want to code NativeScript app in JavaScript or TypeScript, or rather go for Angular or Vue.js. Nevermind your decision, you can make a use of any components, classes and functions of the framework of your choice. NativeScript has a vibrant community that constantly releases new plugins that add new possibilities. What’s more, the NativeScript team released many great tools like NativeScript Playground, NativeScript Marketplace, and NativeScript Sidekick.

+ Works great with Vue.js
+ Also great with Angular
– Long startup times with Angular for Android


How to start with React Native? [Resources]

To keep you updated with the fast-evolving React Native world or help you start your adventure with this framework, we have prepared and added to the guide a list of useful resources, so you can check them out to learn more about the platform!

Courses and tutorials:

Blogs:

Webinars and podcasts:

Communities:

Summing up

Despite having few drawbacks, React Native is a powerful tool that lets you create robust mobile apps in a relatively shorter time.

For the developers, it offers a great developers experience, lots of pre-developed components and a vital community.

The business owners will surely appreciate its high efficiency, lower costs of building an application, and super efficient code sharing across iOS, Android and Web, with no losses in the end user’s experience and the app’s quality.

If you are in need of a versatile native app, you should definitely consider joining many great companies that have decided to trust React Native with their products.

Still not sure if React Native is the right platform for YOU?

Comments
Leave a Reply

View Comments (0)...

Related articles:

React Native vs NativeScript: Comparison

React Native vs Xamarin: Pros and Cons (2020 Edition)