Flutter vs. React Native: A Senior Developer’s Take

Mobile development is a hot topic these days.  There are over 3.6 billion mobile users, and that number is estimated to rise to 4.3 billion by 2023, proving that the mobile industry won’t be slowing down anytime soon. Getting into that growing market quickly and efficiently relies on the  crucial decision of which app development frameworks to utilize.  Choosing the proper foundation for an application can potentially save or cost hundreds of hours of extraneous work, saving budgets and timelines or killing them.   

The two most popular frameworks for modern cross-platform mobile application development are Flutter and React Native. It’s not hard to see why they are the go-to frameworks for development teams.  React Native is developer-friendly with platform-specific widgets, while Flutter apps perform well and have a hefty widget toolkit.  However, after testing out both paths by building out several applications, Flutter is a clear winner.  Here’s why:

  

Time Is Money

Clients want to know the development team will finish their application on time to save money. Flutter’s developer tooling is robust and a huge time saver. Being able to live debug your application and hot reload changes can save tons of time. Inspect the widget tree and see active configuration and state speeds up the development cycle.  

When testing applications using React Native, an application needs to be built and then run on a device. Unfortunately, there were no out-of-the-box testing tools. If you happened to be using a particular set of packages, there were only a couple of options for testing things like current state, navigation history, paint times, CPU usage, etc. But these tools felt more brittle and often caused more bugs than they helped find.

 

A Complete Material Library

One of Flutter’s strengths is that almost the entire Material library of components is provided and ready for use.  This reduces the time spent styling components as roughly half of what we built was already styled and ready to go.

When using a similar Material style library for React Native, it was incomplete and still had some discrepancies when it was built to an iOS or Android device; the rendering of specific components was inconsistent between the platforms.

 

Rendering Performance

Flutter’s underlying rendering engine (Skia) brings rendering performance to match a fully native experience.  Not using built-in OEM components from the underlying OS means no weird “gotchas” with rendering differences. Shadows render the same. Borders render the same. And every pixel rendered is the same whether it’s Android, iOS, or any other mobile OS.

When using React Native, every component was mapped to an underlying system-specific “widget” to try and keep them behaving as expected; but this added more trouble by having two separate implementations of a single component, and the behavior between the two was different, which led to odd rendering and interactions with other elements that had to be solved by creating custom components with a custom “mapper.”

 

Ease Of Language

The Dart language that Flutter is built on top of is powerful and has an easy-to-learn language that resembles C# and Java and can be easy to pick up if you’ve used other OOP style languages.

The advantage we had when using React Native was that since it’s Javascript, there wasn’t a language learning curve, and the team did not need to learn another language syntax.

 

Tutorials and Community Support

There are no shortages of fully-fledged Flutter tutorials that can walk you through creating an entire full-scale application for various application types like a Messenger App, Mail app, Todo app, and many more.  Also, as Flutter’s popularity grows, a plethora of guides and a community that is extremely friendly and open grows with it.

On the React Native side, there were plenty of guides and tutorials, but the selection of packages these guides would teach you was much thinner; if you wanted state management and wanted to learn, you had 2, maybe three options that had enough documentation to where you could understand the library.

 

Keeping A Project On Track

Our development team had multiple React Native applications go over budget because implementing the required features was difficult. However, our first Flutter application was extensive and came in under budget and on time. 

 

Final Thoughts

In conclusion, I recommend that developers test out both paths to see which one they prefer. We tried building several applications using React Native. The experience was harrowing; tons of “glue” code had to be written. Most reusable components we created also needed an iOS and Android version to accommodate the peculiarities of each OS. Our application ended up being more like creating one and a half applications.  Switching to Flutter helped the development team at Code Koalas achieve success with building well-designed mobile applications that also had a great performance.