Custom Software Apps & SharePoint Consulting

React Native vs. Xamarin in 2021

We’ve recently been developing a mobile app using Xamarin, a departure from our usual stack of React Native for mobile apps. Both frameworks allow for cross-platform development. This means that we can write the code once, and have it work on both iOS and Android. Normally, these two operating systems use two completely different programming languages and completely different APIs to access them. So cross-platform development saves us a lot of time. Unlike Xamarin, React Native does require us to write native code for maybe 10% of the project, but there are still some aspects of React Native that I miss when working with Xamarin.

About Xamarin

Xamarin has its roots in a project that was meant to make it possible to code in Microsoft’s C# language on platforms other than Windows. It has since expanded to not only include iOS and Android in the list of platforms it supports, but to provide full wrapper functions to the entire API of both platforms. This means that, with very few tweaks, one codebase can easily compile and run on both operating systems. The team behind Xamarin did such a good job that Microsoft took notice and purchased the company.

About React Native

React is a web framework created by Facebook that allows them to create more complex user interfaces than previous technologies had. Combined with JavaScript, it can be used as a complete web application development toolset. Some developers created apps for mobile devices using React by simply embedding their web app into a webview in the native app. This isn’t an ideal solution because there is no convenient way for the web app to talk to native code.

React Native is the solution to that problem. To developers, the framework still functions exactly like good ‘ole web-based React does. They write the same code, using the same languages. The difference is that React Native then converts that CSS and JavaScript code into the native code of the targeted mobile platform. While it doesn’t have quite the same completeness that Xamarin does in terms of how much of the native API it supports, React Native still gets your project most of the way onto both mobile platforms with just one set of code.

React Native Features I Miss

React Native coming from React, which is a web development framework, has a different mindset to it than Xamarin does. Some of the results of this mindset are features that I really miss having available to me as we work with Xamarin. I wanted to spend some time explaining the features of React that I’d rather I didn’t currently have to do without.

Hot Reloading

React Native uses JavaScript, which is an interpreted language. Not having to compile the code already saves a ton of time, but React Native takes it a step further with hot reloading. The code on your device (or simulator, if you are not running on a physical device) can detect when you want to send it changes. This means that you can update your test build not only without compiling, but without having to reinstall the files on the device at all.

This saves me a ton of time. It’s especially useful when you are trying to dial in some variable just right because in instances like that, where there is a lot of rapid-fire iteration, even a few seconds of extra compile and install time can add up fast. This is especially true when working on a physical device because the process of updating a test app is much more involved with other frameworks.

Components Components Components

The two frameworks, though they share the goal of being cross-platform, go about that goal in different ways. Xamarin was created from the perspective of coding and API compatibility. React was designed, from its early days, to be an easy to use UI toolkit. Creating small reusable components is at the heart of React – and so the same is true in React-Native. Xamarin simply does not have the same flexibility for creating customized controls because its primary purpose is as a wrapper around existing controls.

Composition is king in React-land. Higher-order-components are a great example of this. HOCs allow us to write separate components that share similar functionality without reducing code. They do for UI design what object-oriented programming did for coding. React’s composability combined with JavaScript’s dynamic nature is a great landscape for building UIs over the XAML and C# used by Xamarin.

Over-The-Air (OTA) Updates

I’ve already talked about how much time the hot loading feature saves by not requiring you to push an update to the device in the traditional way. Hot loading can save minutes on iteration time. But React Native really saves time with its Over-the-Air update features. This allows us to push an update to our actual users over the air, without having to go through the approval process of the app stores. This feature saves days off of the time it takes to get an update in the hands of users.

In the case of bug fixes, knowing that our customers are taken care of as soon as possible is a huge relieve. It is always a bit stressful waiting for Apple to review an update, but its that much more stressful when the update is important and you want to get it out as soon as possible. OTA updates from React Native save developers who use it from a ton of stress.

The Community

React and React Native are hugely popular tools. The Github stats for a given project aren’t inherently impressive, but having a lot of users does often come with some benefits. It is never very difficult to find tutorials for something that you want to do in React. The large community also means that if you run into a problem then someone less likely has as well and will be able to explain how they resolved it.

The other advantage of a large community is that you are not constantly needing to re-invent the wheel. React Native has a plethora of third-party add-ons that we can drop into our project and streamline development without the need to code that functionality ourselves. The time, and sanity, saving benefits of being able to skip the tedious parts cannot be overstated.

About Entrance Consulting

Entrance is a full-service software consulting firm. If you would like to build a mobile app that will run on both Android and iOS, and you want to make sure that you hire a team with the experience to deliver the best product possible, please fill out the contact form on this page. One of our experts will get in touch with you right away to discuss the requirements of your project.

Share this post with your friends

Share on facebook
Share on reddit
Share on twitter
Share on linkedin
Skip to content