flutter vs react native

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 2019 top-rated cross-platform frameworks – React Native and Flutter. We hope to give you a bit more than just a general overview or advice on what to choose.

Table of contents

  1. React Native – the story so far
  2. How to create an app with React Native?
  3. The short story of Flutter
    How does Flutter work
  4. React Native vs Flutter – comparison
    React Native vs Flutter – learning curve
    Flutter vs React Native – popularity
    Flutter vs React Native – community support
    Flutter & React Native – productivity
    React Native vs Flutter – easy view building
    React Native vs Flutter – building app releases
    React Native & Flutter – programming languages
    Flutter vs React Native – performance
    Flutter or React Native – user interfaces
    Flutter vs React Native – testing
  5. React Native or Flutter development – a comparison table
  6. React Native and Flutter – summary

React Native – the story so far

React Native 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. Facebook, while developing its own products, such as Messenger, and utilizing their experience in the React.js web framework, created a solution for producing native application components from the JavaScript thread.

Simply put, React Native is an open-source framework that uses a common programming language called JavaScript for iOS and Android app development. For a more general view of the 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”.

How to create an app with React Native?

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 framework allows developers to create separate apps for each platform that will share JavaScript code and work almost like native software on both iOS and Android.

Building UI

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 on maintaining it.  Poor in comparison to project designers in Android Studio / XCode. Also, you can use premade templates, for example TypeScript template.

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 developers and users.

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.

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.

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 vs Flutter – comparison

Now let’s compare React Native and Flutter. 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.

React Native vs Flutter – learning curve

Google actively encourages developers to learn and switch to Flutter. There are plenty of training materials available in the form of lectures and video tutorials.

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 app 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, in the said ranking, under the category “Most Loved”, both languages ​​sport an almost identical result, JavaScript – 66.8%, Dart – 66.3%. The category reflects how many developers are interested in working with a given technology. Considering most results being close to 60%, Dart seems like an easy and exciting technology to learn.

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 in this field relies more on the community, having several third-party libraries for handling the same tasks. This can be both a disadvantage and an advantage. Flutter remains under greater control of its authors, who continuously keep providing ready-made solutions. At the same time, they cooperate with a growing community for missing tools, such as database support.

The final decision on the use of technology belongs to the developers. Flutter, as a junior framework, is a little less popular. React Native uses JavaScript and is based on React.js, so it can be more attractive to experienced web developers.

Flutter & 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. Access to device features is provided by plugins.

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 2 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.

React Native & Flutter – 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 know 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 smooth and seamless 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 components for iOS and Android 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’s 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

FrameworkReact NativeFlutter
LanguageJavaScriptDart
Released in20152017
Released byFacebookGoogle
Learning curveEasy for React and JavaScript developersNeed to learn Dart first, so it can be more challenging at first
Hot reloadsYesYes
ArchitectureBased on Flux and Redux, need a bridge to connect with native UIBLoC architecture, UI is built with premade Flutter components
Documentation and toolsGreat documentation, but it can be difficult to start a project from scratchThorough documentation and starter toolkit
LibrariesUtilizes native UI components of the operating systemAn extensive library of widgets and plugins
When to useYou want reusable code for mobile, web and desktop developmentYou need excellent UI and fast performance
When not to useYou need better efficiencyYou want your app to have a smaller size


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.

Cross-platform vs Native development ebook - itcraft

Would you like to know more about the differences between cross-platform and native app development? Download our ebook! It is the ultimate guide to React Native, Flutter and many other technologies used in software development. You will find out more about native applications, cross-platform applications and technologies used to build them.




And if you are looking for app development specialists that know how to utilize React Native, Flutter and native frameworks – we are here for you. Just email or call us to discuss your next app project!


See also

Top 4 technologies to develop your app in 2020
Flutter apps – starting work with the new Google cross-platform framework
Building mobile UIs – Flutter vs native Android SDK