Introduction
When it comes to mobile phone operating systems, the two major players are iOS and Android, with a combined market share of 99.30% across the global market. Therefore the ultimate goal for maximum exposure is to build mobile software that runs on both these systems. Developing software for multiple systems offers a few challenges, notably the technical language that the application is written in, read and translated by the OS. Android developers will commonly use Java and/or Kotlin while iOS developers commonly develop in Swift and/or Objective-C, so developing a product for both platforms needs two applications built, two designs, two development teams and so on.
A solution that many have turned to since 2015 is React Native which acts as a translation tool, allowing a developer to write and maintain a single codebase that can create apps for iOS and Android and Windows 10.
Since 2017, an alternative for cross-platform programming is Flutter so let’s take a look at some of the differences:
Development team
As software in their own right, these two kits can namecheck some familiar brands in their development team. React Native is developed by Facebook/Meta, and Flutter by Google. Both companies can cause divisive opinions and so the development team behind the software can be an important consideration.
History
React Native has been around a couple of years longer than Flutter, which may not seem like a long time but in technology, things can move along rapidly. Alternatively, the difference could be seen as closer to four years as the React framework was initially released in 2013 and the working principles of React Native are virtually identical.
The global community is a key driver in pushing forward development and so one area of difference is React Native has a greater number of community-built extensions and plugins. Flutter also has an excellent community so chances are you will still be able to find the right solution for your needs.
Examples of apps you might know in 2021 that are built using React Native are Instagram, Skype and UberEats. Flutter examples are Alibaba, Google Pay and BMW Connect.
Popularity
There are some trends and benchmarks that can give an inkling into who is using the software but none will give a complete informative view as external factors need to be taken into account.
As of 10th November 2021, React Native has 99.2k stars on GitHub, the site where the development source code is shared. The site also shows stats for watchers (3.7k) and the number of people who have copied the source code for their own development use (21.4k forks):
In comparison, Flutter has 132k stars, 3.6k watchers and 19.4k forks. Whilst followers and forks are similar, stars (or likes) are significantly higher for Flutter:
We can also look at search terms, which if nothing else gives an indication of the rise of people searching for flutter since its initial release:
Programming language
React Native uses Javascript and JSX (a syntax extension for Javascript), so those developers who are familiar with JS will find themselves in comfortable surroundings, especially those who may have also used React.
Flutter apps are written in Dart, a programming language developed by Google which was probably unknown to most programmers outside of Google until the release of Flutter. Dart should be familiar and learnable for most developers with experience with OOP languages and C-style syntax, but the initial learning does remain an obstacle to overcome.
Dart is a strongly typed language that can help reduce errors or highlight unexpected results, but Typescript can, and should, be used with React Native for the same reasons.
Usage
React Native is a framework that includes a set of core components to allow you to get coding. React Native uses a bridge between the javascript code and the native platform, so pressing a button on a mobile device will be translated into the javascript method to handle the button press and your application’s logic. You will need to have Node installed on your machine, as well as Xcode for iOS builds or Java Development Kit (JDK) and Android Studio for android builds. Alternatively, Expo can be used to run your application on your own mobile device but running on simulators (which will be needed for testing performance on different screen sizes and devices).
Flutter is a software development kit (SDK) that includes all the tools needed to get started, such as Dart, dev tools and testing and a full set of widgets. It renders all widgets using its own engine and then compiles this completed canvas on the targeted native platform. You will further need to download Xcode for iOS simulation and Android Studio for android emulators.
Developing is similar with both and you will create your app with a hierarchical system of components or widgets. As your app adds more features you will be breaking down your components into smaller building blocks which, if correctly organised, can facilitate maintenance with relevant logic and UI contained in smaller packages that are easier to read.
Both use hot reloads, which allows developers to see changes reflected immediately in the browser or simulator, instead of having to restart or rebuild the application which boosts productivity in the development process.
Performance
As mentioned above, React Native uses a bridge between the native components to the javascript controlling the components. Flutter is compiled into the native code of the target platform and therefore sees slightly faster speeds by avoiding this bridge.
Limitations and differences
Whilst there is a single JS codebase, React Native components will be compiled in the operating system’s native code and so components can be rendered differently depending on the device. Whilst in many cases this may only be a visual difference that replicates the native look of the target platform, build testing should be done on all platforms to ensure your application looks and functions as expected.
In contrast, the Flutter canvas will replace native components and so you can be reassured your app will appear identical on all platforms. There may be some limitations on available widgets with React Native having more options for components and third-party addons.
Support and future
The popularity of mobile devices is not going away anytime soon so both products remain important for Facebook and Google to maintain and actively improve. React Native and Flutter both enjoy active support from the development teams and contributions from the wider community thanks to the open-source and free-to-use code.
Conclusion
It wouldn’t be a mistake to choose one over the other. While Flutter boasts improved performance speeds, the difference would not be noticeable with most applications. Similarly, while React Native may be easier to pick up for developers who have previously used Javascript and React, the Flutter learning curve remains low due to also using reactive style views and the Dart language seeming familiar to other OOP languages.
This also is not a comprehensive list of cross-platform development solutions but both React Native and Flutter offer impressive time/cost-efficient technology to get your product on mobile devices with ease.
