Cross-Platform Mobile Toolkits

Most developers agree that Flutter, React Native, Xamarin are the top three cross-platform mobile toolkits. If you’re just getting started on a project, it’s helpful to have your options narrowed down to this list of three, but there are still some major differences between these toolkits. To help you choose the best toolkit for your project, I’ve laid out some questions to ask yourself, the pros and cons of each toolkit, and our go-to resources for cross-platform development.

Questions to Ask Before You Build

Should I be using a cross-platform solution to begin with?

Before you get started, make sure cross-platform is actually the best solution for your use case. Cross-platform solutions certainly ease and accelerate mobile application development, but they come with a set of trade-offs. Here are some scenarios to consider before moving forward with a cross-platform solution.

You might not want to use cross-platform if…

• You want or need a rich experience (e.g. Netflix).
• You have high performance demands that make a tailored solution for each platform more appropriate.
• You think your app may eventually need something that cross-platform solutions can’t deliver (or the cost to do so is high). These scenarios typically play out with larger companies (e.g. AirBnB).

Once you’re sure cross-platform is the best approach for your use case, use the following questions to help guide your toolkit selection.

What ecosystem do I already support products in? What else around the app do I need to build or talk to?

It’s important to make sure that you can set up the environment to support what you’re going to build.

What language will work best for me?

The language you choose should:

• Be well suited to solve the problem. Most general-purpose languages will satisfy this requirement.
• Be a language your developers are already comfortable with or can learn relatively quickly (for example, a new language but similar to one they already know).

As a reminder, the languages for our three toolkits map as follows:

• Reactive Native: JavaScript
• Flutter: Dart
• Xamarin: C# / Object Oriented language

How much custom styling do I need to do? Do I need custom widgets and controls?

While you can create custom widgets with any of the toolkits, React Native and Flutter make writing custom reusable widgets much easier than Xamarin.

React Native has a huge ecosystem and it’s much easier to find a third-party solution to meet your needs (and many of them open-source). Flutter comes stocked with a great widget library and doesn’t rely on any platform-specific solutions. It also has first-class support for creating new widgets (everything in Flutter is a widget).

Creating custom UI solutions can be a bit more cumbersome in Xamarin Forms. Its widget library feels lackluster compared to its competitors, and many times third-party solutions are not available. You’re likely to spend a lot more time developing custom solutions in Xamarin.Forms, sometimes unique across each platform you are targeting, than you would in React Native or Flutter.

Do I have rich interactions?

Consider animations, user interaction, and flows you’ll need in your product.

How much community and tool support is available?

Will you want to reference documentation and use open-source tools?

What platforms am I targeting?

Are you targeting iOS, Android, Windows Phone, other platforms?

Once you’ve answered these questions and given yourself some context, consider the pros and cons of each toolkit.

Xamarin

Pros

• Performance: Xamarin is known for its native-like performance.
• Language and Platform Support: Xamarin apps are developed primarily in C# (optionally F#). These are expressive, multi-paradigm languages and are great for application development. Even better, the .NET platform provides support for multiple platforms allowing developers to better target different hardware/devices.
• Familiarity: Xamarin.Forms provides a similar experience to developing applications in Windows Presentation Foundation (WPF). If your developers are familiar with WPF and the Model-View-Controller and Model-View-ViewModel architecture, they’ll feel right at home in Xamarin.Forms.
• Developer Experience: .NET brings an amazing set of tools to the table, providing a first-class development experience.

Cons

• Asset Management: Xamarin requires more steps to manage assets than React and Flutter do.
• Debugging: Problems with the UI logic in Xamarin can be difficult to hunt down. For example, problems rooted in binding issues or trying to determine why a view is/isn’t rendering when expected can be challenging items to debug.
• Custom Styling: It can be hard to find 3rd party controls for Xamarin. You tend to have to write a lot more yourself than you’d have to write in React or Flutter.
• UI Development: Custom UI development can be cumbersome and time-consuming in Xamarin.
• Large App Size: Xamarin apps tend to be larger than native apps.
• Limited Community Support: The Xamarin community seems to be much smaller and less active than React Native and Flutter’s communities. If you need a feature/component that doesn’t have formal toolkit support, you’ll probably have to write it yourself because open-source alternatives are usually not available.
• Requires Visual Studio: Unlike the other mobile toolkits, Xamarin development can only be done using Visual Studio.

Use Xamarin if…

• You want a native-like development experience. C# is syntactically similar to the native development languages and should provide similar and capable features.
• You want to leverage existing .NET solutions.
• Your application screens can be composed of standard widgets.
• You need to target a large number of platforms. The .NET platform can target many different hardware platforms, making it a great option when you need to deploy across multiple targets beyond the popular iOS and Android options.

ReactNative

Pros

• Language and Platform Support: the React Native community is large and offers lots of support, such as tools and documentation.
• Familiarity: Writing primarily in JavaScript allows developers to be extremely productive right away, especially if they come from a web background or have experience with React.
• UI Widgets: React Native comes with a large set of high-quality UI widgets that are relatively easy to use.

Cons

• Error Detection: React Native is usually written in JavaScript, and because it’s a dynamic language, a certain class of errors have to be detected at run-time instead of the compile-time guarantees you get from statically-compiled languages.
• Code Maintenance: Another challenge with using a dynamic language like JavaScript is that you lose some of the features and safeties of strongly-typed languages. This makes tasks like large refactors, or simply keeping track of the structures passed throughout your code base, harder to do. As your code base grows, this problem is exacerbated. On the bright side, there are tools available that can help ease these pains.
• Declaring UI: You embed your UI directly in JavaScript. The downside is that JSX is not native to JavaScript, so it has to be converted. This happens under the hood, but can sometimes go wrong.
• Performance: React Native applications have to interact with a JavaScript bridge, resulting in slower performance.

Use ReactNative if…

• You want to leverage other JavaScript solutions from the community.
• You want to do rapid prototyping or produce something quickly. ReactNative’s ease of use allows you to quickly produce a prototype or basic product.

Flutter

Pros

• UI Development: Flutter’s UI and widgets are great and easy to customize. Many of the widgets are made by Google, so they’re first-in-class.
• Performance: Flutter compiles down to Dart and C/C++, so it’s extremely fast.
• Portability: Flutter is more like a complete software development kit than just a framework, so it can run on almost any device.
• Hot Reloading: Flutter allows you to keep your app running and inject new versions of the files that you edited at runtime. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI.
• Reactive Programming Model: Flutter applications encourage a reactive programming model (also known as observables). This model maps very well to UIs where user interaction generates a stream of events (i.e. button presses, text changing, etc.). These events can be combined in interesting ways to produce new streams. Observers (e.g. state management or business logic) consume these streams and update the state accordingly. The UI logic subscribes/observes these state changes and updates the presentation accordingly.

Cons

• Persistence: As the new kid on the block, Flutter’s ecosystem isn’t as rich as some of its competitors’. This means community-supported solutions for problems already solved on other platforms (such as support for MongoDB), are not readily available.
• Observable Pattern: Flutter’s observable pattern is little different than most people are used to, but they provide a great way to separate business logic (BLOC) from widget logic out of the box. This allows you to tweak the UI or business logic without having to change the other.
• Large App Size: Flutter apps tend to be larger than native apps.

Use Flutter if…

• You want to capitalize on the rich widget set that Google provides.
• A reactive design maps well to your application.
• You need near-native performance but still favor a cross-platform solution.

If I had to pick one toolkit…

Ultimately, all of these toolkits are capable of producing any mobile application you want to build, some are just easier to use and better suited for specific uses. If I had to pick one toolkit, though, I’d recommend React Native. React Native tends to be easiest to adopt and has a rich ecosystem to help developers who are new to mobile development.

The developer side of me prefers Flutter because of its great architecture, great tooling, and fast performance. However, it does require getting used to some new paradigms.

Additional Resources

Good news: all of these toolkits have great documentation. You can find documentation, explanations, and examples for using Xamarin.Forms on Microsoft’s website. You’ll find resources on Flutter here and resources on React Native here.

I always start with documentation, and if I can’t find what we need there, I turn to Google, Medium articles, and occasionally Stack Overflow.

You Might Also Like

• Is Your Xamarin.Forms Project Ready For Migration To MAUI?
• What I Wish Someone Had Told Me About Integration Testing in Flutter
• 3 Reasons to Use Storybook for Your React Native Project