Though just two operating systems (iOS and Android) dominate the smartphone scene, there are significant savings in labor to be found in developing once for both—aka cross-platform app development. React Native and Flutter are two of the solutions available to achieve such savings when developing mobile apps—each created at a tech powerhouse.
What is React Native?
Long the workhorse of web development, JavaScript (and thus Facebook’s React framework) nonetheless had its limitations in the first years after the release of the iPhone. React Native was the solution initially created by Facebook in 2013 and released at the beginning of 2015. In fact, the code was made open source in March of that year.
It should not be confused with its namesake, however—the “Native” is there because it is designed to make use of a smartphone’s own system, its native components. Beyond that, React Native app development means using just one code base to create cross-platform apps to run on both iOS and Android.
To some extent, it can also be said that React Native inherited some of its older siblings’ community, which provides access to a wide range of solutions and libraries, helping to drive down development time and cost.
As of October 2021, the most recent version is 0.66.
Learn more: React vs React Native—which one is better for your business?
Google has likewise recognized the time and labor savings when simultaneously developing for both iOS and Android. Their answer, Flutter, had its beta release in Feb 2018, and version 1.0 came out in December 2018. Significantly, it is more than a framework—it’s a portable UI toolkit, or in other words, a comprehensive app software development kit (SDK), complete with widgets and tools.
Flutter is based on Dart, a relatively new object-oriented programming language. For experienced developers familiar with Java and C# especially, it’s easy to learn and become Flutter developers. Rather than depending on a device’s components, it has full graphic control, which is to say that developers are programming—or choosing from Flutter’s available widgets—for the device’s every pixel.
As of September 2021, the most recent version is 2.5. Flutter maintains a blog on Medium with up-to-date news and technical information for those so inclined.
React Native vs Flutter: similarities
To compare React Native and Flutter, there are three important similarities. First of all, both are free, open-source tools for your development process, and React Native support and Flutter support are similar.
The second is that both make “hot reloading” possible: when a developer makes changes in the code, the changes appear in the app in real time so that the developer doesn’t have to restart the app or the mobile devices it’s running on. You can imagine what this means for reducing development time.
Lastly, the Flutter community and the React Native community are roughly equal in size, which from a practical standpoint means not a great amount of difference in terms of size of the development environment.
React Native vs Flutter: differences
As for differences, I’ve already mentioned a few. Let’s take a closer look to see how they matter.
First, the different languages: for Flutter app development, the Dart programming language is used, while React Native is based on the older JavaScript. StackOverflow keeps tabs on the popularity of languages…
…and we can see that (as of November 2021) Dart gets more respect among developers.
While we’re at it, we can see StackOverflow’s results for development tools.
Here again, the older React Native’s popularity is lower than that of the younger of the two options, Flutter. Both of these metrics are the reverse of the situation as late as May 2021.
This is not to say that developers are wantonly abandoning React Native due to some perceived limitations. Rather, Flutter does some things better, while React Native still has its own advantages. Better still, Facebook does continue to make changes and updates in response to its framework’s limitations.
For one thing, the fact that React Native uses native components means that system updates don’t break apps written with it. If the system update includes the UI components used in your app, the app will likely benefit from the same facelift other apps get.
With Flutter, on the other hand, using a widget means that system UI updates don’t affect the look of your app—for better or worse. Updates to your app’s UI will be at your discretion.
A particularly important difference concerns how React Native executes source code—with bridges. The bridge is essentially an interpreter, translating JavaScript to and from the language used by the device’s system. Flutter doesn’t need to use bridges, as its Dart code gets compiled into native libraries.
These two architecture differences (widgets vs. components, libraries vs. bridges) sometimes gives Flutter a performance advantage. However, Facebook has been hard at work eliminating the bridge architecture to replace it with the JavaScript Interface. This will be the interface working between the JavaScript and the native components that will create the app’s UI, where previously it’s been the native components doing the work as directed by the bridge.
This new architecture is already in use with Meta’s apps, while rollout to developers will come in the near future. This does apparently mean some additional work ahead for developers in terms of migrating existing apps. From that perspective, it may in fact make sense to hold off developing something new in React Native.
One last difference of note: React Native developers are not strictly limited to JavaScript. They may also choose to write in Java or Kotlin (for Android), Objective-C or Swift (for iOS), and C++/WinRT or C# for Windows 11.
React Native vs Flutter: how to choose
To begin with, if what you need is a minimum viable product (MVP), then React Native vs Flutter is not an immediate issue because each will serve you well. Development time is short, not least because of the hot reloading, and the resulting MVP can impress potential investors when shown on multiple platforms.
In the longer term, if your app will have relatively simple functionality and/or the app is not the product, React Native would be the better bet. Event apps, social media, ecommerce, and customer loyalty apps fit into this category: Discord, Pinterest, Instagram, and Walmart fit in these categories, while Bloomberg, Skype, and Tesla also make use of React Native applications.
It is worth noting that React Native is likely going to be easy for a team to learn if it hasn’t already, and if your app already exists as a web app built with React, creating something from scratch with Flutter makes little sense.
On the other hand, if the function of your app is more critical than perfect UI, or there will be complex calculations or animations to run, Flutter is the way to go. Flutter apps tend to be smaller, so choose Flutter if your app needs to be smaller than 4 MB; Flutter is compatible with older versions of iOS than React Native is (iOS 8 vs iOS 10). MyBMW, Google Stadia, CapitalOne, and Square are significant adopters of Flutter; interestingly, Alibaba and eBay use it as well.
Of note is the fact that Reflectly has made the switch away from React Native due to a poor experience trying to get the app to work as desired on Android—they already had an iOS app, but it proved unworkable to make a new Android version create all of the same graphic effects. This isn’t to say that React Native is always worse, but rather that there will be differences. By not creating apps for only one platform to start with, they set up an expectation of a particular UI that turned out to not be optimal—or possible—on the other platform.
Apparently, Google has floated the idea of expanding into desktop support… and the response by the development community has been less than positive and support at this point remains in beta. It may, in the end, be a moot point, because of the recent, quiet release of the Fuchsia operating system, which is optimized for Flutter and, more generally, Dart. As of November 2021, only one device—Google’s Nest Hub—runs on Fuchsia. If your app is intended for similar devices, building in Flutter means no emergency for you or your users should the day come that their device’s entire OS is replaced in a system update.
Final thoughts
If the companies using Flutter vs React Native for cross-platform development are anything to go by, then both would seem to be worthy of your time and effort. The choice is hardly black and white, as some shopping apps were built with Flutter and not React Native. There does seem to be a slight edge for startups to use Flutter, though that is rather more a legacy situation with apps, and reputations, being built before Flutter’s release.
Regardless of your choice, it only makes sense to build for both iOS and Android at the same time in order to create the UI experience desired.
