ready to build your product

React Native Development: A Quick Guide

This guide, in a nutshell, will help you discover everything you need to know about React Native development from a business perspective.

In this guide, you’ll learn:

  • Is React Native scalable, secure, and well-performing?

  • What are its pros and cons?

  • Which third-party libraries can it be paired with?

  • Which well-known companies are using React Native?

  • How does React Native compare to its alternatives?

  • and more..

Introduction

React Native, like every other technology, has its pros and cons. It won’t be a perfect solution for every project. 

How can you tell if it’s perfect for yours?

In this handbook, we will help you investigate it by sharing our:

  • positive and negative lessons learned,
  • best technology stacks that we’ve tested, 
  • recommendations of useful libraries, 
  • comparisons to similar technologies,
  • and more…

In this particular article, we’re offering you a compact version of those findings = everything you need to know about React Native development in a nutshell

Note: if you stand before a big decision you need details, we’re perfectly aware of that fact, that’s why everything we say here will be extended with time. 

We’re aimed at creating a whole handbook about React Native app development.

If you want to get notified about upcoming chapters, consider subscribing for handbook updates.

React Native development – Overview

React Native is a mobile app development framework that allows developers to create multi-platform Android and iOS apps using native UI elements. 

It started in 2013 as Facebook’s internal hackathon project. 

Facebook’s goal was to bring all the advantages of web development, like quick iterations and having one team to develop the whole product, to mobile. 

They released React Native’s first public preview in January of 2015 at Reactjs Conference. The framework has been put available on GitHub since 2015. 

Performance

React Native apps’ performance is lower than native apps’. 

A cross-platform app’s speed is always a little slower than native apps. However, most of the time it won’t impact the user experience. Most often the differences are unnoticeable. 

What’s more, as the JS runs on the client’s, not the server’s side, the performance highly depends on hardware, software, and code quality.

There are two types of issues developers complain about:

  1. Application size – React Native uses numerous APIs, third-party libraries, and native components. The advantage is speeding up the development. But a lot of these elements make the app heavy. To reduce an app’s size, optimize native libraries, compress images, and convert JSON data into static object IDs.
  2. Memory leaks – it often happens because of a lot of complex processes in the background or queues on the bridge, especially on Android. Use profiling tools on Android Studio or Xcode to trace memory consumption runtime and identify the cause of memory leaks.

Scalability

React Native’s scalability is limited and sometimes may cause problems (more on that topic in the upcoming chapter). 

Luckily, the React Native team constantly works on improvements, and newer versions allow for more and more, as can be seen in the examples of Facebook, Instagram, and Walmart later in this article.

But the scalability of your app is not only the matter of React Native itself but more importantly the architecture: you can successfully structure the modules of your app for scale.

Security

Security becomes a little inconvenient if you are using React Native to create an app that requires type A security (like mobile banking apps). 

In such cases, developers need to pay extra attention to malicious code snippets, especially in case of using any 3rd-party add-ons.

Learning curve

With React Native, frontend web developers can become mobile developers without the need for learning Swift or Java. 

Does it require much additional learning? 

We can’t promise that developers who know React.js will switch to React Native development frictionlessly. They will need some knowledge about native UI elements. 

It’s important to note that mobile applications’ structure, integration with built-in components (camera, GPS, microphone, push notifications, Android/iOS operating systems), and application’s context are completely different than in web apps. 

Key take-away: for developers familiar with React.js but inexperienced in mobile development, getting to know React Native won’t be completely frictionless. They will have to learn about native UI elements and mobile programming concepts.

In web applications context is provided by the browser (device-specific); in mobile applications context is most often provided by Android and iOS operating systems. Knowledge of these two systems and the differences between them is essential to properly develop mobile applications in React Native.

On the upside, most of the components written in React Native are suitable for both platforms. It is rare to write your own native components in Android and iOS.

React Native brings agility and speed into development. Why can we say so? The reason is: you will need one team instead of two to create your mobile app as most React Native components can be reused between iOS and Android.

Limitations of React Native

As said before, React Native, like every other technology, has its limitations. 

These include:

  • Lack of support for some iOS and Android features.
  • The need to use native developers’ knowledge – especially if you put heavy computational operations into your app.
  • Some components may behave differently on iOS and Android.
  • Dependency on third-party libraries.
  • Slightly lower performance.
  • Possible issues with updating React Native versions.

React Native app development myths

With React Native you develop one app instead of two

You still need to develop a dedicated app for each platform – Android apps must meet different requirements than iOS apps. The advantage of cross-platform is that you use one technology instead of two, so you only need one team. 

It’s easy to work agile, and the whole process is faster especially if you share most of the code. But you still work on these apps separately. Also, that is why cross-platform development doesn’t decrease the cost by 50% (another myth).

With React Native you create hybrid apps

Hybrid apps created with frameworks like Cordova in their essence are Webview apps with access to hardware features. 

React Native displays components as native ones operating on a scripting language level. The application’s logic is implemented in JavaScript.

Benefits of React Native

React Native provides lots of benefits, both from developers and business perspectives.

Frequently mentioned advantages include:

  • Development speed – developers can reuse and recycle components created by them and the whole community.
  • Faster time-to-market – you can appear on the market faster to test your MVP.
  • Easy to work with – time-saving and robust tools make React Native development pleasant.
  • Code reusability – it depends on the specific project, but with React Native teams can usually easily reuse 50-90% of the code. Developers can also use the web app’s code written in React to create a mobile app.
  • Lots of pre-developed components – they accelerate your team’s work.
  • Easy changes preview – just by hitting “Command+R”, without the need to rebuild each time.

When do you not want to use React Native?

Complex games

Extensive visualization features, high level of customization, substantial user interactions – for heavy games better choose native development.

Utilities

In this case, native development is faster than writing native wrappers. Battery monitors, brightness controllers, media players, or antivirus software – they always use native features and platforms’ APIs. It’s easier to write them using native languages.

Apps with complex User Interfaces

If your app requires a lot of interactions, a high level of customization, and a lot of background processes – it may be better to go native. JavaScript allows for building smooth apps, but it may not be the best for those resource-intensive.

CHAPTER 1:

React Native app examples

Nowadays many well-known companies are using React Native for their mobile apps. Among them, you can find such brands as Walmart, Facebook, Instagram, Blomberg, and SoundCloud.

Walmart

Walmart’s app allows users to browse products, check their prices, order them, and pay for the purchase. The team cared about productivity and time-to-market, so they turned to React Native development. 

What were the results? They were able to share 95% of the code between iOS and Android, and achieved a nearly native performance.

Facebook Ads

Facebook Ads was the first React Native app for Android and the first app that was completely based on this technology. Facebook’s engineering team used React Native to provide clean, intuitive UX, and simple navigation. 

What was the key result? A lightning-fast performance they needed.

Instagram

Instagram chose to integrate React Native to their existing native app, beginning with the push notifications view. The team says that they were able to share 85-99% of code between Android and iOS.

React Native libraries

React Native Elements

React Native Elements is a UI toolkit that puts together great open source UI components created by developers. It includes components like pricing, overlay, divider, platform-specific search bars. They can be easily customized. The toolkit has 17,000 stars on Github.

React Native Vector Icons 

React Native Vector Icons is a library of 3,000+ icons, possible to customize and style – a perfect fit for buttons and navbars. The library supports TabBar and Toolbar Android. It has almost 12,000 stars on Github.

Ignite CLI

Ignite CLI is a CLI of boilerplates, plugins, generators, and more, that helps you to save weeks or even months of work while starting with React Native. It’s a solid starter kit. The CLI has over 11,000 stars on Github.

CHAPTER 2:

React Native vs NativeScript

NativeScript was first released in 2014 by Progress Software Corporation as an open-source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. 

Both React Native and NativeScript are JavaScript mobile frameworks, and they both are fairly easy to learn for developers with experience in JS.

React Native’s biggest advantage over NativeScript is the multi-threaded architecture. This feature allows JavaScript processing to not interfere with UI rendering. 

On the other hand, UIs of NativeScript apps can get stuck when processor-intensive JavaScript code is executed.

CHAPTER 3:

React Native vs Xamarin

Xamarin was developed by Microsoft and released in May 2011. To build a Xamarin app, developers need to code in C#.

Both React Native and Xamarin provide a near-native performance, both are used by well-known brands, and both provide great community support.

The most important difference between these two technologies is the programming language they use. In the case of Xamarin, it’s C#, and in React Native it’s JavaScript. So your choice highly depends on the experience of your development team.

React Native vs Flutter

Flutter was created by Google in 2017. To create an app with Flutter, you need to learn a programming language named Dart, however, developers claim that is fairly easy to learn, and development is fun. 

Although it’s the newest framework of the bunch, it has already become popular among developers. According to Stackoverflow’s developers’ survey from 2020, Flutter is more loved than React Native. 

Code reusability

With React Native, a considerable part of the code can be reused. From time to time, you need a component or a set of components suitable for the platform you’re running.

With Flutter, everything is a widget, and the code is more reusable. You define one widget tree and reuse this logic.

Flutter pros and cons

  • It is based on an object-oriented programming language named Dart, which developers need to learn (it’s considered relatively easy).
  • It supports faster bug fixing.
  • Its architecture depends on reactive programming.
  • It is not supported by Continuous Integration.
  • It’s not in a mature state yet.
  • There aren’t many third-party libraries available so far, so developers need to build them themselves.

The future of React Native development

React Native is still supported by Facebook. Some companies are concerned about this dependency, because it may pose a threat of killing it any time. However, the good news is: currently over 60% of React Native code comes from independent developers’ contributions. 

The threat appears to be even less serious as Facebook still heavily invests in React Native and it grows steadily. Community suggestions are quickly addressed and solutions to problems are provided in regular releases.

The React Native’s team current priority is making the library more lightweight by reducing API surface area and, as a consequence, improving the apps’ speed. Hermes, a JavaScript engine that should improve performance on Android is also under construction. 

Key take-away: React Native grows steadily thanks to community contributions, as well as Facebook’s investments, regular updates, and releases.

The architecture of React Native is constantly modernized. There are plans to completely change the architecture of React Native to cover native modules, new renderer, and initialization improvements.

What’s next?

This is only the beginning, much more can be said about React Native development. 

If you want to investigate this framework further feel welcome to explore available chapters now or subscribe for handbook updates to get notified about new resources before they’re made accessible for the public. 

Enjoy!

This was an introduction to Handbook:

React Native Development: A Quick Guide

Subscribe for new chapters notification

Get Updates

Get new handbooks before they are officially published.

Join 311 technology leaders and receive actionable tips and insights straight to your inbox.