0% completed
React Native vs. Other Frameworks
On This Page
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.
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
| Approach | Language | What creates the button | Codebases | A good fit when |
|---|---|---|---|---|
| Native | Swift, Kotlin | The operating system | Two | You need every platform feature or the highest graphics performance |
| Hybrid (Ionic, Cordova) | HTML, CSS, JavaScript | A WebView | One | The application is simple and your team builds websites |
| React Native | JavaScript | The operating system, driven by React Native | One | You want native views and your team knows JavaScript or React |
| Flutter | Dart | Flutter's own graphics engine | One | You want the same custom look everywhere and can learn Dart |
| .NET MAUI (formerly Xamarin.Forms) | C# | The .NET MAUI controls, using native platform APIs | One | Your 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%
On This Page
React Native and Native Development
React Native and Hybrid Frameworks
React Native and Flutter
React Native and Xamarin
Comparing the Options