Black friday

Upgrade to Growth 😎 during the period of 28.11 to 13.12 and save 55% on payments for 3 month 👉 UPGRADE

Flutter vs React Native: What to choose?

Posted on by Julia Poltavets

Cross-platform development has been a trend in mobile development in recent years. The desire to reduce the time and money spent on developing mobile applications on two platforms at once has provoked the active development of technology to achieve this goal. Some tools, though, are so similar to each other that it might sometimes be very difficult to make a choice. The difference, as always, lies in details.

Today we’re looking at Flutter and React Native, what their purposes are, why using them for this or that project so that you’d be able to choose the best app development solution.

As we’ve already covered in one of our articles, Flutter is a cross-platform open-source mobile application development framework. The idea is simple: take something new with a development perspective and resolve issues in cross-platform app development. Flutter is based on Dart – a fast, object-oriented programming language.

Flutter offers a widget approach. It provides a modern, reactive framework, and an extensive set of platform, layout and foundation widgets. Widgets allow developing user interfaces of any complexity that are no different from native UIs.

What’s Flutter for?

The key benefit of using Flutter as a cross-platform mobile app development solution is the ability to use a single programming language to develop apps for both iOS and Android. Indeed, Flutter includes everything required to develop cross-platform applications, such as ready-made widgets, testing and integration APIs, rendering engine, and command-line tools. It supports cross-platform application development using a single codebase. That’s why it allows developers to significantly save time and resources on the development of both platforms.

Who created Flutter?

Flutter is started by Google and has been heavily promoted since I/O 2017. The first version of Flutter was known as “Sky” and ran on the Android operating system. It was presented at the Dart Developer Summit in 2015. A stable launch of Flutter, however, took place on 4th December 2018. At Google I/O 2019, Google assured that Flutter is expected to be used both for web and desktop app development.

How mature is Flutter?

Like all new tools, it may experience issues of relatively fresh technology. And though it has a significant Google support and offers great functionalities ready to be implemented, it’s still new, and its libraries are limited. Some developers claim that it could not be used for building a complex commercial app yet and it’s better suited for simpler apps and prototyping.

But Google keeps making Flutter stronger and more resilient, giving priority to enhanced stability, performance, and quality. Thus, we can expect it to strengthen its positions eventually.

What popular apps are made with Flutter

Among Flutter acolytes, there is a legendary London-based Abbey Road Studios with Topline for recording songwriters as well as two Chinese giants: Alibaba with their Xian Yu app, and Tencent with the NOW Live app for video streaming. There are also many other Flutter apps that can attract our attention including Reflectly, Hamilton Musical, Cryptograph, Birch Finance, Toughest, InKino and the like.

What is React Native?

React Native is a mobile infrastructure that compiles with native application components, allowing you to create your own mobile applications for various platforms. There is also an option to target web and windows platforms but it requires additional configuration and setup. The applications developed in React Native are somewhere in the middle between native and hybrid. More information on React Native you can find in our article What is React Native and How it works.

What is React Native for?

React Native is ideal for building natively rendering mobile applications for iOS and Android. As we’ve already mentioned, the development process will not take much time and effort. Whatever you need, an application for doctor-patient communication, banks or other financial institutions, marketplaces or anything else – React Natives turns out to be a great development tool for these purposes.

Who created React Native?

Created by a Facebook software engineer Jordan Walky, React Native appeared as a parallel project of work on React.js. In 2015, React Native became an open-source project. Initially, only iOS support was provided, Android support was added in September 2015. Currently, it uses JavaScript and React.js and allows you to create applications for both Android and iOS.

How mature is React Native?

React Native has been around for 4 years and has already gathered a big community. It’s still comparatively young if you take other mobile development platforms. Nevertheless, with what we have now, the chances to get the answer in case you’re stuck somewhere increases. Besides, having a community means that you’re always surrounded by like-minded pros. And it allows you to share your experience and get feedback whenever you need it.

What popular apps are made with React Native

Bearing in mind all the advantages and disadvantages, not surprising that many companies give preference to React Native for their mobile app development. Thus, React Native was used in the development of Facebook Ads, Instagram, Pinterest, Skype, Airbnb, Yeti Smart Home, Uber Eats, and many more. The projects speak for themselves.

Installation

The installation process has to be simple without too many complicated stages. Thus, even beginners can easily master it. Still, React Native is a little easier to set up if you already have Node.js and NPM installed, while Flutter installation seems to require extra steps.

React Native — NPM

React Native can be installed using the Node Package Manager (NPM) with a simple command. Of course, this requires a Node.js and NMP to be installed. In addition to the framework, you will need such tools as the Android SDK and JDK.

Flutter — Binary Download from Source

To install Flutter, you need to download it from the source code to the desired directory and unzip it. Then you need to manually add the binary to the PATH variable, which is already more time consuming than a single-line command. Just as with React Native, additional components are required. If you have been developing Android mobile applications before then Android Studio has a module that easily installs everything you need to start creating with Flutter.

UI Component and Development API

Your app’s user interface is everything that the user can see and interact with. It is very important to have a variety of pre-built UI components such as structured layout objects and UI controls that allow you to build the graphical user interface for your app. So we need the support for the native component to ensure the app feels like “native”. It is essential that the framework has an API to easily access the native modules.

React Native — Less Components

React Native has a more extensive UI library than Flutter. It is based on native components. Still, React Native relies on many third-party libraries, which in some cases can be a problem as they may contain bugs or incompatibilities of the UI with a specific platform. Nevertheless, UI components can be linked to the project quickly enough.

Flutter — Rich in Components

Flutter runs perfectly with the proprietary widget sets. They are the best option to get a customized UI design that ensures engagement and native support. The number and variety of widgets are increased due to the lightweight and simplicity of the widgets.

Flutter uses only the canvas of the native platform and draws the UI and all the components from scratch. All the UI elements look the same as native ones. As a result, the UI performance is remarkably high.

Developer Productivity

There are not so many tests to check the developer productivity of applications created on both frameworks, but theoretically, Flutter could outperform React Native in it.

React Native

React Native uses the Javascript bridge to interpret the UI components for rendering and then calls Objective-C or Java API to display the corresponding iOS or Android component. This bridge is an extra layer of abstraction that may cause a more extended and laborious development process.

Flutter

Flutter takes a completely different approach to rendering. Let’s start with the fact that Flutter does not use native components of other platforms. Instead, Flutter works directly with canvas and events, it creates its widgets and uses the GPU to render them on the screen. Flutter compiles all Dart code into native ARM code which is processed directly by the processor. This allows the applications to run faster. Both Flutter and Dart adopt regulated documentation that allows improving the productivity of developers.

Flutter vs. React Native: Conclusion

Choosing between React Native and Flutter for building cross-platform native mobile apps may depend on many aspects. If we look from a UI perspective, the difference is not visible for common app users.

For developers or companies, the choice of the platform depends on various factors from the previous tool stack to budget questions. In general, if a company already has a team of developers, it won’t be difficult to transfer people to React Native. Especially taking into account that React Native has a strong and mature community along with native app performance and use of popular JavaScript in developing cross-platform apps.

At the same time, Flutter has strong support from Google and the number of developers interested in the framework is only growing. Thus, in the near future, you can expect Flutter to flourish.

From our side, QuickBlox is getting ready with React Native SDK which is now in beta testing. But React Native SDK will be available really soon! Thus, stay tuned, otherwise, you can miss our great release!