React Native vs Flutter - Which One To Choose in 2020?

Introduction to cross-platform technology

Since some time mobile applications have become the most important part of the tech industry. Over years due to multiple platforms companies had to divide developers to different teams responsible for each application. The increasing demand for optimizations of budget and time brought to life the idea of creating cross-platform mobile applications using one codebase for iOS and Android.

There are few solutions but there are two main players on the market. React Native and Flutter. In this article, we will compare these two technologies and discuss their advantages and disadvantages.

Introduction to React Native and Flutter

React Native

React Native is an open-source framework based on JavaScript used to cross-platform development of mobile applications for Android and iOS with a single codebase.

React Native was created by Facebook as an internal project during a Facebook hackathon in 2013. In January 2015 during React.js Conference first Preview of RN was released. On F8 Conference in March 2015, there was official lunch of React Native, where Facebook declared it open for use and available on Github. Since then the Facebook team is still working on React Native to stabilize API and fix bugs.

Most popular apps using React Native: Facebook, Skype, Instagram, Pinterest, SoundCloud, Skype, Tesla, and a lot more.

Flutter

Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is based on Dart – quite a new object-oriented programming language.

Both Flutter and Dart were created by Google. Beta release of Flutter was in February 2018 on Mobile World Congress. In December 2018 during Google I/O Flutter 1.0 was released. It was stable and ready for production. Flutter developers are still working on it to improve stability and performance.

Most popular apps using Flutter: Xianyu app by Alibaba, Hamilton, Google Ads, Reflectly.

Comparision

First, Similarities:

Both technologies are similar in foundations. They are reactive frameworks and their main goal is to develop cross-platform applications. Thanks to single codebase time spend on coding can be reduced to 50%. This allows reducing budget as well.

React Native and Flutter have a possibility of real-time preview. Any saved change can be seen and test in a matter of seconds. Developers don't have to wait for results of long code compilation.

Both frameworks are based on high-level objects used to describe any part of an application. In React Native they are called components and In Flutter we call them widgets. Widgets came in types: stateless and stateful, just like in React Native where we have stateless functional components, and classes or functional components using hooks to include state.

They are created by the biggest IT companies. Facebook and Google compete and want them to be widely available for a wide range of developers. Because of it both projects are open-source and have very good documentation.

Differences

React Native and Flutter are using similar components to create UI, but they have a different approach to it.

Flutter has a large number of widgets ready to use. Most of them are using material design concepts. However, widgets used in Flutter aren't adaptive. The concept is to create the same looking apps independently from the target platform. If a developer wants them to look specific to the platform he has to do it intentionally.

On the other side, we have React Native where some components are adaptive. This means that React Native makes them look suitable on a specific platform. Unfortunately, several components provided by the framework are not as impressive as Flutters'.

Pros and Cons of React Native

Pros

• Fast Refresh, no more waiting for native builds to see results
• Development for two or more mobile platforms using one codebase
• Up to 50% less time spent on testing applications
• Uses JavaScript, one of the most popular languages in the world
• Almost five years on the market
• A huge and active community
• Easy to learn for React developers
• npm registry, an online database full of useful packages

Cons

• Not as fast as native applications
• Small number of components out of box
• Lots of low quality or abandoned packages
• Sometimes unpredictable UI due to adaptive components
• App size is bigger than native app.

Flutter’s Pros and Cons

Pros

• Hot Reload, see results of coding in few seconds
• Development for two or more platforms using one codebase
• Up to 50% less time spent on testing applications
• Faster app development.
• User-friendly designs
• Perfect for MVPs

Cons

• Smaller size of community due to short time on the market
• Dart language to learn *Size of app is bigger than native app.

Summary

Cross-platform frameworks are getting more and more popular. They offer quite good performance in comparison to native ones and native appearance and behavior of the app.

Both frameworks are very similar. They are based on components and widgets using state or not. Each offers hot-reload functionality to check immediately conducted changes.

Frameworks are strongly developed but React Native is older and has more users, but on the other hand, Flutter seems to grow much faster.

For now, there is no clear winner. The developer has to define priorities, check the pros and cons of each framework and choose what fits best for your project. We hope that the article shed some light on the topic of cross-platform frameworks and make your choice a little bit easier. If you need more help with React Native, Flutter or overall mobile applications feel free to reach us out.