Flutter vs. React Native vs. Xamarin: Comparing cross-platform mobile development tools
Editor’s note: ArcTouch app developers Oberdan Bitencourt, Matheus Romao, and Mateus Paulino all contributed to this post.
Software development teams are always searching for tools to help them become more efficient — and deliver better experiences for their users. That’s especially true today when it comes to creating apps. As our industry matures, the applications we build are used in more places and on more types of connected devices than ever before.
With that complexity, tools that can help developers build cross-platform experiences — and reuse code, features, and designs — can be incredibly valuable. Cross-platform tools can reduce development costs — and more importantly, time. The more code you can share across platforms, the faster you can bring your app idea to market. And this time and money savings isn’t a one-time thing. In our experience, using cross-platform tools also simplifies support and maintenance, and leads to continuous acceleration of your product roadmap.
Today, there are three leading development tools to consider for cross-platform app projects:
At ArcTouch we have had success with all of them. And if you’re considering which to choose for your cross-platform app project, there is no right or wrong answer. You should ultimately make your decision based on a combination of your company’s existing tech stack, your team’s expertise, and the type of app you want to build.
In this article, we provide a detailed overview of Flutter, React Native, and Xamarin — and a roundup of some of the other lesser-known cross-platform technologies. Most importantly, we explain why developers and engineering leaders would most likely choose one over another.
As a developer or engineering manager, you might choose Flutter because:
- Speed and performance are very important.
- You want to use the newest, most modern development tools and language (Dart).
Flutter pros and cons
- The entire toolset is open source.
- See the results of your changes almost instantaneously with Hot Reload.
- Deliver a high-performance native app experience with up to 60 frames per second animations/video.
- Build UI components with the same features as native apps, but with more options to customize and create new behaviors.
- Easily create animations and apply them to any UI components.
- Get direct access to native code, so you can import libraries and use native APIs.
- Reuse the codebase across mobile, and (soon) the web and IoT.
- Less mature than Xamarin and React Native.
- Not many plugins are available.
- Very few continuous integration tools include direct integration with Flutter.
Previously named “Sky Project,” Flutter is the newest cross-platform app tools — and one of the hottest topics among developers. The reference to the sky is no accident: The idea behind Flutter is a universal framework, not only to build mobile apps but also to reach the web, desktop, and IoT products.
The Flutter project was born inside of Google in 2014, although the first stable version wasn’t released until 2018. That’s because the Flutter team invested a lot of time researching and choosing the right layers to build the technology, as well as making sure that Flutter supported everything required from a modern software framework.
And it was worth the wait. With features like Hot Reload, native-like performance, and custom UI, Flutter has become a huge hit with developers (and designers). Flutter is now the fastest-growing skill among software engineers, according to LinkedIn data. And we recently wrote about how ArcTouch is now using Flutter for commercial app development.
Flutter key benefits
One of the reasons Flutter has risen so quickly among the best cross-platform solutions is because of its performance. Developers can create sophisticated UI designs with rich transitions and animations, without any performance impact.
One of Flutter’s strengths is Dart, a new programming language that offers the best of both worlds:
- An ultrafast code “Hot Reload,” so you can experiment and see the results almost instantaneously.
- A native compiler to optimize your application once it’s ready for production.
An important characteristic of Flutter is that you don’t need to wait for Google to support a new OS feature or wait for a bug fix in middleware — because Flutter doesn’t wrap the native code. Instead, it works alongside the native framework and developers have direct access to all of the native features.
Developers can do nearly everything they would do in a native framework with the bonus of having code-reuse not only for iOS and Android — but also for the web, desktop, and embedded devices. However, integration with desktop and embedded devices is still in development. We wouldn’t recommend using it in production yet.
The Flutter team explicitly chose not to use the default UI components from the native platforms. Instead, the team implemented its own UI, based on a component called Widget. In Flutter, everything is a Widget, and developers can easily build their own UI by putting small blocks together. This helps developers build custom designs, but also follow all the native platform conventions.
Flutter offers an enormous library of ready-made components within the framework, so developers can have the same UI components as they would if they were developing the app within iOS or Android. Even though these look and feel like native components, behind the scenes Flutter is managing everything using the Skia Graphics Library. For example, the default transition between screens is different when the app is running on Android or iOS, without the developer needing to specify the adaptation.
Flutter native APIs and 3rd-party integration
Both native APIs and third-party libraries are handled the same way in Flutter: Developers can import and use them just as they would in the native framework. However, developers need to implement an additional Dart layer to communicate with the native code.
To understand why that’s needed, we need to take a look at the Flutter framework architecture. Flutter was designed with isolated layers that enable the framework to run in any platform with only a native shell, which hosts the Flutter engine and everything around it. Inside of any Flutter project, there’s a small native project, where the Flutter toolkit is loaded and called. That’s also the place where the developer can and should write the native APIs or libraries. However, developers still need to invoke the specific native code from Flutter. To do that, they need to use Platform Channels on both sides, either to call methods in the native code or to share data.
A channel works like a very simple binary messaging system, where developers can send a message from the app to the shells and vice-versa. This communication system is asynchronous and has an optional result answer, where developers can return some data from the code that’s called. Flutter has built-in support for some data structures, but the developer can serialize any data type to binary and recover on the other side, providing a codec or any other encode/decode solution (e.g. Protobuf). The purpose of this system is to allow developers to be in control of what’s happening between the Flutter app and the native shell, easing any custom implementation. However, if the developer wants to speed things up, they can use Plugins, Flutter packages made by Google and the community.
Flutter project architecture
The Flutter team has stated publicly that it’s using BLoC and Provider for its own projects, but the team hasn’t offered an official recommendation. You can find many of the architectures as part of independently managed packages from the community.
The Flutter framework is open-source, and everything is documented and available on the public web. Also, the Flutter website has specific tutorials for developers coming from Android, iOS, web and even other cross-platform solutions. There are cookbooks, code labs, and samples — so developers can learn on the go — and a very active YouTube channel.
Why React Native?
As a developer or engineering manager, you might choose React Native because:
- You are porting an existing web app to iOS and Android.
React Native pros and cons
- Easy to start using it.
- Integrate React Native features with existing native code.
- Market adoption is high.
- Good documentation.
- Easy to debug through Chrome Dev Tools or Safari Dev Tools.
- Apply knowledge and tools from web development to mobile.
- Open source and free to use.
- Relatively immature compared to Xamarin.
- Sometimes difficult to update apps to new versions of React Native.
- Some features still require additional development on native platforms.
React Native background
React Native was born in 2013 during a Facebook hackathon, and in 2015, it became open source. Facebook continues to invest in the React environment — and market adoption is accelerating. Companies such as Instagram, Tesla, Uber, Walmart, and Pinterest have released apps developed with React Native.
React Native key benefits
You can start using React Native with any existing app development project, and it can co-exist smoothly with native iOS and Android development tools and teams. Native developers can be working in the native frameworks, while React developers work on other features for the same app. React’s UI is able to translate any native code and convert it into cross-platform “native UI components.”
In addition to helping developers save time by leveraging code across platforms, React Native also has a wide variety of available components developers can implement, including many created by the open-source community.
React Native UI
If you have ever written HTML+CSS web pages before then you know how to create a UI with React Native. It relies on JSX, a type of HTML syntax that leverages CSS for alignment, colors, and simple animations, and Flexbox to provide a consistent layout on different screen sizes.
Developers just need to create directives, such as:
- Should the content be displayed as a row or a column?
- Should it be spaced evenly or centered?
- Do you need to change the order of some items?
React Native also has a bunch of alternatives for styling and layout — two of the most well-known are Styled Components and Emotion. Like Flutter’s “Hot Reload,” React now offers a Fast Refresh for developers to reload just the component you are working on — rather than reloading the entire app — to see changes right away.
React Native APIs and 3rd-party integration
Before coding a module from scratch, developers should search NPM. It’s likely that you will find the module you want there. The React Native Community also maintains many reliable open-source modules that can be integrated with mobile app development projects without too much effort or updating.
React Native project architecture
React Native documentation
When it comes to documentation, React Native shines. It has an active community that regularly shares information and real use cases on YouTube, Medium, Reddit and more. Also, the React team itself is very committed to keeping the documentation and tutorials current.
Xamarin and Xamarin.Forms
As a developer or engineering manager, you might choose Xamarin because:
- You or your team have extensive Microsoft and C# development experience and/or Microsoft services are at the core of your company’s tech stack.
- It’s the most mature cross-platform development toolset on the market.
- It offers a native app user experience.
Xamarin pros and cons
- Access 100% of the platform APIs.
- Achieve native performance, look, and feel on each platform.
- Share 90%+ of code with the use of .NET.
- The most mature and complete cross-platform tool (8 years old and used by 1.6 million developers around the world).
- Test UI changes right away with XAML Hot Reload.
- Run the same app on Android, iOS, watchOS, macOS, Windows, Tizen, and WebAssembly.
- Leverage many available libraries on NuGet.
- App file sizes larger than apps developed on native platforms.
- Apps with heavy graphics, like games, are not a good fit for Xamarin (although it is possible to make games with Xamarin).
- Cost: Building commercial applications (not open source) with teams larger than five developers requires a paid Visual Studio subscription.
Founded in 2011 by the creators of Mono (an open-source implementation of Microsoft’s .NET Framework), Xamarin is a mature platform to build modern and high-performance apps for iOS, Android and Windows. In 2016, Xamarin was acquired by Microsoft — and the platform became integrated within Visual Studio. Microsoft has since made Xamarin open source, making it an even more popular choice for mobile developers.
Although it’s possible to develop Xamarin apps using F# (a mature, open-source, cross-platform, functional-first programming language) the primary language used to write Xamarin apps is C#. First developed in 2002, C# version 8 was recently released with great new features.
Xamarin key benefits
Xamarin is a great fit for developers that aim to share code, tests and business logic across platforms. Our Xamarin development team has found approximately 90% of the code and business logic can be reused across iOS and Android apps.
The ability to reuse code is surely one of the greatest advantages of using Xamarin, especially if your apps integrate with a .NET backend environment. That includes Azure, which according to Microsoft is now used by more than 95 percent of Fortune 500 companies. If a development environment is largely comprised of Microsoft technologies, with good code separation, developers can share the business logic and make it front-end agnostic. Then they can plug in the logic to any client, including Xamarin apps, ASP.NET Core API, SignalR, and more. There’s no need to reinvent the wheel nor spend time writing the business rules twice just because you can’t share code that’s been written in one language or another.
And of course, if your development team is already steeped with Microsoft expertise and experience with C#, the learning curve won’t be as steep. (Though as our EVP of Engineering Paulo Michels once wrote, your Microsoft developers still need to develop mobile expertise: “There’s no boot camp your Microsoft developers can take that will instantly transform them into Xamarin mobile development superheroes”).
For UI development, Xamarin has robust tools to help developers achieve pixel-perfect apps. XAML separates the UI code from the business rules. Recently, Xamarin released XAML Hot Reload (during Xamarin Developer Summit; read our six takeaways from the event) a long-awaited tool that helps developers complete UI code in less time. Not only that, but Microsoft recently announced that Xamarin Hot Restart is coming soon. These two announcements will allow developers to write and validate UI faster and with more confidence.
Xamarin has some alternatives for styling and layout:
- Xamarin.Forms — Often confused with Xamarin itself, Xamarin.Forms is an open-source cross-platform UI toolkit library that delivers a set of controls that use platform renderers to convert the cross-platform UI elements into native controls. (Related: See this post to help choose between using Xamarin.Forms and Xamarin Native). We’ve also written about how to create beautiful apps with Xamarin.Forms and have used Xamarin.Forms for clients like GUESS, Hawaiian Airlines, and EmployBridge.
- SkiaSharp — SkiaSharp is a port to C# of the Skia Graphics Library, an open-source 2D graphics library managed by Google. Flutter apps use Skia as their graphics engine. The SkiaSharp project is maintained by the Xamarin team and pairs well with Xamarin.Forms. Developers that need to draw 2D vector graphics, bitmaps, or text can make use of SkiaSharp to handle the work.
Xamarin native APIs
With Xamarin, developers have full access to native platform APIs — a huge benefit. For example, developers use platform-specific APIs to enable push notifications, Apple Pay on iOS, and Google Wallet on Android, among many others.
The Xamarin team aims to release a stable version of Xamarin.iOS and Xamarin.Android within 24 hours after any official OS release by Apple or Google — though sometimes those releases take place a few days later.
Xamarin 3rd-party integration
Developers can build integrations with third-party libraries on Xamarin applications in two different ways: using the NuGet package manager, or by creating binding libraries of native iOS/Android packages.
- NuGet — NuGet (pronounced Noo-Get) allows developers to publish their packages for general use on a .NET environment and integrate third-party libraries into applications. According to nuget.org, 180,227 unique packages are available to date. The popular open-source Xamarin Essentials package recently surpassed 1 million downloads.
- Binding libraries — Binding libraries are native Android or iOS libraries that offer access via C# to existing Java or Objective-C libraries. They enable developers to make use of native libraries for Android or iOS that are not available via NuGet since they’re not .NET. Creating native bindings is not trivial and may be time-consuming. We’ve created some binding libraries for Xamarin that took only a few hours to complete, while others took weeks. This process is totally different for Android and iOS — and some limitations may apply.
Xamarin project architecture
As noted above, Xamarin apps are part of the .NET ecosystem and make use of the best practices within the .NET world.
Xamarin applications typically rely on MVVM, an architectural pattern born at Microsoft 14 years ago. The vast majority of Xamarin apps are built with MVVM. Developers don’t need to write the basics to support MVVM, as they are already implemented within .NET. It pairs very well with UI development using XAML. The MVVM pattern has recently been recommended by Google in its guide to app architecture.
Microsoft has always put great care into supporting developers through documentation, tutorials, and videos, and the Xamarin team is no exception. A few years ago they released docs.microsoft.com, a content portal built with responsive design, social share features, themes, and search. All things .NET.
The Xamarin documentation includes information about the SDK, code samples, tutorials and more. It’s packed with content to help developers get the most out of the platform. Developers may also want to check the Xamarin Developers YouTube Channel. Microsoft also offers free Xamarin training on the Microsoft Learn platform.
Other cross-platform mobile development tools
Cordova / PhoneGap — Cordova was designed to become obsolete, according to its own creator. The hope was for it to be available until the web and browsers could catch up with native apps in terms of performance. That hasn’t happened — primarily because of limitations that still exist in browser technology that make it impossible to deliver the same user experience as with native apps. Cordova is a wrapper native app that surfaces native APIs to a web page running in a web view. All Cordova apps are essentially web apps running locally on the device. The Cordova framework is based on PhoneGap (originally from Adobe), which is managed by the Apache Software Foundation.
Corona — Developed by Corona Labs Inc., Corona is most commonly used to develop 2D mobile applications for iOS, Android and Windows. It uses C++ and OpenGL along with Lua to help developers create applications across mobile, web, and connected TV platforms.
Uno – An open source cross-platform graphical user interface that allows WinUI and Universal Windows Platform (UWP) based code to run on iOS, Android, and WebAssembly.
Kotlin/Native — From JetBrains, the creator of the Kotlin programming language for Android, Kotlin/Native allows developers to compile Kotlin code to other native platforms, including iOS. It is an LLVM-based backend for the Kotlin compiler.
Need help with your cross-platform app project?
ArcTouch has been building apps using different cross-platform technologies since the dawn of the App Store. Contact us to learn more about how cross-platform development can help accelerate your product roadmap and save you money.