Xamarin Forms vs. React Native

This article compares the cross-platform toolkits Xamarin Forms and React Native. Both toolkits focus on developing Apps for mobile devices. The advantage by using such a toolkit is that a big part of the App code can be shared between different target platforms (e.g. iOS, Android). This reduces the effort for developing, testing and maintaining Apps which support multiple platforms.

Considered target platforms

• iOS: Phones and Tablets
• Android: Phones and Tablets
• Windows: Tablets, Convertibles, Notebooks and PCs

Xamarin: Overview

• Xamarin (Native)
  • Introduced in: iOS 2009; Android 2011
  • Provides compilers and libraries which allows to use .NET / C# for developing iOS and Android Apps.
  • Managed wrappers allow accessing the operating system API via .NET.
  • The UI code uses the native UI stack of each platform.
  • As a result, the UI code and platform specific code has to be developed for each platform separately. The advantage is that the whole platform capabilities can be used - no limitation to a least common feature set provided by all supported platforms.
• Xamarin Forms
  • Cross-platform UI toolkit: Run same UI code on multiple platforms.
  • Works on top of Xamarin (Native)

Xamarin Forms and Xamarin (Native) can be mixed. This way it is possible to use Xamarin Forms for common developing tasks (better code sharing) and to use Xamarin (Native) when platform specific UI controls or features are required.

React Native: Overview

• Develop mobile Apps with JavaScript code and the React paradigm.
• It renders the UI with native controls instead of generating HTML content and showing it in a Web View.
• Provides components for
  • Platform agnostic user interface controls
  • Platform specific: Commonly used iOS and Android APIs

The word Native stands for rendering with native UI controls. React Native does not compile to native code.

Comparison: Overview

Topic	Xamarin Forms	React Native
Introduced in	2014	2015
Open Source	Yes (MIT License)	Yes (MIT License)
Backed by	Microsoft	Facebook
Supported targets	iOS, Android, Windows (UWP)	iOS, Android
Additional targets*		Windows (UWP) by Microsoft
Language	C#, XAML	JavaScript, JSX
Runtime*	iOS: Native code (AOT) Android: .NET JIT UWP: Native code (AOT)	iOS: JavaScriptCore (no JIT possible) Android: JavaScriptCore UWP: Chakra JS Engine

Notes

• Additional targets: Both cross-platform toolkits provide more supported target platforms mostly driven by community projects. This evaluation concentrates on iOS, Android and Windows as target.
• Runtime: The listed runtimes are the default ones. Both toolkits provide other options as well. Keep care that some of them are not stable yet.
  • Xamarin Android: AOT compiler
  • React Native Android: Hermes - optimized JavaScript engine with optional AOT.

Comparison: Access platform specific features

Cross-platform toolkits support the most common scenarios for mobile Apps. Further features can be accessed by using 3rd party libraries (e.g. Utilize the camera to take pictures and videos). There are scenarios which are not covered by ready-to-use libraries. Then it is necessary to write own platform specific code. How this looks like is shown with the following comparison table:

Topic	Xamarin Forms	React Native
Language	C#	Cross: JavaScript iOS: Objective-C or Swift Android: Java or Kotlin UWP: C++ or C#
IDE*	Visual Studio	Cross: Visual Studio Code iOS: Xcode (Mac) Android: Android Studio UWP: Visual Studio
Developer OS*	Windows	MacOS Windows
Toolchain	Integrated toolchain in Visual Studio	Multiple tools needed
Debugging	Integrated debugger in Visual Studio for all platforms	UI: React Developer tools iOS: Safari Developer tools iOS: Xcode (Mac) Android: Chrome Developer tools Android: Android Studio UWP: Visual Studio

Notes

• IDE: With Xamarin Forms the developer can do all work in Visual Studio on Windows. For iOS development a running Mac with installed Visual Studio for MAC must be connected with Visual Studio on Windows.
• Developer OS: With React Native a developer who has to maintain all 3 operating systems has to work on a Mac and on Windows.

React Native: Re-architecture in progress

In 2018 Facebook announced:

We're working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps.
... existing React Native apps will continue to work with few or no changes.

Until now no release date is announced for the massive refactoring of React Native. Unfortunately, there is no good information about keeping or breaking compatibility with existing apps. It will definitely affect all written Native Modules and Native UI Components.

More information can be found at this GitHub discussion: React Native Fabric (UI-Layer Re-architecture)

Acronyms

• AOT - Ahead Of Time (compiler)
• IDE - Integrated Development Environment
• JIT - Just In Time (compiler)
• UI - User Interface
• UWP - Universal Windows Platform (App)