Skip to content

Xamarin Forms vs. React Native

Jump to bottom
jbe2277 edited this page Oct 15, 2019 · 6 revisions

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)
Clone this wiki locally