A few years ago, building a native mobile app for both iOS and Android required you to write code for each separate operating system (OS). You needed people who could write either Java or Kotlin for Android and people who could write Swift or Objective-C for iOS.
Companies usually had a team specialized in iOS and another team specialized in Android. This would often lead to subtle or sometimes not-so-subtle differences between what was supposed to be the same app on different devices.
As mobile apps have become increasingly important, companies started looking for a way to improve this process; to make it more efficient. After all, wouldn't it be better if we only needed to develop our app once? If we could have one programming language and one team instead of two for both iOS and Android?
The release of Facebook's React Native in 2015 and Google's Flutter in 2017 has made this possible. They're both popular cross-platform frameworks that allow companies to have one mobile app codebase for both iOS and Android. But how do both frameworks differ? Is one significantly better than the other, or does it depend on the context? Read on to find out...
React Native uses JavaScript as its programming language. Flutter uses a language called Dart, which is a strongly typed mixture of JavaScript and Java. This should immediately give React Native a leg up on Flutter, because nearly all web developers know JavaScript. A company with web developers that have some mobile experience could use React Native to write a mobile app.
That's true to a degree, but it's not the full truth either. JavaScript was written for the web, not for mobile applications. It happens to work very well for mobile, but it's not flawless. There are some awkward quirks that you'll need to find workarounds for, particularly when it comes to using certain JavaScript APIs.
Flutter's language Dart also wasn't invented for mobile apps, but at least it's managed by Google, the developer of Android. It's not 100% perfect either, but you'll need fewer workarounds than with React Native. Additionally, because Dart is strongly typed, it allows Flutter to compile differently than React Native. But more on that later.
React Native comes with a number of built-in components. The equivalent to a component is called a widget in Flutter, and there are many more widgets in Flutter than components in React Native. Anything that's a bit more advanced in React Native will likely have to be built by you.
Flutter's widgets, however, while there are more of them, aren't really adaptive. And they embrace material design. This means that your app will look entirely equal on both operating systems. If you want to make an app that's different on iOS compared to Android, you'll have to make those changes manually.
This is less the case with React Native. While it allows you to write code once, you'll also need to figure out which operating system you'll be running the code on, and load different components depending on the OS. It doesn't automatically adjust the style of the component.
So here, you'll need to consider whether you want your app to be exactly the same on both operating systems or whether you want to differentiate between the two, and possibly take advantage of the unique features of each OS.
React Native has been around for longer than Flutter and has a much richer ecosystem as a result. Additionally, because of its use of JavaScript, you can use some (but not all) JS libraries. React Native is also used by big companies such as Facebook (of course), Walmart, Uber, Tesla, and Skype.
But don't discard Flutter either. Google is heavily investing in it and using it internally too. New packages are constantly being released, and the framework has quite a good bit of hype pushing it forward.
Let's start by saying that both frameworks are fast enough to satisfy the requirements of nearly all companies. This being said, there's an interesting difference in how both frameworks compile their code.
Considering JavaScript isn't a strongly typed language, it would be really hard for it to compile into Java or Objective-C. Instead, the React Native architecture is made of both native code and a JavaScript virtual machine.
React Native uses Objective-C APIs to render to iOS components and Java APIs to render to Android components. A bridge communicates between the native and the JavaScript thread.
(this post goes into a lot more detail about React Native's internals)
Flutter makes it less complex. It compiles Dart to a C/C++ library. This is consumed faster by native code than a bridge with React Native is. As a result, performance in Flutter tends to be somewhat better.
React Native is a more mature framework with a bigger community. The fact that it uses JavaScript also means you can handle iOS, Android and a web app, which is perfect for small projects.
This being said, while Flutter is still young, there is a lot of positive feedback coming from developers. Google seems set on pushing its framework, and it's gaining popularity as a result.