With the growing popularity of smartphones among people from all walks of life, almost every company needs at least one, if not multiple, mobile apps in order to increase their reach and visibility as well as distinguish themselves from their competitors.

Not long ago, companies had to hire different teams and maintain separate code bases for supporting apps across multiple platforms like Android and iOS. This not only doubled the development time. It sometimes affected visual consistency across platforms as well, due to the unavailability of UI elements across different platforms. However, the recent past has seen the rise of cross-platform app-development frameworks such as React Native, Flutter, Xamarin, and many more.

These frameworks have not only eliminated the need of maintaining separate code bases, but have also reduced development and testing times significantly, while enabling a uniform User Interface across platforms. Hence, it should not come as a surprise that companies have started switching from the native frameworks towards a cross-platform framework. While making this switch, however, they often hit a roadblock when it comes to selecting which specific technology to use, simply because of the large number of options available.

Though the exact choice of framework often depends upon the specific use case of the company, there are some inherent pros and cons of every framework. In this post, I aim to compare and contrast two of the most popular cross-platform app-development frameworks: React Native and Flutter.

What is React Native and Flutter?

React Native was an internal framework developed by Facebook, which was open-sourced in 2015. It uses JavaScript and is built upon the React library. On the other hand, Flutter is a framework created by Google, who has been promoting it aggressively as the ultimate solution of not only building cross-platform apps, but also websites and desktop apps, since 2017. It uses the Dart programming language.

Criterion for comparison

In this post, I aim to compare the two frameworks based on various basic aspects, that directly or indirectly affect development time, testing time and the overall cost of building the app, irrespective of the exact use case. The various metrics for comparison are as follows:
1. Programming Language Used
2. Performance
3. Ease and Flexibility of Building User Interfaces
4. Community Support
5. Development Time
6. Quality of Documentation
7. Reliability of Apps


Programming Language Used

React Native uses the javascript language, which is already very common among web developers. Hence, there is a huge pool of people that are already familiar with the language, and hence no extra effort is needed from their side.
On the other hand, Flutter uses Dart, a language released by Google in 2013, but is rarely used among developers. Even though it is an Object-Oriented Language similar to Java, it requires some time for developers to understand the new concepts, and make the switch.
Winner: React Native

Performance

React Native UI components are compiled to their native equivalents, while the javascript code executes on a different thread, and communicates to the native modules using bridges. This not only affects performance, but also adds to the unreliability of  the framework, as any small change in the architecture of the underlying OS might break the bridge communication structure completely.
Flutter uses a drastically different approach, wherein all its UI components, as well as dart code is compiled into C/C++ binary files, which are then executed on the device over a virtual machine. This not only improves performance drastically, but also makes the code independent of the OS, hence adding reliability as well as backward compatibility.
Winner: Flutter

Ease and Flexibility of Building User Interfaces

Since React Native UI components are compiled into their native equivalents, it not only has a limited number of in-built components, but also places a restriction on how creative one can get while designing their custom components.
Flutter on the other hand a vast variety of in-built UI components, which also include components from Material design and Cupertino. Taking into consideration the freedom flutter offers for making custom widgets, one can easily say that Flutter is the way to go for building beautiful User Interfaces.
Winner: Flutter

Community Support

React Native uses javascript, which already has a widespread and active community. Also, since the framework was open-sourced by Facebook as early as 2015, React Native also has thousands of available libraries to choose from.
Flutter on the other hand, gained traction only after it was introduced in Google I/O 2017. Also, since Dart is not a well-known language, the current community support for Flutter is limited, but is growing day-by-day, mainly because of the backing received from Google, along with the flexibility it offers.
Winner: React Native

Development Time

Tough the initial setup of navigation and state management packages in a new React Native project can be cumbersome, it compensates for it with the fact that it uses components similar to web components, making it easier for existing web developers to make the switch. React Native also offers a fast refresh feature, which applies UI changes instantly, without the need of re-installing the app.
Flutter, on the other hand, has a faster development time for smaller apps as compared to React Native. However as the complexity of the UI increases or the app grows in size, speed slows down as developers have to write complex UI files, or learn new flutter concepts to deal with new challenges. The first problem has recently been solved with the launch of Flutter Studio. However the second problem still persists due to the low popularity of the Dart language. Flutter also has a Hot reload feature, similar to the Fast refresh feature of React Native.
Winner: React Native

Quality of Documentation

React Native's documentation is good and user-friendly, explaining what props are, what they stand for, and how they can be used. However it assumes that one already has some knowledge about javascript, as well as native development in Android as well as iOS. This makes it tough for a beginner to understand.
Flutter's documentation, on the other hand is very detailed and thorough, and expects only basic programming experience as a pre-requisite. It could be a bit difficult to follow at first, but once you get used to it, you don't have to go anywhere else to get your doubts cleared.
Winner: Flutter

Reliability of Apps

React Native, being a JavaScript based framework, has a few options when it comes to unit testing. However, there is no official support for UI testing, or even integration testing. This makes testing React Native apps pretty hard, and combined with the uncertainties it presents due to the underlying Flux architecture, building reliable React Native apps can actually become a pain point.
Flutter, on the other hand, has extensive built-in support for UI testing, unit tests, as well as integration testing. This makes the code base reliable, and since these are officially supported, they come with detailed documentation as well.
Winner: Flutter


Conclusion

The above post discusses the pros and cons of two mainstream cross-platform app-development frameworks, React Native and Flutter. The comparison was based on basic parameters, that directly or indirectly affect the development speed and code quality of an app, irrespective of the use case. Hence based on these parameters and my specific use-case, Flutter has a slight edge over React Native, by the slimmest of margins. Companies with already experienced JavaScript developers may continue to use React Native, while those with less JavaScript experience must definitely check out Flutter. However, judging by the support given to it by Google, and the rate at which Flutter is being adopted, I personally can see Flutter becoming the new meta in cross-platform app development.