What is React Native and When to Use it? Introduction for App Owners

Introduction

More and more people simply can’t imagine their lives without mobile devices like smartphones, tablets, and wearables anymore. This is especially true for smartphones that note increasing penetration rates every year. We use mobile devices to pay for our bills, arrange medical appointments, or order food. Over the last 10 years, the percentage share of mobile devices in Internet browsing has increased from 1.56% (January 2010) to 51.5% (September 2020).

Source: StatCounter Global Stats – Platform Comparison Market Share

It’s no wonder that so many website owners have decided to create two versions of their sites – one for wide-screen personal computers and the other for narrow-screen mobile devices. They are doing this to ensure the best possible experience for their users.

This solution turned out to be problematic, with issues ranging from maintaining two applications and problems with SEO to the challenge of detecting whether the device is a smartphone or a PC. That’s why we came up with a better solution: a responsive web design that adapts to the device on which it’s displayed. As a result, you only need one code to operate both platforms for a website to look good on any screen.

A similar problem occurs in the mobile app development process. Many apps are created based on a non-standard look (compatible with the company’s brandbook and other customer requirements) while maintaining the same design across platforms such as iOS and Android (with minor differences required by the platform).

In many cases, developers of individual platforms duplicate their work by writing the same functionalities (login, registration, adding a product to the basket, etc.) in the language native to a given platform. This has a significant impact on the cost of the developed application.

Many companies and developers have tried to solve this problem over the years.

What is a hybrid application?

One solution to this problem is creating a hybrid application. The basis of such an application is a web app that can be made using any front-end libraries (e.g., ReactJS, Angular or JQuery).

The next step is building a mobile application using the Apache Cordova framework, which places the ready application in WebView ( a native component on iOS/Android for displaying websites). Cordova also provides solutions that allow hybrid applications to use native functionalities such as Bluetooth, geolocation and battery.

This approach allows creating one application (one code used on each platform) without using the native programming language of a given platform and maintaining consistency between the platforms. What’s more, we can also use such an app as a web application.

The hybrid solution is not without its drawbacks:

• When programming a hybrid application, we need to spend more time creating a user experience compatible with the native application (which is often difficult and boils down to imitating the native impressions).
• Another downside is the application’s performance, which relies on a web rendering engine that can become an application bottleneck.
• It is also worth noting that, because a hybrid application operates as a web application, you might see problems typical for such applications (the reason behind this is the inconsistency in the operation of individual rendering engines on each platform).

In recent years, we have witnessed a decline in the popularity of hybrid applications in favor of cross-platform applications. Examples of libraries based on this solution are PhoneGap and Ionic. You can learn more about how hybrid and cross-platform applications compare here.

What is a cross-platform application?

The latest solution is cross-platform technologies that allow code to be written in one language, using components provided by a given technology, then building an application for multiple platforms. Just like in hybrid applications, thanks to this approach, we write one code which we then use to build applications for the platforms we’re interested in. Particular frameworks differ in implementation details, but all of them use code native to a given platform under the hood.

Thanks to this, cross-platform applications can achieve much better performance than hybrid applications (in most cases, even similar to native applications). The UX they deliver is similar or the same as using the native language for a given platform.

The most popular technologies showcasing this approach are React Native and Flutter. You can read more about these here:

• Flutter vs. React Native – Comparison for App Owners
• Flutter Pros and Cons for App Owners
• Flutter app development services by Droids On Roids

In this series of articles you are reading now, we’ll cover React Native in detail.

What is React Native?

React Native is a framework built by Facebook engineers and based on ReactJS (I’m describing the connection between ReactJS and React Native in more detail here). It allows you to write the code just once using the popular JavaScript (TypeScript) language and create a mobile application for both Android and iOS.

Facebook uses React Native in many of its applications, including the Facebook mobile application (for example, the Marketplace functionality is made using React Native) and Instagram. So, you can be sure that the framework is of high quality and has practically guaranteed future support from the Facebook team.

Read also: Advantages and Disadvantages of React Native | Business Perspective 2021

The most popular applications that use React Native

In addition to Instagram and the Marketplace functionality in the Facebook mobile application, React Native is also used in applications such as:

• Uber Eats (Learn how to make an app like Uber and how much it costs),
• Discord (iOS version),
• Walmart,
• Wix,
• Pinaster,
• and Bloomberg.

It’s worth emphasizing that not all of these applications were created 100% in React Native. The framework allows for integration with ready-made native applications, a fact that many of these aforementioned projects have benefited from.

Recently, Microsoft has also shown interest in this technology – its developers have released the React Native XP library. Based on React Native, the tool allows you to create applications for iOS, Android, Web, and Windows 10 – UWP.

What’s more, the teams that create individual Microsoft products are experimenting with this technology. For example, the new Skype application was implemented for some time in React Native (then this technology was replaced by the Electron library), while latest version of the Xbox application for PC was rewritten from Electron to React Native.

The history of React Native in a nutshell

We know what React Native is, but now let’s have a look at its history. React Native was created as a result of an internal Facebook hackathon in the summer of 2013. In January 2015, Facebook released a preview of React Native and, during a conference in May, the company announced the official launch and release of the framework to the community as an open-source project. Initially, React Native only supported the iOS platform, but in September 2015, it also received support for Android.

In recent years, Facebook engineers have been working on increasing the performance of the framework, new architecture, and reducing the size of the application.

What’s the difference between React (ReactJS) and React Native?

Published by Facebook in 2013, React (also known as ReactJS; I’ll continue referring to it under this name for clarity) is a library designed for web applications. It’s the main framework used to create Facebook web applications. The main role of ReactJS is to display individual components/widgets of the page, depending on the current configuration (provided data).

Thanks to its simplicity and declarative nature (meaning that the developer declares what they want to achieve and a given component is responsible for this effect), ReactJS has gained both recognition and popularity – it’s one of the 3 most popular libraries for the fast and effective writing of web applications, next to Angular and Vue.

To better illustrate the benefit of ReactJS’s declarative nature, let’s analyze the following code for creating the (WelcomeDialog) component:

Even a non-technical person can easily understand that such a piece of code should display a dialog (the show property is true), the title of which will be text Hello Reader ( the title property is set to Hello Reader).

The way of thinking about the application (architecture/assumptions, etc.) proposed by ReactJS is so universal that it was also used in its younger sibling – React Native.

React Native uses the mechanisms of ReactJS in line with the “Learn once, write everywhere” principle, and the main difference between the siblings is the type of application under construction. As I mentioned before, ReactJS focuses on web applications, so we use HTML, CSS, and, of course, JavaScript there. However, thanks to React Native, we can build an application for multiple platforms at the same time.

What makes React Native unique?

Here’s a list of the greatest advantages of React Native (in my opinion):

• The framework is based on one of the most popular languages at the moment – JavaScript (source). Thanks to this, React Native developers have access to many external libraries that work in React Native applications (day.js, lodash). Moreover, many libraries that are written with ReactJS in mind also work with React Native (e.g., Formik, redux, victory.js i AWS amplify).
• The possibility of integrating React Native with an already existing mobile application, thanks to which we can continue developing an existing application using React Native. What’s more, even at the stage of designing a mobile application, we can distinguish between views/functionalities that are worth writing in React Native (e.g. user profile, login), and ones for which speed is critical, and should therefore be implemented using native code.
• “Learn once, write everywhere” makes it easy for anyone who knows ReactJS to get into a React Native project very quickly. The knowledge and experience acquired with the web version can be translated in a ratio of almost 1 to 1 to React Native.
• React Native also allows you to write a code fragment for just a given platform (e.g., if we want to have a menu that complies with the standards of a given platform, we can program this element separately for each platform).
• The ability to create your own native code that can communicate with our JavaScript code. This is helpful for communication with the API of a platform that is not supported or when we want to integrate with a ready-made solution.
• Another advantage of the framework is that its architecture is focused on adding new platforms. Thanks to this, as well as the community’s support, React Native also supports platforms such as Windows, macOS and offers the possibility to write web applications.
• The Expo framework is worth a mention as well. It significantly improves work with React Native by providing many useful components for creating a typical mobile application – for example, access to text messages, contacts, cameras, or login via social media. You can read more about this framework here.

To sum up the pros of React Native:

How does React Native work?

React Native’s main task is to provide components, which are then translated (mapped) to their native equivalents on a given platform. This is how it maintains the UX of a given platform.

For this reason, the framework has its own special components (e.g., Button, Modal, Text Input) from which we build the UI. Thanks to this, React Native knows how to build an application for a specific platform. For example, when creating an Android application, React Native translates its Button component into a native button available in Android. This architecture also allows developers to easily add additional platforms.

Platform	Result
macOS (React Native for Windows + macOS)
Windows (React Native for Windows + macOS)
Web (React Native for Web)
iOS (React Native)
Android (React Native)

The second important thing to mention here is the need to communicate between the JavaScript world (where our application code exists) and the native environment of the platform in which the application is displayed.

For example, the code in React Native needs to know when the user has pressed a button, typed text into a text field, or switched to another view to react to it accordingly. The task of the built-in mechanism in React Native Bridge is to ensure communication understandable for both environments.

However, the downside of this solution is the additional time associated with communication between platforms during the application’s operation, which must be taken into account – for instance, when creating efficient animations in React Native.

React Native – differences in development for Android and iOS

Will React Native make my app look and run the same way on iOS and Android? Here are the key things you need to know about the differences in development for Android and iOS.

Look

By default, when you run the React Native application on different platforms, you will see a different-looking application. Why? Because it works the way it works, React Native will use native styling for each platform. Let’s look at this example: 

Nothing stands in the way of making the appearance of individual components consistent so that they look the same, regardless of the platform.

The React Native community also provides solutions in the form of UI frameworks. These are ready-made components styled in accordance with a given design (for example, material design). Some of them also have completely new components ready to be used in our application (like a floating action button, chip, and avatar). The use of ready-made UI frameworks significantly accelerates the development process. The most popular of these are:

• React Native Elements: link
• NativeBase: link
• UI Kitten: link
• Shoutem UI toolkit: link
• React Native Paper: link

React Native gives us complete freedom in how we want our application to look; it can resemble the native look and also be consistent on individual platforms.

Developer’s experience

Thanks to the introduction of abstractions for the application code, it’s often irrelevant on what platform it’s executed (from the programmer’s perspective). However, React Native provides tools that allow you to judge what platform it’s running on so that you can create a styling/behavior that resembles the native one more closely.

In extreme cases, when a given component looks completely different, a developer can easily create a component for a specific platform (just add the suffix .ios/.android in the file name before the extension).

Size

Since the Android system doesn’t provide the mechanism needed to run JavaScript code (JavaScript Virtual Machine) by default, React Native must add it when building an application for this platform. This makes the application size larger than the same application built for iOS.

Will my React Native app work on mobile?

As I mentioned before, React Native is used in Facebook products. For this reason, we can be sure that the delivered code is refined and has been tested by many users. In one of their articles, Facebook assured that its application would use the same version of React Native we can download from the public repository, giving us even more confidence about this framework’s quality.

It is worth noting that React Native currently has better support for iOS than for Android. This means that developers should spend a little more time on this platform, as some bugs may only occur on Google’s system. This issue has been addressed, and work is underway to improve Android support.

Will my React Native app work on the web?

Yes, it’s possible! One option to achieve this is by using React Native Web (it’s used in the mobile version of Twitter, just to give you an example). React Native Web is a library that adds support for a new platform – web.

Thanks to this, we can get code that you can use to build a web application as well.

When comparing the development of web applications with React Native Web and ReactJS, the downside is that there are fewer external libraries available for RN and developers need to use internal React Native components instead of regular HTML and CSS code.

It’s also worth paying attention to the fact that, thanks to React Native’s foundation on JavaScript language, we can transfer the common part of the code responsible for business logic and other aspects into a separate project (library) and then use this project in web and mobile application.

As an example, let’s consider a view/page that contains a cart summary along with a promotion calculation under certain conditions. The code responsible for calculating the total cost and the discount can be transferred to a new library (cart.js), while individual platforms are only responsible for displaying the cart view.

Does React Native mean we don’t need native developers?

In typical use cases for mobile applications, a native developer isn’t needed in the development process. A React Native developer works with JavaScript code in their everyday work.

It’s worth noting, however, that the stages of creating an application such as configuration for release, configuring CI/CD, and the release process are just like in the case of native applications. After building a cross-platform application, we get the same file as in native development. That’s why React Native developers need to use tools and services that support mobile applications. Some of these tools might be a complete novelty, especially for those who previously worked only with web applications.

However, due to the high popularity of React Native, more and more tools support this framework (such as Bitrise or App Center), so the presence of a native developer for these steps is also not necessary, although it can certainly speed them up.

Experience in native application development will also be useful when integrating with native modules (we create code on the native side, which can communicate with JavaScript code) or when we use React Native only in specific areas of the mobile application.

Read also: 6 Common Mistakes to Avoid when Developing a Mobile App for your Business

Why should you consider React Native for your mobile app?

As I mentioned in the introduction, the main argument for considering the use of React Native technology is the possibility of reducing app development costs and faster application development. RN works well if what you have in mind is creating the same mobile application for two platforms (iOS, Android), where the speed of operation is not critical.

Since React Native enables fast application development, it’s also a good tool for prototyping and quickly delivering the idea to the market for business verification.

Another advantage of this framework is that it allows us to immediately deliver new functionalities to supported platforms.

Note that React Native uses the popular JavaScript language and the ReactJS framework, which means that the number of experienced software developers available on the market is large.

I hope that now you know what React Native is, how it works, and why you should consider using it in your mobile app development process. We’re going to publish more articles about React Native in our series dedicated to app owners soon. Stay tuned!

Related posts