Category: Android, Blog, Business, Development, iOS

Pros and Cons of React Native Development in 2021 | Business Perspective

React Native, next to Flutter, is called a revolution in cross-platform app development. Learn the insight of a Full-Stack Developer with 9 years of experience and understand the key pros and cons of React Native. It will help you to consider whether using this solution in your project is a good idea.

React Native Pros and Cons

This article presents the biggest advantages and disadvantages of React Native. It’s worth to consider them when deciding whether to develop a mobile application with React Native. In what follows, I will present examples of application types for which React Native will work best.

What is React Native?

Facebook engineers created React Native in 2015. It allows you to accelerate the process of creating mobile applications and reduce the costs of their production. It’s a framework that helps to create cross-platform applications for Android and iOS platforms.

By writing one code in Javascript (according to the StackOverflow survey, currently the most popular programming language), we can create a native application for Android and iOS systems. After building the application, we get the same file as if we have used the native language of the platform. For more details on React Native, please refer to this article: What is React Native? Introduction for App Owners.

Now we can move on to the pros and cons of React Native.

Pros of React Native

What are the benefits of using React Native? The decision to create a mobile application using the React Native cross-platform framework comes with a number of advantages. Below I present the most interesting pros of using React Native (in my opinion).

It speeds up the app development process

The main advantage of React Native is the ability to create applications for two platforms using one code. So while working on a given function/update, we create them immediately for each mobile platform. For a product released on both platforms, this can save you time and money by up to 30%.

It’s worth mentioning that thanks to the community support and React Native’s extensibility, the list of supported platforms is growing. You just need to install additional libraries.

Lower cost of app development

The common source code allows you to build the app with one development team familiar with Javascript. This significantly contributes to the reduction of app development cost. Contrary to native development, you can involve a smaller number of people in the project. It’s because there is no need to “duplicate” teams per platform.

Having one team and one programming language also allows eliminating problems when something disturbs the development between platforms. E.g. due to difficulties in implementation on a given platform or random factors such as a programmer’s sick leave in one team).

This, in turn, leads to a situation where the application for one platform is ready, while the other one requires additional work. Typically, it’s impossible for developers to switch between platforms when native languages ​​are used. In the case of React Native app development, there are no such situations – so there’s no downtime, and you can plan the team’s work optimally.

It ensures stable growth of the app

One of React Native’s pros is that RN shares its set of components that “know” how to display the app on a given platform. Thanks to this abstraction, React Native allows the developer to focus on developing the application without going into the details of the platform. So given that, the process of building app features is more stable and resistant to discrepancies between platforms than in separate native teams. This allows for better planning of application releases with new features/upgrades.

It has a rich ecosystem

Thanks to the fact that React Native is based on Javascript, it has access to a wide range of libraries and tools that facilitate developers’ work and accelerate the software development process.

At the time of writing this article, the library repository for Javascript npm returns 29,352 results after typing the phrase “react-native,” while the corresponding package search engine for Flutter returns only 12,900 results for libraries supporting this framework. This means that the choice of 3rd party libraries for Flutter is 44% smaller than React Native.

It’s worth mentioning that we compare the search for libraries strictly for cross-platform programming, excluding those that are universal enough that they can be used for both mobile and web projects. Of course, the number of available libraries doesn’t always translate into their quality. However, it shows the community’s commitment to developing tools for the React Native framework.

Another aspect of increasing access to libraries and tools is basing React Native on how ReactJS works. ReactJS is one of the most popular web development frameworks. Thanks to a common mechanism, many libraries for ReactJs also work for React Native.

It can integrate with the native application

React Native has mechanisms that allow it to integrate with an already existing native application. For this reason, you can find both views that are written natively, as well as views written with React Native in a mobile application. This offers many possibilities.

Developers can write some views with React Native in order to lower their costs (e.g., account management, purchase summary, etc.). And the rest – which the framework can’t handle – remain native.

If you want to transfer your application to a cross-platform solution, your existing application can be rewritten in small steps. This approach reduces the chance of errors and allows for a faster release of the new application.

It’s supported by external tools

The application development process isn’t only writing code but also repetitive routine tasks. For example building (compiling a new version of the application), testing the application using automated tests, releasing the application to the store, as well as investigating and fixing bugs.

Such repetitive tasks are usually delegated to external tools or services (3rd party software), which, once configured, perform them for developers who can instead focus on adding new functionalities. This approach also eliminates human error in repetitive activities.

The most popular tools supporting the process of developing mobile applications that also support React Native are, for example:

  • Bitrise – a platform supporting the process of automatic testing, building, and releasing a new version of the application.
  • CircleCI – as above.
  • Code Magic – as above.
  • AppCenter – a platform that comprehensively supports the development process – allows you to test, build, and release a new application. It also helps to share application versions with the test group. Additionally, it supports bug reporting (collecting information about the cause of an error in the application) to provide developers with the necessary information for fixing it.
  • Sentry – a platform dedicated to collecting and displaying bug reports that provide the necessary information for its repair.
  • Bugsnag – a platform that collects and displays bug reports in order to provide the necessary information for its repair.
  • Amplify – a framework allowing for easier integration with AWS services, incl. authentication, data retrieval from API, saving/reading files, and notification service.

Cons of React Native

What challenges do developers and app owners face with React Native? The use of React Native, in addition to its undoubted benefits, also comes with several disadvantages and challenges. You should take them into account when choosing this technology for your application. Let’s dive into the disadvantages of React Native.

It’s not a native solution

As I mentioned before, React Native is a cross-platform technology based on JavaScript. To make this possible, the authors of the framework had to create communication mechanisms between the native world and Javascript (you can read more about it here). For this reason, an application written in React Native might be slower compared to native applications and take up more space than its native counterpart.

It’s worth noting that the performance problem can only arise in applications with high dynamism, in which there are continuous/large changes on the screen, such as, for example, action games. Facebook engineers have made every effort to ensure that applications written in React Native render at 60 frames per second (in accordance with the applicable standard), providing the user with a native experience.

Hard to debug

React Native is built using Javascript, Objective-C, Java, and C / C ++. This makes debugging bugs more difficult. It may require basic knowledge of the native language of the platform – React Native constantly communicates between the native environment and the thread in which the Javascript code is executed.

To facilitate the debugging process, the React Native community and developers have enabled integration with Flipper since version 0.62. It provides many useful tools in the debugging process – bug report, log preview, local database, and performance inspector. Since version 0.63, they have introduced a refreshed error and warning display module.

It doesn’t speed up the testing process

While the working time of development teams decreases, the same cannot be said about the work of the Quality Assurance team. The time spent on testing is similar to testing in native development. And in some cases, it might be even more. This is another factor to consider when choosing React Native for your app development.

Testing is more challenging

One of React Native’s cons is that the use of cross-platform technology introduces two new potential error groups.

The first is related to how the application communicates with native components and bad code that causes errors on each platform. React Native translates JavaScript components into their native equivalents and provides the ability to freely communicate between them (e.g., a native button notifies the JavaScript code that the user has pressed it so that it can react correctly – read more here). For this reason, you should test a React Native app much more thoroughly. There may be bugs and edge cases in the components provided by the framework.

At the same time, it’s worth emphasizing that React Native is a mature framework. It is actively used by many Facebook products, as well as many other companies and a large community. Thanks to this we can be sure that React Native is error-free.

The second group of errors that occur only in cross-platform solutions is related to the common source code. If there’s an error there, you can be sure that it will occur on every platform. For this reason, when finding an error, the tester should check whether that error occurs on both platforms.

In the case of native development, such propagation of errors between platforms doesn’t occur. It’s worth noting, however, that in this situation, it’s enough to fix the bug once. Thanks to the shared source code, the bug will be fixed on each supported platform.

Inferior Android support

Initially, React Native only supported the iOS platform. The support for the Android platform was added only in subsequent releases. For this reason, React Native still has weaker support for the Android platform. This was addressed by the Facebook framework development team, and there’s ongoing work that aims to fix this. However, these are not problems that prevent the development of Android applications with React Native. They require more accuracy and testing of this platform.

The second disadvantage of React Native in the context of Android is its performance on this platform. This is one of the reasons why the Discord team decided to develop its Android application with native technology. Nevertheless, in this case, they managed to share 94% of the code – not between mobile applications, but between iOS and web applications (you can read more about the Discord application development use case here).

It’s harder to build a cross-platform team

React Native is a cross-platform technology. The team should also have knowledge of both the world of web technologies (React, JavaScript, and its ecosystem) and native technologies (project configuration, CI, UX guidelines for the platform). It’s much more difficult to build a team able to cope with all the challenges that may arise in the development of a cross-platform application.

Read also: 5 key legal issues to consider before your mobile app development

When to choose React Native?

The framework works well for an application that needs to be developed for both Android and iOS and is based on a custom design. The ability to work on both platforms in parallel shortens the development time. What’s more, the custom design allows for easier and faster styling of views on both platforms. For this reason, this technology is a good candidate for applications where time-to-market is important (Idea review/MVP version). It’s also a great solution if you want to reduce production costs.

The React Native benefits will also come in handy to applications that main goal is to “provide a graphical interface” for communication with API, such as applications for purchases or reporting improvements in the factory. Applications of this type mainly come down to downloading data, displaying it to the user, and sending the user’s changes to the server. In this case, we will get the largest amount of common code, which everyone associates with a faster development process and lower costs.

When developing native applications, it’s worth considering using React Native to create individual views or groups of views, thus lowering the cost of their creation (many companies such as Pinaster or Facebook did that) without losing their quality.

If you have a web application (and in particular one written with ReactJS) that has the same functionalities as the target mobile application, you should consider using React Native. Thanks to the common language and ecosystem, it’s easy to use the code of a web app in an application written with React Native.

React Native is a great choice for those project which do NOT require creating complex animations and strong integration with native technologies such as geolocation or Bluetooth module. Using RN in such cases is not impossible, of course, but would require a lot of additional work.

Alternatives to React Native

React Native is not the only technology out there that allows you to create cross-platform applications.

Flutter

Google’s Flutter framework is currently the most popular alternative to React Native. Flutter has a different rendering approach that allows developers to render components very quickly. An additional advantage of Flutter is the support for Android (Material UI) and iOS (Cupertino) out-of-the-box design. Google engineers wrote their framework in Dart language which is less popular than JavaScript. It means that it has a smaller number of available libraries and a smaller community than React Native. Howece, it’s dynamically developing.

Read also:

Xamarin

The oldest of the mentioned frameworks, Xamarin is strongly associated with Microsoft’s technology based on the C# language and the .NET framework. As we can read on its website, Xamarin allows you to share up to 75% of the source code. It supports platforms such as Android, iOS, tvOS, watchOS, macOS, and, of course, Windows.

Xamarin has built-in components that allow creating a design compatible with a given platform. The disadvantage of this technology is a smaller community and a smaller number of available libraries. What’s more, one of its cons is the high cost of the Visual Studio – the IDE license that you need to create applications in this framework. A more detailed analysis of the advantages and disadvantages of this solution can be found on this blog.

Hybrid app

Hybrid applications allow you to create a mobile application using any web technologies with any framework and then use the Apache Cordova framework to create a mobile application.

The advantage of this solution is the possibility of using an existing web application and a common code for each platform. The downside is efficiency and the fact that you need to work more on the app to ensure its native feel. For more details, please refer to this article

Native development

The last alternative worth mentioning is, of course, the use of native technologies to write the application. This is the most expensive way to execute an application (two teams required) where teams duplicate their code.

The biggest advantage of this approach is application performance. Other benefit is the easiest use of native components such as GPS or Bluetooth, and the native feeling of the application.

Wrap up

The biggest advantage of cross-platform solutions is the simultaneous production of code for both mobile platforms. It saves time and money.

React Native stands out from the alternatives. Why? Because it’s based on the JavaScript programming language, which has a large and engaged community. Currently, the availability of JavaScript developers on the market is much greater than in the case of, for example, Dart (Flutter is based on it). An additional advantage is the fact that React Native is based on ReactJS. Thanks to this, having a web team of ReactJS developers, it is easy to implement it in the development of mobile applications.

React Native limitations

React Native isn’t a technology without flaws and limitations. The downside of React Native is the poor performance when displaying views in which there is a constant change of elements caused by, for example, a large number of animations.

Due to the fact that it’s mainly developed by the Facebook team to meet their needs, some features aren’t available out of the box or have poor support – e.g., tracking the user’s location while the application is running in the background. For this reason, it’s worth researching first whether the application you want to build will use tools poorly supported by React Native or one of the 3rd party solutions from the community.

Even if our application uses a module that doesn’t have React Native support, there’s still no reason to cross this technology out. Thanks to the possibility of integration with native solutions, we can write a native module for a missing or poorly supported function per each platform, and then integrate it with the JavaScript code.

Mature solution

React Native is a mature, 5-year-old solution. Facebook team and a passionate community actively support and develop this technology. Over the years, both small and large companies have been using it in many commercial applications. The key to the success of creating a good application written in React Native is hiring a good team experienced in both React Native, ReactJs, and JavaScript, as well as having the support of native developers.

The above-mentioned advantages and disadvantages of React Native are worth considering before kicking off with React Native. We’re an experienced React Native app development company that would love to take the whole app development off your shoulders. If you have any questions, leave a comment below, jump on a call, or drop us a line.

Want to create an app with React Native?

Receive the first working demo within 7 days from the project kick-off

Not ready for an estimate? Write to us and book Product Design Workshop to clarify your vision and prepare the crucial documentation.