⚙️ What is React Native?
🛠 What is Flutter?
🏆 React Native vs Flutter: All-In-One Comparison
Cross-platform development is a king today. The growing popularity of mobile apps pushes developers and companies all over the world to come up with faster, easier and more efficient ways to deliver applications.
Earlier, one of the most popular solutions was hybrid app development.
But these days are gone.
Luckily, today we have more advanced technologies. In this article, we’ll compare React Native vs Flutter — two modern frameworks for cross-platform app development.
Flutter and React Native are two main frameworks for cross-platform development now
Our team has felt this switch, too. Having started as a native Android/iOS Team, we’ve eventually laid our eyes on React Native and now the last few projects in our portfolio are React Native projects. However, in this article, we’ll try to stay as impartial as possible 🙂
Let’s start our Flutter vs React Native comparison by taking a brief look at some general info regarding this framework.
By the way, that’s where the name “React Native” comes from. On the one hand, it embraced the advantages of web development from React. On the other hand, it works natively on both iOS and Android platforms and that’s where the “native” part comes from.
The idea behind React Native was to combine Web Development Experience with Native Mobile Performance
Here are a few other noticeable things regarding this framework:
Since 2015, many famous companies have used React Native in their app development.
📊Facebook Ads Manager
Except for these examples, the framework was also used by Skype, Tesla, SoundCloud, Vogue and many more.
Flutter is a UI toolkit by Google. You may also think of it as an SDK with tools and widgets for cross-platform development. With its help, you can create beautiful, natively-complied applications for mobile, web and desktop platforms.
If we break down Flutter into specific parts, these will be:
Big set of iOS and Android widgets
Heavily optimized, mobile-first 2D rendering engine
Many APIs for integration and unit tests
Effective command-line tools for building, testing and compiling apps
Plugin and Interop APIs to connect to 3rd-party SDKs
The official Flutter 1.0 release was announced on Google I/O in December 2018.
The funny thing is that cross-platform development wasn’t the main and initial aim of the Google Team. The top goal was to introduce a simpler and faster way to deliver Android apps than native Java/Kotlin development.
However, the idea quickly developed and today Flutter is mainly considered as an effective tool for cross-platform development not only for mobile but for web and desktop as well.
To get a clearer picture of what Flutter is, we recommend watching the following introductory video by Google:
A few key points about Flutter:
Since it’s quite a young technology, Flutter doesn’t have as many big companies in its showcase as React Native. Among the Flutter’s most well-known followers are Alibaba, AppTree and, of course, Google with its Google Ads app.
More apps built with Flutter can be found here.
Look for more Flutter app examples at itsallwidgets.com
However, our goal isn’t only to answer the question “What is React Native?” (or Flutter) but also to compare Flutter vs React Native for app development. So let’s get down to business!
To compare React Native vs Flutter we chose 9 criteria:
Let’s take a closer look!
Thus, React Native is a good option for In-House Web Teams that want to build mobile applications as well.
By the way, for many big companies, their experience with React Native started from such “web-to-mobile” experiments. For example, SoundCloud’s development team consisted of 2 JS developers and 1 iOS engineer.
The logic here is straightforward: the simpler installation, the better. Luckily, both frameworks handle the installation quite good.
To get started with React Native, developers should download & install the Node Package Manager (NPM), run the command and they’re all set!
To install Flutter, developers have to download the binary for their platform from Github unzip it and add it as a PATH variable.
Despite both frameworks lack one-liner installation through OS-specific package managers, the installation process is quite simple and fast so you shouldn’t face any troubles here.
Components are the “building blocks” to create UIs. This is an essential concept for any framework. Let’s see how different it is for Flutter vs React Native.
React Native is known for its capability to create easy-to-understand and easy-to-maintain components. Those components are supplied by Facebook out of the box.
React Native provides about 40 components that can be joined to create new, custom components.
Also, in React Native you may expect to see device access APIs and UI rendering. However, Facebook’s framework is quite heavily dependent on third-party libraries since it’s the only way to access most of the native modules.
Flutter’s components are called widgets. The concept itself will seem very familiar for web developers who have worked with React, Vue, Angular or Web Components. Today Flutter supports about 140 standard widgets.
An example of Flutter's widget
Flutter comes together with device API access, UI rendering, testing, navigation and lots of libraries. It may not eliminate the need to access third-party libraries but definitely reduces it.
The number of widgets — Flutter’s UI components — is also much bigger than in React Native.
Another difference is that React Native’s components are native components — so you have to communicate with the native platform. Flutter’s widgets, on the other hand, aren’t native components but they do look like native. Moreover, they’re so pixel-perfect that you can’t tell the difference.
UI implementation in React Native is done by the means of the native platform. In other words, instructions written in JS are sent to the native side where they're interpreted and drawn as native UI elements.
It also means that to communicate with native modules developers should write bridges between JS and native side. Due to this fact, React native UI elements don’t just look native but are actually native.
Things work a bit different in Flutter. It uses Skia graphics engine to draw the widgets which look the same way as native elements. Skia also doesn’t involve native code. That’s why this approach doesn’t require bridges or native calls, therefore UI is smoother in Flutter apps.
When working with Flutter, your UI components are pixel-perfect mockups of the native components. These copies are no different from their native originals so your users won’t feel any difference. Moreover, it makes you independent of the OS changes.
The bad news is that it makes Flutter apps 3-4 times larger than a native iOS or Android app. Despite this number is constantly shrinking, it will never become the same as for native apps. However, the same size issues are true for React Native as well.
How React Native works
Flutter, on the other hand, has more built-in components so developers can often omit writing native code. However, even if they need to apply some platform-specific customizations, Flutter provides a special tool for that also known as Platform Channels.
How Flutter works
Getting quick feedback on the code can save developers a lot of time. Here’s how both frameworks deal with this task.
In React Native you can use a few unit level testing JS frameworks. For snapshot testing tools like Jest may be used. However, for UI level or integration testing React Native provides no official support so you’ll have to use third-party tools like Detox or Appium.
On the contrary, Flutter officially provides many testing features that work at widget, unit and integration level. The docs are also great and very clear. For even more deep information on testing, you can check the Nevercode blog.
Moreover, both React Native and Flutter support a hot reload feature. It saves a lot of time for developers who test changes in UI. Instead of recompiling the app every time, they can see the UI changes on a testing device immediately.
Releasing apps to Google Play Market or App Store may be quite a complex and time-consuming task.
The React Native documentation relies on the manual process for deploying mobile apps. For build and release automation React Native developers (as well as Flutter ones) have to use third-party tools like fastlane.
The great advantage of React Native vs Flutter is over-the-air updates. With his feature, any changes to the JS code are immediately shown to users. Thus, you’re able to avoid the review process at App Stores and eliminate the need to upload the new version of the app to see new changes. To implement this feature you will have to use a tool like Microsoft CodePush or similar one.
Over-the-air updates make Facebook’s framework perfect for A/B testing and quick bug fixing. As of now, Flutter doesn’t support such a feature.
However, Flutter has as good tooling for build and release automation as React Native. In both cases, due to a strong command-line interface, developers can deploy apps just from the command line.
The framework is installed. What’s next? How do you set everything up and configure software installations? Clear documentation at this step may save a lot of time and help new developers quickly get on the track.
React Native’s guide begins with the step of creating a new project. They fairly assume that native developers already know how to configure Android Studio or Xcode and for the ones with the web background they offer to choose an easier way and use Expo tools.
Flutter pays more attention to this step. Platform and IDE setup are explained quite well.
Moreover, Flutter has a CLI tool also known as “Flutter doctor”. It checks the installed tools and tells a developer what he’s missing or needs to configure. When everything’s fine it will notify you that you’re all set and ready to start your first Flutter project.
Another advantage of Flutter vs React Native is detailed migration guides for developers who are switching to Flutter from other technologies (Android, iOS, React Native and so on).
This point in our comparison of React Native vs Flutter shows that Google’s framework tries to create a more friendly environment for new developers.
When we compare Flutter vs React Native communities, we should remember that Facebook’s framework was released 3 years before its competitor. So it’s quite obvious that React Native has a bigger community as of summer 2019:
40.6k members of React Native community
8.3k members of Flutter community
80.5k stars and 2,000 contributors
73.7k stars and 440 contributors
The React Native community holds many events and meetups all over the world
Flutter has significantly fewer events but the community keeps rapidly growing
Interesting fact: despite the React Native community on Facebook is 5 times bigger, Flutter community grows at the same pace (approximately +500 users a month).
Today Flutter and React Native are the top tools for cross-platform development. Both of them will reduce time-to-market and project costs but their efficiency may vary from project to project. Let’s sum up the key ideas of this Flutter vs React Native comparison to help you with the final choice:
So, the key conclusion here is that both frameworks are good; your task is to figure out which one is better for your specific project. However, it still may feel a bit challenging to choose between Flutter vs React Native for app development.
If you need a fresh and yet professional outside perspective from the team with solid React Native and some Flutter experience, drop us a line. We’ll help to pick the right framework for your project and can prepare a React Native estimate for it!
Was it helpful?
How to Build a Companion App for your IoT/BLE Device
How We at Stormotion Maintain Products After Release
How to Integrate BLE-Based Fitness Devices into your App
Our clients say
When I was working with Stormotion, I forgot they were an external agency. They put such effort into my product it might as well have been their own. I’ve never worked with such a client-focused company before.
Alexander Wolff, CPO