React Native vs Xamarin: Pros and Cons (2020 Edition)
Tags: reactnative, xamarin
Published: 2020-10-28 12:47:15

<h2><strong>Introduction</strong></h2>

<p>We make decisions every day. Most of them are insignificant like what to wear to the office, but some of them can make an actual difference (<a rel="noreferrer noopener" target="_blank" href="https://pagepro.co/blog/10-questions-to-ask-a-react-consultancy-agency/">like choosing the right React development agency</a>). The thing is that the number of possibilities is growing exponentially so making any decision becomes more and more difficult, let alone making the right one. And that's one of the reasons behind our blog – to make your life at least a little easier.</p>

<p>Today, we will talk about choosing the right framework for your cross-platform mobile application. This time, the choice is limited to React Native and Xamarin.</p>

<h2><strong>What is cross-platform mobile development?</strong></h2>

<p>Cross-platform development is an approach to build one mobile application for different operating systems, especially focusing on Android and iOS. This is opposed to native development which means building separate applications instead of just one.</p>

<h2><strong>Advantages of cross-platform apps</strong></h2>

<ul><li><strong>They work on every device</strong> – you don't have to build separate applications for Android and iOS. Instead, you can hire one developer who will build you one application working on every device.</li><li><strong>Cost-effectiveness</strong> – as mentioned above, you will have to build one application instead of two, which means saving money. Also, fixing and improving the code of one application is cheaper.</li><li><strong>Shortened time to market</strong> – building two separate applications at the same time is highly time-consuming. Choosing a cross-platform application means getting MVP ready faster and a possibility to get the first clients as quick as possible. Or at least an honest feedback from them.</li><li><strong>Broader audience</strong> – cross-platform development allows you for reaching all users, regardless of the operating system they use, with a single app.</li></ul>

<h3><strong>Cross-platform development vs native development</strong></h3>

<p>We already wrote a piece about this fight between cross-platform development and native development — you can read it <a href="https://pagepro.co/blog/cross-platform-apps-vs-native-apps/" target="_blank" rel="noreferrer noopener">here</a>.</p>

<h2><strong>What frameworks are out there?</strong></h2>

<p>Let's say that you decided to go with the cross-platform app. The next step would be to choose a proper framework to build one; a framework that will suit your needs. Among the most popular frameworks are:</p>

<ul><li><a href="https://cordova.apache.org/" target="_blank" rel="noreferrer noopener nofollow">Cordova</a></li><li><a href="https://flutter.dev/" target="_blank" rel="noreferrer noopener nofollow">Flutter</a></li><li><a href="https://ionicframework.com/" target="_blank" rel="noreferrer noopener nofollow">Ionic</a></li><li><a href="https://nativescript.org/" target="_blank" rel="noreferrer noopener nofollow">NativeScript</a></li><li><a href="https://pagepro.co/react-native-development.html" target="_blank" rel="noreferrer noopener">React Native</a></li><li><a href="https://dotnet.microsoft.com/apps/xamarin" target="_blank" rel="noreferrer noopener nofollow">Xamarin</a></li></ul>

<p>Since our first choice is React Native, we have been comparing it to other frameworks to help you make an informed decision. Until now, we compared <a href="https://pagepro.co/blog/react-native-vs-ionic-and-cordova-comparison/" target="_blank" rel="noreferrer noopener">React Native with Cordova and Ionic</a> and <a href="https://pagepro.co/blog/react-native-vs-flutter-which-is-better-for-cross-platform-app/" target="_blank" rel="noreferrer noopener">React Native with Flutter</a>.</p>

<p>And now it's time to present a comparison between React Native and Xamarin.</p>

<h2><strong>What is React Native?</strong></h2>

<figure class="wp-block-image size-large is-resized"><img src="https://pagepro.co/blog/wp-content/uploads/2020/08/react-native-40f97c1acb-1024x920.png" alt="" class="wp-image-4177" width="128" height="115"/></figure>

<p>React Native, as same as React.js, is a product of Facebook. It's an open-source framework based on JavaScript and JSX that you can use to build native mobile applications for both Android and iOS.</p>

<p>If you want to learn more about React Native, read our <a href="https://pagepro.co/blog/react-native-guide-2020-top-mobile-framework/">React Native Guide</a>.</p>

<h2><strong>What is Xamarin?</strong></h2>

<figure class="wp-block-image size-large is-resized"><img src="https://pagepro.co/blog/wp-content/uploads/2020/08/logo-xamarin-1024x277.png" alt="" class="wp-image-4178" width="256" height="69"/></figure>

<p>Microsoft created Xamarin, an open-source app platform, to help .NET developers with building modern and performant applications for Android, iOS and Windows. Xamarin is responsible for managing communication between shared code and platform code.&nbsp;</p>

<p>Thanks to Xamarin, developers can share more or less 90% of their application across all major platforms. Such a possibility means that programmers can write all of their business logic using one language while achieving native-like feeling on each platform.</p>

<p>Developers can use either PC or Mac to write Xamarin applications and compile them into native application packages (<strong>.apk</strong> for Android and <strong>.jpa</strong> for iOS).</p>

<h3><strong>Companies using Xamarin</strong></h3>

<ul><li>Academy of Motion Picture Arts and Science</li><li>American Cancer Society</li><li>Azure</li><li>BBC Good Food</li><li>JustGiving</li><li>Microsoft News</li><li>UPS</li></ul>

<h2><strong>React Native vs Xamarin: Head-to-head Comparison</strong></h2>

<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td></td><td><strong>React Native</strong></td><td><strong>Xamarin</strong></td></tr><tr><td><strong>Programming language</strong></td><td>JavaScript</td><td>.NET with C#</td></tr><tr><td><strong>Created by</strong></td><td>Facebook</td><td>Microsoft</td></tr><tr><td><strong>Supported platforms</strong></td><td>Android, iOS, Web Apps</td><td>Android, iOS, UWP, PWF, MacOS</td></tr><tr><td><strong>Hot Reload</strong></td><td>Yes</td><td>No</td></tr><tr><td><strong>Release date</strong></td><td>2015</td><td>2013</td></tr></tbody></table></figure>

<h2><strong>Pros and Cons of React Native</strong></h2>

<figure class="wp-block-table is-style-regular"><table><tbody><tr><td><strong>Pros</strong></td><td><strong>Cons</strong></td></tr><tr><td>Access to native features and functionalities like accelerometer or camera</td><td>Abandoned libraries and packages</td></tr><tr><td>Easy to learn</td><td>Frequent updates are a pain in the ass</td></tr><tr><td>Faster development process thanks to pre-installed elements</td><td>Inability to perform on multiple screens</td></tr><tr><td>High-quality, native-like UI</td><td>React Native struggles with complex animations and transitions</td></tr><tr><td>Hot Reload</td><td>Navigation is nothing like a native one</td></tr><tr><td>Large and supportive community</td><td>React Native doesn’t ensure security for third-party plugins</td></tr><tr><td>Live inspection of components</td><td></td></tr><tr><td>Open-source and free</td><td></td></tr></tbody></table></figure>

<h2><strong>Pros and Cons of Xamarin</strong></h2>

<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td><strong>Pros</strong></td><td><strong>Cons</strong></td></tr><tr><td>Full hardware support (i.e. camera, GPS)</td><td>Familiarity with platform-specific code might be needed</td></tr><tr><td>Compatibility with MVC and MVVM architectures</td><td>Minimal community support</td></tr><tr><td>Complete development ecosystem (C#, .NET and Visual Studio)</td><td>Not a great choice for apps with complex UI</td></tr><tr><td>Open-source and free</td><td>The large size of the application</td></tr><tr><td>Simplified maintenance</td><td>UI development is time-consuming and not mobile-friendly</td></tr><tr><td>The Xamarin Component Store which provides a lot of components</td><td></td></tr></tbody></table></figure>

<h2><strong>React Native vs Xamarin: Development environment</strong></h2>

<h3><strong>React Native</strong></h3>

<p>Developers can use a text editor and IDE (integrated development environment) of their choice and among them are Atom, Sublime Text, Visual Studio Code. Additionally, they can use the Live Reloading feature to see changes in real-time.</p>

<h3><strong>Xamarin</strong></h3>

<p>Xamarin, on the other hand, is more developer-friendly. As a developer, you can write code for an iPhone app on Windows and compile it for Mac. Two development environments make the whole process easier in Xamarin than it is in React Native – Visual Studio and Apple’s XCode.</p>

<p>Visual Studio simplifies building mobile, desktop and web applications.</p>

<p>XCode is an IDE used to design applications for Apple TV, Apple Watch, iPad, iPhone and Mac.</p>

<p><strong>Winner</strong>: Xamarin</p>

<h2><strong>React Native vs Xamarin: Code compilation</strong></h2>

<h3><strong>React Native</strong></h3>

<p>Just-in-time (JIT) compilation is available for Android but not for iOS since Apple prohibits executing dynamically generated code on its devices.&nbsp;</p>

<h3><strong>Xamarin</strong></h3>

<p>Because, as mentioned above, JIT compilation isn’t available for iOS, Xamarin has an even better alternative called AOT (Ahead-of-time) compilation. If code compilation were the only factor when deciding which framework to choose, both Android and iOS developers would choose Xamarin.</p>

<p><strong>Winner</strong>: Xamarin</p>

<h2><strong>React Native vs Xamarin: Cost</strong></h2>

<h3><strong>React Native</strong></h3>

<p>React Native is an open-source project so everyone, including developers and companies, can use it freely without any cost.</p>

<h3><strong>Xamarin</strong></h3>

<p>Although Xamarin itself is also an open-source and free platform, enterprise users need to pay to use the Visual Studio.</p>

<p><strong>Winner</strong>: React Native</p>

<h2><strong>React Native vs Xamarin: Performance</strong></h2>

<h3><strong>React Native</strong></h3>

<p>Three main factors are taken into consideration during a performance measurement: GUI, 64-bit support and fast code execution. React Native doesn’t offer support for 64-bit mode on Android, and it also shows the worst result while running the fastest code on iOS.&nbsp;</p>

<h3><strong>Xamarin</strong></h3>

<p>The framework from Microsoft fully supports 64-mode and allows for using native tools directly and thus provides the fastest user interface. Xamarin developers can run the fastest code on both Android and iOS platforms.&nbsp;</p>

<p><strong>Winner</strong>: Xamarin</p>

<h2><strong>React Native vs Xamarin: Popularity</strong></h2>

<p>It’s always great to check the popularity of particular technologies to make sure there is enough interest from developers and other technical (and non-technical) people. And is there any better metric for this task than checking online search trends?</p>

<p>Here is the screen from Google Trends:</p>

<figure class="wp-block-image"><img src="https://lh6.googleusercontent.com/SCBNGGq1u4oJtGLQ5k8CNdo6ok4m1kwvXDX97x0OE_25ZECZxVdLEyeJJRso_VzOhqZPt5Lmh9ypLmrXHLo4Y6zOTKCZnMl-C63nlLqHfbx3p9T5g-e8Y0K0SUFbgvSd3n4E9eDi" alt="React Native vs Xamarin comparison: Google Trends screenshot"/><figcaption>Source: Google Trends</figcaption></figure>

<p>React Native is much more popular than Xamarin so we can expect that there will be more developers using it in the future and consequently, more support.</p>

<p><strong>Winner</strong>: React Native</p>

<h2><strong>React Native vs Xamarin: Support</strong></h2>

<p>While Xamarin is two years younger than React Native, it doesn’t make any difference when it comes to the support from the developer community. It’s even on the contrary – React Native is much more popular and has significantly better support. But don’t take my word for it – check stats from GitHub.</p>

<table><tbody><tr><td class="has-text-align-left" data-align="left"><strong>React Native</strong></td><td class="has-text-align-left" data-align="left"><strong>Xamarin</strong></td></tr><tr><td class="has-text-align-left" data-align="left"><img src="https://lh6.googleusercontent.com/vtyfmu08UVmByIDpsl8qtX5FvtypBKkXw9edDVnEWFZ6_wPS8FraglcVS3nht8J-0DTVkDY5KV6om66JW8-iigRGrtMaXDN6s_iYC2pPTUlp-2mr5-v4Lar8gOu4viGuZKYxm4Xv" width="298" height="479"></td><td class="has-text-align-left" data-align="left"><img src="https://lh3.googleusercontent.com/y15T8l__E0T9xStJVpxX9yigQqWeeGtTVVVOyMinv6tkCwe8bf3aW0D7nlOIdcHMkgbU02RiKpaEhvj1trdYKM8_uVscSuCV9s9s0yty-HdCfBs_GGKpB_WtUIrxDVTo6u7DV3xA" width="298" height="486"></td></tr></tbody></table><figcaption>Source: github.com</figcaption>

<p><strong>Winner</strong>: React Native</p>