Are You Using AI In Your Job?

We want to understand the real-world applications of AL and ML in business and the impact it will have on all our jobs.

Want to help? Complete the survey, your insights could make a big difference. It will just take one minute.
You'll be the first to get access to the final report.-->

React Native vs Flutter: Key Differences Between Cross-Platform Frameworks

| November 30, 2021

Here at Blue Label Labs, we primarily prefer React Native for our cross-platform development endeavors – with that said, we do recognize there are other great options on the market for building apps which is why many look to React Native vs Flutter comparisons for guidance. For the most part, they each accomplish the same goal but the means to get there is a little different.

Though there are other great cross-platform platforms like Unity which we’ve used to build products like Orbit Path, React Native and Flutter are used by a vast majority of the market to build cross-platform apps. As such, we’re going to explain what they are and discuss some of the finer points of their differences to help communicate their strengths and shortcomings.

What are React Native and Flutter?

React Native and Flutter are cross-platform frameworks that allow developers to build apps for both Android and iOS simultaneously by creating a single code base that can be used natively by each mobile (or desktop) platform. Each has a different way of accomplishing a feat that essentially allows developers to program in one familiar language and use this same set of code for Android, iOS, and potentially other platforms like Windows, Linux, or Mac.

Rather than build a poor-performing hybrid app or write two entire apps from scratch using each platform’s respective native language, cross-development platforms allow developers to create one codebase that will interface natively with the underlying device, meaning as if it were written in the platform’s native language. While neither Flutter nor React Native provides 100% code-sharing across platforms, we’ve seen in our work that typically 80-90% of the code written in either of these frameworks can be used across both iOS and Android. What this ultimately provides is a better experience as you have actual controls that directly interact with underlying OS and hardware that aren’t strained through layers of inefficient code and rendered via web browser engine, as we see with hybrid apps built with Cordova, Titanium, or Ionic.

Building apps natively, using Swift for iOS and Kotlin for Android, produces the best possible results when building an app, but it’s time-consuming to create two separate builds from the ground up. This is why some either choose just one to start (usually, iOS) or go the cross-platform development route as this allows to reuse a large chunk of a single codebase for multiple platforms without compromising quality. With that said, though each accomplishes the same task there are some key differences in how they “do what they do” which is important when selecting one for your apps.

Developed by Facebook, React Native is Javascript-centric and injects code as Objective-C/Swift or Java depending on where it’s running to interface natively with the system where it’s running where it renders native UI controls. Google’s Flutter uses a programming language called “Dart” that builds to native binary code and uses its proprietary Skia engine to render the UI and controls. 

Basically, the “where” and “how” that each translates the code written by developers in the platform’s respective language (i.e. JavaScript or Dart) to usable, native code (i.e., Java for Android or Swift for iOS) occurs in different places which makes a difference in performance, plus the fact that each renders the UI your users see a little different. But more on that later.

React Native vs Flutter

Unlike the politics that often follow Facebook and Google products and services, their cross-platform frameworks tend to deflect a lot of these trivial discussions that can skew your ability to objectively assess a platform. Feel free to let out a dramatic, long sigh every time you hear “Meta” instead of Facebook for the foreseeable future, but try not to let this or some kind of fanboy affinity for either platform cloud your judgment when it comes to these frameworks.

So, let’s take a look at what each has to offer.

React Native has seniority which matters (mostly)

React Native has been around longer which is a fairly important point to consider. Since it’s JavaScript-based (a language that’s been around since the 90s), the syntax is more familiar to most developers than Dart which is a unique language of Flutter. Because it’s JavaScript-based and builds upon ReactJS (which is a little older) you have both a bigger pool of viable people to build and maintain these apps, plus there is simply a lot more that’s available for React Native.

Dart is a very new language that was pushed by Google as a replacement for JavaScript – time has shown us that it isn’t and likely never will be a “JavaScript killer” but it can exist as its main competitor. While React Native does have seniority, Dart has come a long way in a relatively short timeframe – maybe you’ve been the “new person” at a job but managed to perform on par with senior staff?

UI customization abilities

Both platforms offer substantial customization but it looks different for each framework, namely in how they render which is a central point in the React Native vs Flutter debate. Rendering is handled by Skia for apps built with Flutter means there is more free reign to create your own controls rather than use those provided by Android or iOS as React Native does by invoking either’s APIs to natively interface an element. This means that there is a little more customization inherent to Dart but it’s not quite as efficient. Yet, for some apps that need or want an extremely unique UI, Dart provides the kind of canvas developers need to easily create highly custom, functional designs.

Thanks to React Native’s design, it’s easier for developers who simply want to use reliable, built-in platform-specific UI controls. Because React Native is a more seasoned platform than Flutter, there’s more library support which can mean that there are more cases where developers will need to build things from the ground up in Dart.

Differences in how React Native and Flutter render the UI

As we mentioned before, Flutter uses an integrated 2D graphics processing system called Skia to create the UI – this roots in the platform’s philosophy that seeks to provide developers an all-in-one, out-of-the-box framework with everything developers need from prebuilt controls to widgets. React Native can use custom elements but its strengths rely on the ability to use familiar controls for the sake of functionality.

Though Dart’s graphics system sounds like it could be extraneous, it translates everything together through Flutter’s compiler using an efficient ahead-of-time (AOT) process that compiles to Android or iOS code. React Native’s approach is more of a direct interface that is comparatively faster but less malleable without a little extra work.

React Native is also much lighter when stacked against the thick framework of Flutter and thrives as a product that’s supported by a rich ecosystem of developers. Developers can simply choose what they need from a vast repository of open-source projects to use as they see fit.

Apps that use React Native and Flutter

You can’t always tell what framework an app is built with, but if you look at the same app on different platforms, you could make an informed guess. As we discussed above, the Skia-based rendering used by Dart more or less means you’re more likely to see custom controls across both apps instead of native controls you’d expect to see on each device. Some examples of apps that are built with React Native include Facebook (surprise, surprise), Walmart, Skype, and Bloomberg. Flutter has some big names under its belt too like BMW, Google Pay (because of course), Alibaba, and a significant partnership with Tencent.

We stand by cross-platform development

Cross-platform development is often in businesses everyone’s best interest as it’s an ideal option for those looking to quickly get products on both major mobile platforms. We prefer to leverage React Native but as you can see, there is just as much merit to using Flutter. 

When it comes to selecting a framework, it’s really about what your development team is most comfortable using – under the hood, they look a little different but can accomplish the same goals. For more information or to discuss your idea for a digital product, get in touch with us today.

+ posts