Flutter vs React Native – cross-platform frameworks comparison

Cross-platform app development is making a lot of noise these days. As software houses, along with their clients, are scrambling to keep up, we take an in-depth, technical look at the 2021 top-rated cross-platform frameworks – Flutter vs React Native. We hope to give you a bit more than just a general overview or advice on what to choose. We have experienced developers in mobile app development team who gladly share their knowledge.

Table of contents

1. The short story of Flutter
2. React Native – the story so far
3. How to create an app with React Native?
4. React Native vs Flutter – comparison
5. React Native or Flutter development – a comparison table
6. React Native and Flutter – summary

The short story of Flutter

The first version of an open-source framework called Flutter (code-named “Sky” back then) was presented in 2015 at the Dart developer conference. The first stable version, allowing to compile native Android and iOS applications from one code, was released at the Flutter Live event, December 2018. Among the top advantages of Flutter, the creators mentioned a smooth operation level with native apps and maintaining the state of the hot reload application. The initial receptions of the Flutter framework were very positive, and the first Flutter reviews gave us a lot to look forward to.

Now this open-source technology based on a programming language called Dart is one of the most popular cross-platform app development tools used by software houses. Flutter doesn’t need third-party libraries to build excellent UIs and offers impressive performance. It is very much appreciated by app developers and users. Starting cross platform development is much easier, as Dart language doesn’t force the company to choose native app development team for target platforms. The company’s inner developer community can use Google Flutter to create mobile apps (Android apps, iOs apps, and hybrid apps). Building cross platform apps is much less time-cosnuming with Flutter. Moreover, Flutter can be used not only for cross platform development in terms of mobile app development. A skilled programmer can use it to develop web and desktop apps as well.

We are also very fond of Flutter as we believe it can become one of the major mobile technologies. Our clients also see the potential of it. They appreciate its efficiency when it comes to developing apps for multiple operating systems. Let’s explore cross platform development and see what Flutter can offer and what its advantages are.

How does Flutter work

Flutter uses Dart, an object-oriented programming language with a type system that combines static typing with runtime control for application development. It allows type inference so you can skip their declarations. It has an async / await mechanism, which, together with the Future type, enables you to write asynchronous code as if it was synchronous. If you’re familiar with Kotlin or JavaScript, learning Dart shouldn’t be an issue. Will Flutter replace React Native for you? It may be the case, keep on reading to learn more about Flutter framework, Flutter performance, and building apps with Flutter.

Everything is a Widget

The basic building block of the user interface is the Widget. The operating principle is similar to React Native – Flutter’s documentation actually mentions React as inspiration. Individual elements are arranged in a hierarchical structure, rebuilt each time the state of the application changes. This does not mean, however, that the view is being built again and again. The returned structure is only an intermediary on which the framework modifies the visible interface.

In this way, Flutter replaces the imperative style known from native platforms with a declarative style, taking the burden of writing and managing transitions between possible interface states of the developers’ shoulders. Cross platform development becomes less complicated with Flutter. What’s worth mentioning is the hot reload feature – it’s about inserting (or rather injecting) updated source code into running Dart Virtual Machine. Then the Flutter framework rebuilds the widget tree and you can quickly see the implemented changes. Interesting solution for those who develop apps and like to act fast in mobile development.

Building UI

Flutter provides a wide range of ready-made widgets that comply with Material Design guidelines. The programmer has, among others, buttons, text boxes with titles, or wrappers that manage the position of beams or floating buttons. Arranging items on the screen may cause some confusion as we define the position and look of components by placing them in containers. This often causes the structure to grow and forces you to remember the behaviors and relationships between several types of containers.

The architecture

The BLoC (Bussiness Logic Component) architecture is one of the solutions proposed by Google. It places use cases in separate classes. Communication with them takes place via asynchronous streams, where the interface publishes events in the appropriate BLoC “inputs” and, at the same time, listens to the outputs for the flow of subsequent application states. The intermediary between these components and the interface is the StreamBuilder widget, which receives data from streams. The basic assumption of this architecture is to adapt the application to operate in an asynchronous environment – where a variety of data flows in at any time and in any order. 

Familiar solutions 

Native developers familiar with RxJava and MVVM architecture will definitely find this to be a comfortable solution. However, this is not the only way Flutter can work with, e.g., Redux and then the components themselves can propagate the state. This process can be simplified by InheritedWidget, which will shorten the path to the target component to which the data must travel.The provider can also be used as a solution, being a library combining Dependency injection and application state management. With its help, the programmer can provide the necessary values ​​to the appropriate locations in the interface. You can inject any objects, simple data, streams, or objects observing data changes (e.g., ChangeNotifier).

All of the above solutions are well documented and explained in official guides. This will help many developers to implement solutions they already know.

React Native – the story so far

React Native started ita hiatory long time ago. It was created by Facebook. The story began at an internal hackathon project in the summer of 2013. The full public release of React Native took place at the 2015 edition of React.js Con. In March 2015, at F8, Facebook announced that React Native was now available on GitHub. While developing its own products, such as Messenger and utilizing its experience in the React.js web framework, Facebook created a solution for producing native application components from the JavaScript thread.

Simply put, React Native is an open-source framework that uses a standard programming language called JavaScript for iOS and Android app development. For a more general view of the React Native framework, read about the Pros and cons of React Native.

React Native’s quick rise to fame created quite a few misconceptions as to its capabilities and use. You can read more about it in our article “7 React Native myths vs reality”.

JavaScript is the primary programming language for React Native. The JSX extension is included by default to facilitate writing declarative UI components, just like in React.js. The programmer is not restricted in using other transpilers. That is why Flow, TypeScript or ReasonML are often found in React Native programming. In addition, you can use the latest language constructs like async / await or generators. Ultimately, after compilation, we will have a native app with a JavaScript code package that includes product logic written in React Native.

The React Native framework is cross platform framework that allows developers to create separate apps for each platform that share JavaScript code and work almost like native software on both iOS and Android. So it has an advanatge in terms of creating cross platform mobile applications for target platforms (both iOS and Android apps). It’s good to learn React Native and then expand the knowledge – this way one can become a pro in the developer community.

Building UI in React Native apps

React Native contains a set of standard UI elements, equipped with bindings to native components, to be used in the app according to the operating system. The components can be freely grouped in the hierarchical structure of the declarative view. They can render other declarative components or components with native bindings.

Component (React.Component) is a fundamental concept in React Native. It is an object (or function) that has “props” and “state”. For given props and state, the component should return a view, but only when props or state change. Props are types of arguments for a component that are set from the outside – the component has no control over them. State, on the other hand, is internal, private data, entirely and exclusively under the control of the component.

The data flow

React Native uses unidirectional data flow, which distinguishes it from other declarative frameworks such as Angular (two-way data binding). This results in better performance and easier debugging. The one-way data flow in React Native is done by giving the component in the rendering phase read-only props and state. It can freely transform them, pass them down the view hierarchy but shouldn’t be able to mutate them directly. The same goes for child components that will receive this data as props. Modifying props or states directly will not refresh the view. To do this, use the component’s setState method (or a similar function when using Redux or other solutions). Event handling by child components should be accomplished by passing in callbacks’ props to handle events that ultimately implement the parent’s setState as needed.

Hot / Live reload

Hot reload provides a substantial acceleration of the development process because every change in JavaScript can be seen on the phone almost immediately. The function is limited to debug mode only (metro bundler must be connected) and native modifications are not visible.

Expo

All you have to do is install one Expo application on your phone, and you can download the RN application code from the internet or the QR code and instantly update it when it changes. It is not suitable for creating production applications but rather for rapid prototyping. If we just want to add real push notifications, Crashlytics or any library not included in the Expo SDK, we must first complete the work with Expo and export (expo eject) the project to the “full” version.

snack.expo.io

We don’t even have to install Expo on the phone, as we can simulate the application in the browser!

React Native CLI

A program to generate a new React Native project. Unfortunately, very limited options and the program is used from the terminal.

Usually, there is a lot of initialization work left to be done, e.g., generating certificates, adding dev/prod variants or hooking up Crashlytics. You can prepare a project template to initiate new projects faster, but the React Native environment is changing so quickly that we would have to spend more time maintaining it. Poor in comparison to project designers in Android Studio / XCode. Also, you can use premade templates, for example, TypeScript template.

React Native vs Flutter – comparison

Now let’s compare: Flutter vs React Native. We will analyze the main tools available to programmers working in cross-platform frameworks. To find out what are the advantages and drawbacks of these app development technologies, we will consider various criteria to give you a comprehensive look at both Flutter and React Native from many perspectives. Let’s begin the comparison: Flutter vs React Native!

React Native vs Flutter – learning curve

Google actively encourages React Native developers to learn and switch to Flutter. There are plenty of training materials available in the form of lectures and video tutorials for those who want to build cross platform apps with Flutter. Let’s go deeper here and see whether one should choose React native or Flutter.

The documentation is comprehensive, laden with examples, and thoroughly explains various aspects of working with the framework- from building an interface to writing tests. The authors of the framework give us recipes for creating a variety of elements of modern applications. They also propose a straightforward and Flutter-friendly architectural model – the BLoC. The section dedicated to developers familiar with other popular platforms, both mobile and web, is a huge help. It explains the critical differences between Flutter and other programming environments.

As for React Native – it is based on one of the most popular programming languages, which is JavaScript. It was released years ago and is known by many developers. This means that adapting to React Native is relatively easy.

That said, both technologies have certain levels of entry. Developers experienced in native application development will have to assimilate patterns known from web productions rather than what they are used to. In contrast, front-end programmers will have to face specific patterns of development for mobile platforms. Knowledge of particular platforms will also be useful if only to improve the process of building and implementing applications.

Flutter vs React Native – popularity

The support offered for Flutter developers makes learning the framework easy. Depending on your experience, you may need to get up-to-speed with ReactiveX, declarative UI, or the async / await pattern. The framework uses the Dart programming language, not as popular as JavaScript or Java, so for some developers, it will mean having to spend some time learning the syntax. In the Stack Overflow popularity ranking from 2019, it took 22nd place with a score of just 1.9% – the result far off the top spot holder – JavaScript. However, it is quite similar to other object-oriented languages ​​and has type security, so switching shouldn’t be too complicated.

In addition, Developer Survey from 2020, under the category “Most Loved”, Flutter scored the 3rd place! The category reflects how many developers are interested in working with a given technology. 68.8% of programmers appreciate this framework which is quite a lot. Every year these stats grow which means Flutter becomes a leader in software development.

As for Flutter and React Native themselves, they are both appreciated for Android & iOS app building. Being leaders on the market, their communities are vast and helpful, although React Native is a bit older, so it has more supporters.

Flutter vs React Native – community support

React Native relies on the community, having several third-party libraries handle the same tasks. This can be both a disadvantage and an advantage. Flutter authors and developers continuously invest their time and efforts into further growth of this technology. They also help create components that support effective programming.

The final decision on the use of technology belongs to the developers. Flutter is gaining more recognition and in some areas it’s already preferred over RN. React Native uses JavaScript and is based on React.js, so it can be more attractive to experienced web developers.

Flutter vs React Native – productivity

First of all, both Flutter and React Native development are rather seamless and fast. Coding is productive thanks to hot reloads, which allow them to introduce changes and updates in almost real-time, code structure and syntax that are logical and easy to understand, as well as easy configuration and installation.

Code reusability between platforms is splendid, with a bit of advantage towards Flutter. With libraries made by fellow developers, every app development can be radically sped up. Overall, productivity in Flutter or React Native is on a high level and there is no doubt that development with these frameworks can provide splendid results.

React Native vs Flutter – easy view building

Both frameworks build views in a declarative way. They introduce analogous concepts of Component and Widget, as basic building blocks of applications, operating on the basis of an unchanged state. Each of them also offers a Hot Reload function that allows you to reload a working application and quickly see introduced changes.

At the core, both technologies are quite similar. They use a declarative UI building style and are quite flexible, allowing the developer to apply various techniques to manage the state of the application. Plugins provide access to device features.

React Native vs Flutter – building app releases

Everything has to be done natively and we are limited to what Android Studio / XCode offers. We have two platforms to manage and there are no advantages of React Native.

Flutter offers plugins to facilitate work in Android Studio and Visual Studio Code. They support project creation, debugging and the Hot Reload function.

DevTools

A tool for debugging and profiling apps from your browser. It allows, among others, to browse the interface in the form of a tree and check individual widgets. It also allows you to track memory usage, CPU resources and app performance testing.

OEM Debugger (Original Equipment Manufacturer)

It allows you to debug not only Dart code but also files generated for a specific platform. This is especially useful when writing your own system solutions.

Flutter and React Native – programming languages

Flutter uses Dart and React Native uses JavaScript. Both have their benefits. JavaScript is one of the most popular languages in the world of app development, which makes it easy to build a team of specialists that will quickly adapt React Native into their work. On the other hand, Flutter and Dart are relatively easy to learn – they are often recommended for new developers to learn.

JavaScript is good to know, but with every app project, it is essential to be aware of the proficiency of the developers you want to hire. If they specialize in React Native or Flutter – they might be able to achieve perfect results, no matter what the community says about one or another.

Flutter vs React Native – performance

Flutter is claimed to work smoothly and seamlessly comparing to React Native, which is also not too slow. The problem is React Native is working with native elements and JavaScript, so oftentimes, it requires third-party libraries or other ways to add more features to the native components of the app. It slows it down.

Flutter is more independent – meaning it doesn’t require such actions to build advanced UIs and keep the speed. This type of architecture, where the framework has everything within itself, makes every app built with it more stable and secure.

Flutter or React Native – user interfaces

In app development, UI is one of the critical elements. It’s a layer responsible for interactions between the app and the user. Fonts, colors, buttons, the whole visual layer of the app – that’s the user interface.

React Native uses a JavaScript bridge to render native iOS and Android components to give the app a true native feeling. There are also various third-party premade components that can be used in React Native app development. Still, there are some cons of this solution – mostly because React Native UIs might work differently on various platforms and do not handle well more complex app interfaces.

Flutter offers UI widgets that do not require any bridges, making the app UI even more native-like. Software is more consistent across operating systems because of the premade libraries offered by Flutter.

Flutter vs React Native – testing

There are several frameworks for React Native. By default, “Jest” is enabled. We can easily add new unit tests by putting them to __tests__ and running the “npm test” command. You have to be careful when importing native modules – you need mocks, and these are often missing in npm packages or work poorly.

Flutter offers its own plugin designed to perform unit and integration tests and check widgets. For mock dependencies, the official documentation recommends Mockito.

Flutter supports flavors that allow you to configure various build variants, search among existing Android productFlavors and iOS schema. You can refer to them directly in the Dart code or call them out from Flutter CLI, but they must be configured separately for each platform first. The process has so far been described in Flutter community articles. What’s up with that, Google?

To prepare the release version, it is necessary to configure each platform individually. The documentation describes the process of editing individual files, but knowledge of Android and iOS will definitely speed up the process.

React Native or Flutter development – a comparison table

If you are a programmer and are interested in Flutter or React Native – you should definitely check out their official websites to get even more information about their capabilities.

Flutter official website

React Native official website

React Native and Flutter – summary

Cross-platform frameworks like React Native and Flutter keep developing and are gaining ground across the IT landscape. Solutions used for app development with results similar to native are definitely displacing hybrid methods, offering better performance and native appearance, as well as the behavior of the application. Flutter and React Native seem to be top players important in the cross-platform field.

The market shows a lot of interest in React Native apps and Flutter apps. This comes not only from budget-conscious startups but also from the largest global brands. React Native development can be the perfect choice for creating MVP versions of the software. Flutter is sometimes used as the major framework for a single app made only for iOS and Android.

For us, Flutter is a technology worth talking about and investing in. More and more projects need cost and time-efficiency without giving up quality and performance. Apps that are instantly available on both iOS and Android gain more users quicker and with Flutter, it is hard to tell the difference from native. If you are wondering how Flutter can benefit your business – contact our consultants. They will analyze your idea and suggest the best solution.

Read more

How mobile applications are fueling digital transformation
What is a mobile app?