Tools like PhoneGap (Apache Cordova), Xamarin and React Native have been revolutionizing the mobile development industry for a few years now.
The main advantages of using such a framework are:
For tools like PhoneGap (Apache Cordova) and React Native there are additional advantages:
React Native was announced in February 2015 and open-sourced one month later. Four years have passed since and a lot has changed. React Native is being increasingly more used, and it does not look like it is going anywhere anytime soon.
Both Facebook and Microsoft are using it in production apps (Facebook, Instagram and Skype to name a few). Microsoft is even going as far as building support and tooling for building and running React Native apps on Windows.
But that is not all there is to cross-platform development. React Native is not the only solution on the market and — frankly — has never been. As cross-platform frameworks come and go, here comes the relatively new kid on the block: Flutter.
Flutter is a cross-platform development framework by Google written in Dart and initially released in May 2017. Google is heavily invested in its development as it may be an important part of their strategy in the years to come, and it shows.
In December that same year, Google announced the stable 1.0 release of Flutter (something Facebook still has not managed to do with React Native).
Flutter’s development is completely open-source while the React Native team sometimes develop new features behind closed doors.
Both React Native and Flutter have their up- and downsides, which I am going to discuss here. If you are looking for a reason to choose one over the other, you may find it here, but do know that it is still perfectly fine to build a production app in either of them.
Where React Native renders the native components of your device’s operating system (e.g. a checkbox), Flutter does not (at least, not by default). Flutter works more like modern game engines — it renders the whole screen by itself on every platform.
Because of this, Flutter is more predictable than React Native in terms of rendering on different platforms. But it also comes at a cost, Flutter has to copy the look and feel of every user interface component for a platform for apps to feel native. Flutter’s developers have done a great job with creating native-looking widgets for both Android (Material) and iOS (Cupertino), but especially its Cupertino widgets do not always look exactly like their native counterparts.
Since Flutter is a Google product it should not be a surprise that it is actually easier to create a native-looking Material Design app for Android with Flutter than with React Native. Name a Material design widget you would want to use, and you will probably find it in the Material Widget catalog, with great theme and customizability options. The same cannot be said for React Native, where it is much easier to create a native-feeling iOS app.
While both React Native and Flutter strive to make it easy for developers to create butter-smooth apps running at 60 frames per second, it is not always a won battle for React Native.
Achieving high performance animations in React Native requires a deeper understanding of the React Native architecture, new users are more likely to run into performance issues and frame drops when trying to implement their own animations using the core Animated API.
Google is building first-class support for desktop environments in Flutter, which means that you will be able to develop for Windows, macOS, Linux, Android and iOS from a single codebase. For React Native, it is actually Microsoft that is contributing to the development of Desktop support for both Windows and macOS. Both are potential competitors to Electron — a browser-based cross-platform development platform for macOS, Windows and Linux developed by GitHub, a subsidiary of Microsoft.
Unlike React Native, Flutter does not have a separate (XML-based) template language. With Flutter everything you write is Dart — just regular class constructors and their properties.
Some people feel that JSX is more straightforward to work with because it is easier to distinguish hierarchy. This is a problem the Flutter and Dart teams at Google know about, which is why they are heavily investing in IDE plugins and Dart language features that make it easier to work with.
Flutter provides first-class IDE support with plugins for Android Studio and Visual Studio Code. It also has a YouTube channel where video’s explaining core functionality and widgets are posted frequently. I personally wish React Native would publish an API reference like the one available at api.flutter.dev, but all it has currently is (a sometimes out of date) documentation site.
Compared to React Native, Flutter has a superior development experience.