Grokking React Native
Vote

0% completed

​

React Native vs. Other Frameworks

React Native and Native Development

React Native and Hybrid Frameworks

React Native and Flutter

React Native and Xamarin

Comparing the Options

Suppose your application needs a Save button. Which program creates that button on the phone: the operating system, a browser engine, or a graphics engine that ships with your application? The answer is the main difference between mobile frameworks, and most of their other strengths and costs follow from it.

Mobile development falls into three broad categories. Native development means writing a separate application for each platform with that platform's own tools. Hybrid development means building a web application and running it inside a WebView. A WebView is a browser component embedded in a native application. Cross-platform development means writing one codebase that runs on both platforms without displaying a web page.

The rest of this lesson follows the Save button through each one.

The same Save button takes a different path to the screen in native, hybrid, React Native, and Flutter applications.
The same Save button takes a different path to the screen in native, hybrid, React Native, and Flutter applications.

React Native and Native Development

In a native application, you write the Save button twice: once in Swift for iOS and once in Kotlin for Android. You get every platform feature as soon as the operating system offers it. The cost is two codebases, so every feature is written, tested, and fixed twice.

In React Native, you write the button once in JavaScript, and React Native creates native views for it on both platforms. The cost is less direct access. Your logic runs in a JavaScript engine, and a new platform feature may need a library or some native code of your own. For an application that depends on advanced graphics or unusual hardware access, native development may still be the better choice.

React Native and Hybrid Frameworks

In a hybrid application built with Cordova, or with Ionic and its Capacitor runtime, the Save button is an HTML element styled with CSS. The whole interface can be a web page running inside a WebView. This approach is quick for a web team, because the same skills apply. It suits simple applications well.

The cost appears in animations and touch handling, where a web page inside a WebView can feel less smooth and less natural. React Native does not use a WebView for its interface. The Save button is made of native views, so it responds to touch through the platform's own view system.

React Native and Flutter

Flutter, from Google, is the closest competitor to React Native. Both produce applications for iOS and Android from one codebase, and the main difference is who draws the button. Flutter does not use the operating system's controls. It has its own implementation of each control, written in the Dart language, and it paints them with its own graphics engine, named Impeller.

Flutter's approach makes the interface look the same across devices and gives you detailed control over every pixel. The cost is that its controls are reproductions of the system's controls, so they can differ in small ways from what the platform provides. You must also learn Dart. React Native uses the platform's views, so its controls follow each platform more closely, and it is the natural choice for a team that already knows JavaScript or React.

React Native and Xamarin

You will still meet Xamarin in older articles and existing projects, but Microsoft has ended support for it. Its successor for shared interfaces is .NET MAUI, which is the evolution of Xamarin.Forms. With .NET MAUI, you write the Save button in C# and can define the interface in XAML, and the framework works directly with the native platform APIs. The C# code is compiled ahead of time to native code on iOS and compiled just in time when the application launches on Android.

.NET MAUI suits teams that already work in C# and the Microsoft ecosystem. React Native benefits from the wider use of JavaScript and from its large set of third-party libraries. A JavaScript team will find it easier to adopt.

Comparing the Options

ApproachLanguageWhat creates the buttonCodebasesA good fit when
NativeSwift, KotlinThe operating systemTwoYou need every platform feature or the highest graphics performance
Hybrid (Ionic, Cordova)HTML, CSS, JavaScriptA WebViewOneThe application is simple and your team builds websites
React NativeJavaScriptThe operating system, driven by React NativeOneYou want native views and your team knows JavaScript or React
FlutterDartFlutter's own graphics engineOneYou want the same custom look everywhere and can learn Dart
.NET MAUI (formerly Xamarin.Forms)C#The .NET MAUI controls, using native platform APIsOneYour team already works in C# and .NET

The right choice depends on what your team already knows and on what the application must do. If you want real native views and a widely used language, without building the application twice, React Native gives you both.

Reading Progress

0%


Vote for new content

On This Page

React Native and Native Development

React Native and Hybrid Frameworks

React Native and Flutter

React Native and Xamarin

Comparing the Options