Cross-platform app development is on the rise. Start-ups, e-commerce, and other tech companies struggle with developing interactive apps fast, efficiently and with ease. Facebook’s React Native has been recognized as a reliable tool for mobile development. However, Google’s Flutter, a tool that came out of beta only a few weeks ago, has been gaining much interest lately.
Let’s take a look at those two competitors in this detailed overview to decide which one is a potentially better tool to develop a cross-platform application.
Flutter and React Native — quick overview
In our previous blog post, we have shown the pros and cons of the latest Google tool, Flutter. So just to remind you: It is a framework introduced by Google round 2017 (the company released first, stable version December 2018). Flutter utilizes Dart language to create beautiful apps for both iOS and Android using the same code base.
React Native is Facebook’s tool developed since 2015. It uses JavaScript built upon the React library, which is also Facebook’s invention. Apps made with React Native are also cross-platform. Most prominent startups in the world (Facebook, Instagram, to name a few) have developed their mobile apps with this framework.
Flutter and React Native — similarities
Undoubtedly, Flutter and React Native are somewhat similar frameworks (at least at first sight). Both help developing apps using the same code base; both are supported by giant tech companies; they are open source and free. They also share the hot reload feature and excellent UI solutions for a remarkable native experience.
A close and detailed comparison of both platforms reveals numerous differences between them though. From a programming language, through performance, up to the state of community — React Native and Flutter are two different ways of creating mobile apps. Let’s dive right in!
Programming language
React Native works on JavaScript. It is a widely adopted language, with a lot of support from the online community and a track record of many successful mobile and web applications.
Flutter uses Dart, which we have explained in details in the first post of the series. Dart is fairly new, although the learning curve for this language is not steep, especially for experienced developers familiar with C# and Java.
User interface
Both frameworks differ when it comes to designing the user interface.
Creating UI with React Native means using the components native to the system. Apps created that way are almost indistinguishable from native ones. The vast number of React Native UI components promises a great user experience, even better than its younger opponent. However, native components are also a significant burden for React Native because of performance issues and limited portability.
Flutter uses widgets for UI creation. They are not part of the platform which gives Google’s framework an advantage in terms of portability, performance, and compatibility. User Interface made with Flutter feels really native and looks great thanks to its proprietary widgets.
Performance
In React Native, when an app requires native elements of the platform (e.g., camera usage), there must be a JavaScript bridge to convert JavaScript variables into native ones. This may cause performance issues when building a hybrid application, especially with the animation speed.
Dart, on the other hand, was built to be the JavaScript successor. It is one step closer into native applications and backed by C++ engine. Flutter not only does not use the bridge to interact with OS elements but even further reduces the interaction with them thanks to Skia (the graphic engine). That means apps developed with this framework achieve significantly better fps than React Native ones.
Development time
Delivering projects on time has become one of the most critical elements in commercial app development. Both Flutter and React Native support cross-platform and reduce time-to-market for mobile apps. In both cases, third-party libraries and ready-to-use components make coding more efficient.
React Native has been on the market since 2015. Many developers recognize Facebook’s framework as one of the most convenient and swift ways to develop an app. Comparing to native development over 90% of the code can be reusable, and over 70% — shared between the platforms. Also, JavaScript is such a popular tool, that finding a React Native developer is easy. On the other hand, since React Native uses the bridge and native elements, it often requires separate optimization for every platform — the problem that widget-based Flutter does not have. That may cause more prolonged and wearisome development process.
Flutter, as a relatively new framework, has a noticeably smaller community. Dart is still a fresh language, in oppose to popular JavaScript. But since Flutter outgrows React Native in terms of usability and simplicity, the development time shortens significantly, especially for those developers, who get to know Dart beforehand. It is super easy to start developing in Flutter — it is all about downloading and unzipping Flutter package and creating an environment variable inside of the framework’s folder.
Documentation
Documentation and IDE support is one of the essential elements for fast and efficient coding. Again, React Native and Flutter differ in this field, mostly because of uneven time on the market.
React Native has bigger and more complex documentation. The official documents are full of guides and answers for frequently asked questions about various elements of building cross-platform apps, which is a good thing. However, some developers may find React Native’s documentation clumsy and chaotic, mostly because of its open source nature.
Flutter’s documentation is considered to be organized and very thorough. The framework even has a document written especially for React Native developers, helping them to move from old to new tool. The framework is compatible with lower amount of IDEs (VS Code, Android Studio, IntelliJ IDEA). But then, the best React Native’s alternative (Webstorm) is a paid version, so it puts it a little behind Google’s tool.
Community
With over 3 years on the market and JavaScript being a widely recognized programming language, React Native is a winner in this competition. Most prominent companies and an extensive amount of developers use it to create cross-platform apps. However, React Native may still feel the breath of younger competition on its neck.
All because Flutter growth is impressively fast. Although it may not have as much Github stars as React Native, it gains momentum and attracts new, dynamic companies, like Alibaba or Tencent — to name the few. Flutter community is really dedicated to develop the framework as fast as possible. Up until now, there are nearly 1500 Flutter packages available on official Dart page — and counting.
Summing up
The battle between React Native and Flutter is mostly a battle between stable, recognized framework versus an opponent that is new, dynamic and hungry for success.
React Native is an established and reliable tool with a stronger and more mature community. It leverages one of the most popular programming languages and offers great native app performance, especially for iOS apps. On the other hand, developers may find it harder to learn and use because of problems with components and documentation. Not to mention the development time and optimization issues.
Flutter shines when it comes to great UI and quick time-to-market. Although it requires some effort learning the new language and lacks firm support from the community, these are not the groundbreaking cons. Especially when comparing the performance, development time and possibilities of both platforms — Flutter greatly overperforms its older competitor.
Flutter vs React Native — brief technical summary
Flutter
First Release: 2017
Created by: Google
Technology: Dart
Time-to-market: Fast
Documentation: Smaller, but clear and precise
Hot Reload: Supporting
IDEs supported: VS Code, Android Studio, IntelliJ IDEA
Native performance: Great
Used by: Google, Google Ads, Alibaba, Tencent, Hamilton Musical, JD Finance
React Native
First Release: 2015
Created by: Facebook
Technology: JavaScript
Time-to-market: Slower than Flutter
Documentation: Extensive, actual, but a bit clumsy
Hot Reload: Supporting
IDEs supported: Almost every IDE possible
Native performance: Great
Used by: Facebook, Instagram, Uber, Tesla etc.
