Flutter vs React Native – What to choose in 2023?
If you’re looking to develop apps faster and reduce costs with cross-platform development, but you’re unsure which technology to choose, this article is for you.
In this article, we compare the leading market players—Flutter and React Native—from the app owners’ perspective, so you can identify which framework best fits your app idea.
What you’ll find in this article
- Why we created this article and who wrote it for you?
- Flutter vs. React Native: In a nutshell
- Introduction to Flutter and React Native
- Pros and cons of Flutter
- Pros and cons of React Native
- The future of Flutter and React Native
- React Native or Flutter – 3 insights from developers and app owners
- Summary
Why we created this article
Cross-platform solutions are gaining popularity. Flutter and React Native are the two leading market players, but at Droids On Roids, we’ll build commercial apps for partners using the approach that best fits the solution – be it native, Flutter, or React Native.
Still, business owners always want to know the answer to several critical questions:
- Which framework best fits my project?
- Which solution can provide the fastest time-to-market for my app?
- Will my app be stable and user-friendly?
- Which solution is best if perfect design is my #1 priority?
We wrote this article to summarize the answers we share with our partners so that you can benefit from them, too.
We hope it helps you make a smart, conscious decision when it comes to choosing the best cross-platform solution for your app idea.
👉 You may also like: Native and Cross-platform App Development – All You Need to Know as an Entrepreneur
Who wrote the article?
It takes a certain level of experience to write about Flutter and React Native in sufficient depth – and to compare and contrast the two technologies.
As such, we asked two Droids On Roids developers to take on the task:
- Bartosz – Web and React Native Developer
- Damian – iOS and Flutter Developer (the author of Roadmap for Flutter Developers in 2021 – feel invited you to contribute)
These two build commercial apps for clients in Flutter and React Native every day. So, you can be sure the knowledge they’re about to share includes not only the theory but years of development experience as well.
We have also tested our understanding against popular articles in the developer community, referencing these sources to answer any questions. You can find a full list of their references at the end of this post.
Drive Your Product to Success – Free Guide for Digital Product Owners
Even the best team can’t deliver a successful product without proper guidance. If you own a digital product, our Ebook will be a perfect resource for mastering the fundamentals of successful product delivery.
GET FREE EBOOKFlutter vs React Native: In a nutshell
Flutter | React Native | |
---|---|---|
What is it? | A portable UI toolkit for building natively-compiled apps across mobile, web, and desktop* from a single codebase | A framework for building native applications using React |
Official release | December 2018, Google I/O | March 2015, F8 Conference |
Created by | ||
Free and open source | Yes | Yes |
Programming language | Dart | JavaScript |
Popularity | 120,000 Stars on Github (May 2021) | 95,300 stars on Github (May 2021) |
Hot Reload | Yes | Yes |
Native performance | Great | Great |
UI | Flutter apps look as good on the up-to-date operating systems as they do on older versions. Since they only have one codebase, the apps look and behave similarly across iOS and Android – but thanks to Material Design and Cupertino widgets, they can also imitate the platform design itself. How’s that possible? Flutter contains two sets of widgets which conform to specific design languages: Material Design widgets implement Google’s design language of the same name; Cupertino widgets imitate Apple’s iOS design. This means that your Flutter app will look and behave naturally on each platform, imitating their native components. | Application components look just like native ones (e.g. a button on an iOS device looks just like a native iOS button, and the same on Android). The fact React Native uses native components under the hood should give you confidence that, after any OS UI update, your app’s components will be instantly upgraded as well. That said, this can break the app’s UI but it happens very rarely. If you want your app to look near-identical across platforms – as well as on older versions of an operating system (as Flutter achieves) – then consider using third-party libraries (like this one). They will enable you to use Material Design components, in place of native ones. |
Sharing code | With Flutter 2 (announced in March 2021), we can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Firefox, Chrome, Safari, or Edge. Flutter can even be embedded in cars, TVs, and smart home appliances. (source). Perhaps the single largest announcement in Flutter 2 is production-quality support for the web. It can be used for:
| iOS and Android – but there are select libraries that allow you to use the same code to build iOS, Android, web, and Windows10 apps. You can also extract shared code in mobile, desktop, and web apps, to a separate repository; treat it as a separate project; then inject it in the same way as another dependency. This allows a developer to focus on writing code for a specific platform without having to consider compatibility with another one. |
Top apps made with this technology | Xianyu app by Alibaba, Hamilton app for Hamilton Musical, Google Ads app, Philips Hue, My BMW | Instagram, Facebook, Facebook Ads, Skype, Tesla |
Time-to-market | Typically much faster than native development. | Possibly as fast as development with Flutter. However… React Native uses bridge and native elements, so it may require separate optimization for each platform – a problem that widget-based Flutter doesn’t run into. It may make the app development with React Native longer. |
Competitive advantage |
|
|
When it is not the best fit | If… • Your app needs to support 3D Touch (for now, Flutter doesn’t support 3D – but it features on the Flutter team’s long-term roadmap) • The design of your app is platform-specific • Your app requires multiple interactions with an OS; or requires rare, little-known native libraries • You need a minimalistic UI, but rely on significant use of the phone hardware (e.g. an application that plays music, or only takes pictures) • You want to create an instant app (small-sized app) If your app sounds like any of the above, it’s probably better you choose native app development. Read more about these cases here >> | If… • Your app needs to handle less common, or ultra-specific tasks (like calculations) in the background • You require custom communication via Bluetooth (which can be tricky to implement using React Native) • You want to create an app for Android only In truth, if you want to build an iOS app and you know JavaScript, consider React Native – but if you want an Android-only app, it’s likely better to build natively with another team. Why? Right now, iOS has better support than Android. If your app sounds like any of the above, it’s probably better you consider choosing native app development. |
Introduction to Flutter and React Native
First, let’s cover the basic (yet essential) details about Flutter and React Native.
What is Flutter?
Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development Kit (SDK), complete with widgets and tools.
What’s Flutter for?
Flutter enables cross-platform app development.
It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS, Android), web, and desktop – all using a single codebase (source: official Flutter website).
Please note
Flutter’s desktop support
- When it comes to developing desktop apps with Flutter, you can compile Flutter source code to a native Windows, macOS, or Linux desktop app.
- Flutter’s desktop support also extends to plugins — developers can install existing plugins that support the macOS, Windows, or Linux platforms, or they can create their own.
- Please note: Flutter’s desktop support is available as a beta release. So, it still has feature gaps. However, developers can try a beta snapshot of desktop support on the stable channel or can keep up with the latest changes to the desktop on the beta channel.
Flutter for Web
Flutter’s web support delivers the same experiences on the web as on mobile. It means you can now build applications for Android, iOS, and the browser from the same codebase.
As we can read on the official Flutter website, Flutter’s web support is most useful in the following scenarios:
- Progressive Web Apps (PWA) built with Flutter
Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX. - Single Page Applications (SPA)
SPAs load once and transmit data to and from internet services. - Existing mobile applications
Web support for Flutter provides a browser-based delivery model for existing Flutter mobile apps.
A little more about Flutter…
- It’s free and open source
- It’s based on Dart – a fast, object-oriented programming language (Dart is now in its 2.14 version). It’s relatively new and is easy to learn – especially for experienced developers more familiar with Java and C#. What’s more, Dart supports sound null safety.
- The architecture is based on the very popular reactive programming (it follows the same style as React)
- It provides its own widgets, drawn from its own high-performance rendering engine – these are fast, attractive and customizable
- Thanks to the widget experience, Flutter apps have a great look and feel (while you can still create your own custom app design using readily-available UI elements that follow specific platform guidelines)
Who created Flutter?
A team at Google built Flutter.
But as an open-source project, both Google and the Flutter community contribute to its development.
How mature is Flutter?
A brief history of Flutter:
- February 2018, Mobile World Congress – First beta release of Flutter
- April 2018, Google I/O – Flutter beta 2 release
- May 2018, Google I/O – Flutter beta 3 release
- Flutter joins GitHub’s top 100 repos
- June 2018 – Flutter Preview 1 release
- September 2018 – Flutter Preview 2 release
- November 2018 — Dart 2.1 release
- December 2018, Google I/O – Flutter 1.0 release
- A crucial milestone for the technology – since Dec. 2018, Flutter has been considered as stable and ready for production
- February 2019, Mobile World Congress – Flutter 1.2 release
- May 2019, Mobile World Congress:
- Flutter 1.5 release
- Flutter for Web preview version
- Dart 2.3 release
- July 2019, Flutter 1.7 release
- September 2019, Flutter 1.9 release
- Flutter has been regularly developed and Google has been releasing its newer versions. Its newest version is 2.2.0 and this was announced during Google I / O in May 2021. See what’s new in Flutter 2.2.0 and why it’s awesome!
As you can see, Google shifted from the Flutter beta version to the final stages of stabilization for Flutter 1.0 at a rapid pace.
Better still, since the release of Flutter 1.0, the team hasn’t rested on its laurels. It has actively worked on making the toolkit stronger and more resilient – prioritizing enhanced stability, performance, and quality.
Moreover, Flutter 2.0.0 includes hundreds of changes in response to developer feedback.
Flutter has 188 active pull requests on GitHub (May 2021), which shows that the developer community uses it and continues to contribute to its improvement.
In summary, Flutter remains a fledgling technology.
Yet, given the pace of Flutter’s improvements – and its explosive popularity – we can say with confidence that it’s impressively stable and mature for its age.
What popular apps are made with Flutter?
- Xianyu app by Alibaba (App on App Store, App on Google Play) – Alibaba is one of the biggest e-commerce companies in the world
- Hamilton app (App on App Store, App on Google Play, Website) – official app for the Broadway Musical
- Google Ads app (App on App Store, App on Google Play)
- eBay Motors app (App on App Store, App on Google Play) – it’s a powerful tool for browsing, buying, and selling vehicles directly from consumers’ phones
- App on Google Play) – Google’s gaming platform, users can play games across laptops, desktops, and mobile devices
- Groupon (App on App Store, App on Google Play). Groupon uses Flutter to help hundreds of thousands of merchants track campaign performance, manage customer satisfaction, and get efficient support.
- Phillips Hue (App on App Store, App on Google Play) – Flutter brought intuitive controls to Philips Hue apps, allowing users to set the mood and sync their smart lights to their media.
- Topline app by Abbey Road Studios (App on App Store, App on Google Play)
- Reflectly (App on App Store, App on Google Play, Website)
For more examples of top Flutter apps, read this article > Top Apps Made with Flutter – 17 Stories by Developers and Business Owners
What is React Native?
React Native is an open-source mobile application framework that uses JavaScript.
What is React Native for?
React Native is an effective framework for:
- Cross-platform development
- Building mobile apps using JavaScript language
- Developing applications for both Android and iOS using a single codebase
- Using the same design as React
* Please note:
- Apps created using React Native are not mobile web apps. React Native uses the same fundamental UI building blocks as regular iOS and Android apps: this means that instead of building in Java, Kotlin, or Swift – you’re putting the same building blocks together, using JavaScript and React (source).
- React Native uses components that are analogous to widgets in Flutter.
To develop web and desktop applications with React Native, it’s best to use external libraries (as detailed in this paragraph).
Read also: What is React Native and How is it Used? Introduction for App Owners.
Who created React Native?
Facebook created React Native.
How mature is React Native?
A brief history of React Native:
- Summer 2013, Facebook hackathon – React Native started as an internal Facebook project
- January 2015, React.js Conference – React Native 1 Preview release
- March 2015, F8 Conference – Official Launch of React Native
- Facebook declares React Native, ‘open for use and available on Github’
Looking at the above, two things are for certain: React Native is older than Flutter, and it boasts a bigger community. Not to mention the fact that the Facebook team has had plenty of time to stabilize the API as well as focus on fixing any underlying issues.
And let’s not forget – Facebook is working on several other notable enhancements as well:
- Lean Core – reducing an app’s size by moving optional components/features to separate repositories (to add to an app as/when needed)
- TurboModules – for improved handling of native modules
- React Native Fabric – re-architected UI layer
What popular apps are made with React Native?
… as well as plenty more.
If you’d like to see other examples of apps made with React Native, check out the official React Native showcase.
Flutter – pros and cons
In this section, we briefly discuss the key pros and cons of Flutter.
If you want to read more, check out this article dedicated to the Pros and Cons of Flutter for App Owners.
✅ PROS of Flutter:
1. Hot Reload = fast coding
From a developer standpoint, Flutter offers more dynamic – and faster – app development. It is one of the greatest things about Flutter, appreciated by every top mobile app development company.
Developers can make changes to the codebase on-the-fly, and see them immediately reflected in the application. This is the so-called Hot reload feature, and it typically takes (milli-)seconds for changes to show.
The feature helps teams add features, fix bugs, and experiment with new ideas in an instant. Plus, Hot Reload is very handy when it comes to developer-designer collaboration.
That said – for a list of updates that require a full restart, see Hot Reload limitations.
2. One codebase, 2 mobile platforms (and more!)
With Flutter, developers can write just one codebase for two applications – covering both iOS and Android platforms.
Flutter is platform-agnostic as it has its own widgets and designs, which means you can have the exact same app on two platforms (while if you want to differentiate your apps that’s just as easily achieved).
Google is currently working on Flutter for Web, which you can see as a preview version. Once this goes live, a single codebase will cover Android, iOS, and web platforms.
3. Up to 50% less testing
Given you have the same application on both platforms, your Quality Assurance process will be much faster as you can test less.
We write roughly 50% fewer automated tests because we can create the same tests to run on both platforms, reducing the demands on our QA team.
That said, you’ll still have to run manual testing at a similar level as with native programming – as your QA specialists will have to check both apps on each platform, by hand.
4. Faster apps
Flutter apps perform smoothly and fast – without ever hanging or cutting while scrolling. Why?
Flutter uses the Skia Graphics Library. Thanks to this, the UI is redrawn each time when a view changes.
Most of the work is done on GPU (graphics processing unit); that’s why Flutter UI is smooth and delivers 60fps (frames per second).
However, you must be careful during the development so as not to cause redrawing of those elements of the view whose data has not changed.
Redrawing the whole view instead of just those elements that change, can affect the performance and speed of the application, especially if you need to reload the view often, e.g. in a stopwatch application.
5. Designs your users will love
Flutter doesn’t rely on native system components. Rather, Flutter has its own set of custom widgets, rendered and managed by the framework’s graphics engine (source). Users will see different UI components from typical native apps, but that isn’t necessarily a disadvantage.
Flutter apps have a particularly user-friendly UI: a crucial advantage for Flutter over React Native, stemming from super-attentiveness to the visual details. Flutter was created so that you could easily create your own widgets, or simply customize an existing widget.
Feel free to browse a catalog of Flutter widgets; or, click the links to see examples of Material Design widgets and Cupertino widgets.
6. Same app UI, even on older devices
Even new apps look the same on older iOS or Android systems, so you never have to worry about supporting older devices.
Android 5.1.1
Android 8.1.0
7. Perfect for MVPs
If you need to build an MVP (Minimum Viable Product) for your app – say, as a showcase for potential investors – Flutter is the perfect option, especially if time is short. Read also:
Check out the Flutter Gallery app, which includes a demo of Flutter’s core features, widgets, and vignettes.
Flutter Gallery
Flutter Gallery
Flutter Gallery
🔻 CONS of Flutter:
1. Size of the developer community(??)
Most people will tell you: a key advantage for React Native over Flutter is its more established, more experienced developer community. Further, in terms of programming languages, Dart isn’t as widely used as JavaScript, at least for now.
In truth, Flutter has a lot of catching up to do if it’s to match its ‘older brother’ – which is understandable. The community needs time to educate its audience and to gain more experience, which is typical for any new, young tool.
However, we don’t see it as a significant disadvantage, and that’s why we added the (??) in the header. It’s also worth noting that the Flutter community is growing exponentially. Plus, there’s phenomenal excitement around the toolkit.
Please note:
- Stack overflow tag trends show an intense increase in developer interest in Flutter
- On Udemy, there are 257+ Flutter courses (with about 1 410,000 course participants)
There are also 75 Dart courses (with about 608,000-course participants (May 2021))
React Native numbers are lower – about 866,000 students across 133 courses
- Flutter has 120,000+ stars on Github while React Native has 95,300+
To sum up, two years ago, Flutter had a smaller, less experienced community, and Dart is more niche than JavaScript.
Now, things are turning around. Current trends indicate that Flutter is outperforming its competitor in this area.
2. Libraries & support – impressive, but still not as rich as native development
Google’s support for Flutter is impressive, but Flutter is still quite new. This means you can’t always find the functionality you need in existing libraries, so your developers might need to build custom functionality themselves, which takes time.
Read more about this disadvantage here >>
3. Continuous Integration support
At the time of writing, Flutter lacks support for CI platforms like Travis or Jenkins. So, to achieve automatic building, testing, and deployment, your developers need to use and maintain custom scripts like this one.
That said, it is worth to note that:
- There is a new CI/CD system for Flutter apps – Codemagic – that was announced at Flutter Live 2018
- In January 2019, Bitrise announced the full-featured Flutter CI. At Droids On Roids we use Bitrise to build Flutter apps and it works so easily as in native app development.
4. Platform risk
Even though Flutter is open source, if Google decided to pull support for the project, it would spell disaster.
That said since the Google team released the Beta version of Flutter, it has only ramped up its efforts, as illustrated by Flutter’s prominent role during Google IO ’19, alongside the recent Flutter Live event.
At the current point in time, we cannot imagine a world where Google walks away from Flutter.
5. App’s size
Applications written in Flutter are bigger than native ones. Check out the article Comparing APK sizes. However, the Flutter team is working on reducing the size of apps made with Flutter.
React Native – pros and cons
✅ PROS of React Native:
1. Hot Reload = fast coding Fast refresh = fast coding
Essentially the same feature as Flutter.
Hot Reload speeds up the development process by allowing a developer to inject new code directly into a running app. So, a developer can see changes instantly, without rebuilding the app.
Hot Reload also retains the application’s state, avoiding the risk of losing it during a full reload (a critical benefit in the context of state-based frameworks) – speeding up the mobile app development process even further.
To improve the developer experience with hot reloading, the React Native team includes in 0.61 version a new feature called fast refresh that unifies live and hot reloading. It’s more resilient to typos and mistakes compared to the previous version. You can read more about fast refresh here.
2. One codebase, 2 mobile platforms (and more!)
Exactly the same as Flutter: write a single codebase to power 2 apps – covering both Android and iOS platforms.
Better still, JavaScript gives you a leg up when writing cross-platform applications by sharing code with web apps. This is accomplished by creating abstraction components that you can compile to target platforms.
See below for example libraries that allow you to simultaneously create code on platforms other than iOS and Android (including web and desktop apps):
- React Native for Web – supports Android, iOS, and web (Twitter used this to create Twitter Lite)
- ReactXp – developed by the Skype Team to support Android, iOS, and web; plus, works on Windows 10 (UWP)
- react-native-windows – developed by the Microsoft team, supports all the devices supported by Windows 10 ( PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc.)
Side Note:
Bartosz (our React Native developer) sees things a little differently to most, and so prefers an alternative approach.
If you compare a web desktop app, a mobile web app, and a native app, you can assume they share the same business logic – but they likely need a specific UI that fits distinct user requirements.
So, why not:
- Extract shared code to a separate repository;
- Treat it as a separate project;
- Inject the code in the same way as any other dependency?
Working this way allows developers to focus on writing apps to an actual platform – without having to consider cross-platform compatibility.
Watch Ben Ellerby’s presentation about the approach and if you like idea of creating abstraction over platform, check out Radek Pietruszewski’s presentation as well.
3. It uses a wildly popular language – JavaScript
React Native uses JavaScript: a programming language that many developers know well (whereas Dart is still not so widely known or used). And if you’re a developer who prefers statically-typed programming languages, you can even use TypeScript – a JavaScript subset.
4. Developer freedom of choice
React Native lets developers build cross-platform apps; no more, no less.
The advantage is that React Native allows the developer to decide precisely what solutions they want to use; both according to the project’s requirements as much as the developer’s preferences.
Say, if a developer needs to decide how to handle the global state (how to store and manage the data that’s used in many components in the app), choose a router library, or choose between JavaScript and TypeScript – they can decide if they’d prefer to use a custom UI library, or write their own.
5. Relative maturity
The official React Native release was more than 5 years ago, so the Facebook team have had plenty of time to stabilize the API, as well as focus on fixing issues and solving problems.
Now, they’re working on a few exciting improvements – like reducing app size.
6. An active – and vast – community
React Native has a massive developer community. Not just that, but there are countless tutorials, libraries, and UI frameworks that make it easy to learn the technology – as well as quick and easy to develop with it.
And if you compare repositories focused on gathering articles, tools, and materials about specific technologies, React Native is much better placed than Xamarin, Flutter or Ionic (source: Awesome-Flutter, Awesome-ReactNative, Awesome-Ionic, Awesome-Xamarin).
What is more, React Native is part of the “React family”. While many of its libraries are platform agnostic (like Formik, React Router, styled components), which means they work across both web and mobile.
- It’s also worth calling Expo to your attention – the React constitutional framework that simplifies access to native APIs – which has ready-made solutions for typical mobile features (e.g., push notifications).
- A second library worth mentioning is AWS Amplify: a solution that simplifies integration with AWS features by covering authentication, storage, push notifications, and analytics.
7. Easy to learn for React developers
This advantage in our list is highly targeted at React developers. If you have a background in web development and already use popular React solutions, you can easily get to work with React Native, without having to learn new libraries. You can use the same libraries, tools, and patterns.
8. Up to 50% less testing
We write roughly 50% fewer automated tests because we can create the same tests to run on both platforms, reducing the demands on our QA team. It looks the same as in Flutter app development – we described it here.
🔻 CONS of React Native
1. It isn’t really Native
Like any cross-platform solution, neither the UI experience nor performance will be the same as in native apps – just close to them.
But still, it is easier to achieve a “native feeling” with React Native than with Flutter. If you want your Flutter app to have native components, it will require additional work.
2. Fewer components out of box
React Native supports only basic components out of box (many of them are adaptive to a platform out of box, like button, loading indicator, or slider).
As we said in this paragraph, there are outside repos with many additional components for React Native. A developer can use them in a project but that requires additional effort and time.
On the other hand, Flutter is designed to support Material Design out of box, so the framework supports much more widgets. It saves time. A developer using Flutter can create most of the views with pre-made widgets which are easily customizable and cross-platform consistent.
3. Developer freedom of choice
…both a curse and a blessing.
Once a developer has created a new project, they then need to decide which navigation package – as well as which global state management – to use.
It can take a lot of time to understand the nuances of every solution, and ultimately, to decide upon the best ones to use for the project.
4. Lots of abandoned packages
React Native boasts an enormous number of libraries. Unfortunately, too many of them are either low quality; or have been abandoned altogether.
Dan Abramov advises checking the number of issues and frequency of commits in a repository to prevent using abandoned packages.
Read more about the problems and limitations of the current shape of React Native in this summary of his discussion of “What do you dislike about React Native?”
5. Fragile UI
The fact that React Native uses native components under the hood should give you confidence that, after every OS UI update, your app components will be instantly upgraded, as well.
That said – this can break the app’s UI but it happens very rarely.
What’s worse, updates can become even more dangerous if they cause certain changes in the Native Components API. The good news? This kind of event happens very rarely.
Whereas when it comes to Flutter (thanks to the way the framework recreates native components on their own), the app UI is a lot more stable.
6. Apps are bigger than native ones
Applications written in React Native must be able to run Javascript code (JavaScript Virtual Machine). Android doesn’t have this functionality by default – meaning applications need to include a library that supports JavaScript code, resulting in apps that are bigger than their native Android counterparts.
iOS apps made with React Native don’t this problem, but they are still usually bigger than native ones. The good news? As we mentioned before, React Native team is working on reducing their apps’ size.
Read more about the Pros and Cons of React Native Development for App Owners in 2021.
Predicting the future: Flutter & React Native
More and more companies are attracted by Flutter. After all, we’re witnessing monthly improvements in the Flutter SDK as Google continues to refine its tool. Plus, the community is always helpful and enthusiastic. What’s more, Flutter enables us to create not only mobile applications but also apps for the web and desktop (Flutter’s desktop support is available as a beta release on the stable channel).
Putting it all together – and given leading companies like Alibaba are already using Flutter – the future looks promising for the toolkit.
As for React Native – well, Facebook is currently focusing on a large-scale re-architecture of the technology.
The team is doing its level best to improve support for both React Native users and the wider community. And thanks to this, the community can now easily suggest changes to the framework’s core functionalities through an RFC process that uses a dedicated GitHub repo.
The actual results of such architecture improvements are:
- Hermes – an open-source JavaScript engine optimized for mobile apps that improves time to interaction, and lowers app size and memory utilization
- Big changes in the 0.60 version (find the full summary here):
- it’s easier to manage iOS dependency by using the most popular dependency manager CocoaPods by default,
- you can migrate React Native to AndroidX,
- you can extract optional features as part of lean core process.
Creating an open environment to discuss React Native is a significant step. It’s both a sign of ongoing improvement as well as a signal for the technology’s bright future.
Given React Native has such a stable position in the marketplace – and is on a trajectory of continuous development – it’s unlikely we’ll see the toolkit left in the dust any time soon. Read about the long-term vision for React Native in this article.
Still, Flutter is an imposing competitor to React Native.
Read also: Outsourcing Software Development – Benefits & Risks for App Owners
React Native or Flutter? 3 insights from developers & app owners.
We recently wrote an ebook covering the best Flutter app examples – including key insights from 17 different app owners and developers who are actively working with the Flutter framework.
Below, you’ll find a selection of quotes that cover the Flutter vs. React Native debate.
- For me, Flutter was harder to learn than React Native. Mainly because React Native uses JavaScript (which is a familiar language for me) whereas I was new to Dart – the language used by Flutter. So, if you are new to Dart and trying to learn Flutter, it will take more time than learning React Native. But the opposite is also true – if you have experience in Dart, then learning Flutter will be a walk in a park.
- The components in React Native are pretty basic, so if you need anything extra, considerable effort is required when styling. Only a handful of components are adaptive to the platform, while most of the time you have to use a different component for both iOS and Android; or, style it differently.
On the other hand, with Flutter, everything is a widget. And the widgets are based on Material Design, making them easily customizable. Most of the widgets are adaptive, and you can use the same widget across both Android and iOS.- When it comes to performance, Flutter has the upper hand as it’s compiled to ARM or x86 native libraries, which makes it really fast. React Native isn’t compiled to native code, and it still has the JavaScript layer, making it less performant than Flutter.
React Native is the closest competitor to Flutter. I like it as it sets the standard for cross-platform native development.
That said, our experience with it has surfaced a few issues.
- React Native is just a wrapper over native methods, so it requires a bridge to translate those calls into a native API; this becomes a bottleneck when you have a lot of native calls happening. There are ways around this, but with Flutter, you don’t ever have to worry about the issue as the view layer is rendered like a game would be – and as all components are designed by Flutter engineers, there are fewer native calls to the bridge.
- React Native components aren’t always customisable enough as they are just wrappers over native views. So, say someone decided not to wrap a certain method, then you won’t have access to it (for instance, dashed borders around a view don’t work) – while new components released by Google and Apple can take a long time to become available on React Native.
- Bugs on React Native have also started to take a lot longer to get fixed. The dashed border issue, for one; as well as a separate issue supporting various build flavours etc. Most companies running React Native in production, run a custom fork to fix bugs that aren’t fixed upstream. The Flutter devs are more proactive, and you can expect fixes fast. We ended up spending most of our time looking for issues in React Native documentation, then figuring out why things weren’t working the way they should.
The issues we found sent us searching for something better – fortunately, Flutter was just around the corner.
The main benefit of Flutter over React Native (and native, in general) is the lack of platform constraints. Flutter isn’t muzzled by the platform UI because it doesn’t use it; it renders everything by itself. This frees you to build the best UX without compromise – and it’s the primary difference between Flutter and React Native. Read more here >>
Summary
When to choose React Native, and when to choose Flutter
Delivering projects on time is one of the most critical aspects of mobile and web app development.
The cross-platform nature of both React Native and Flutter reduce time-to-market. Plus, their third-party libraries and ready-to-use components make it more efficient to use them to build your app.
Better still, Flutter and React Native offer more than just speedy development, they can reduce project costs as well.
…and these are the key reasons you should consider either framework for your project. But which solution offers the fastest development time? Or fits your app idea best?
Well, that depends on the specifics of your project and the balance of your team’s skills.
- Do your developers know Dart? If yes, then programming with Flutter will be a walk in the park.
- Are your developers fluent in JavaScript? If yes, then React Native seems the logical choice.
- Do you want to build your app’s GUI using native UI components? If yes, choose React Native.
- Is brand-first design your priority? If yes, we suggest Flutter fits the bill.
Remember that each application is different, so you must consider each one on its own merits. It’s always worth discussing your project with an experienced team of developers: people capable of considering the different approaches, with a varied enough skillset when it comes to cross-platform development – as if you seek the advice of programmers who know just one framework, they’ll likely steer you to use that tool.
If nothing else, take confidence from this: both Flutter and React Native are very good technologies. They benefit from huge popularity and enduring trust.
Read also: 5 Legal Issues to consider in Mobile App Development.
Each of the frameworks can help your application spread its wings and fly. We’ll keep our fingers crossed for you – best of luck with your next steps!
Useful links & resources
Hire experienced Flutter Developers for your startup or enterprise and speed up your development
Our brand promises: Predictable delivery, no surprises – Focus on the goals – Delivering at speed
After working on Flutter for more then a month now i fell in love with it it’s easy to learn OOP and has same performance as native and not to mention you have control over every inch of the screen you can do amazing things designs nobody ever has done ? i use to use Ionic which is good too but Flutter is way better in my opinion the Performance look and everything feels better and development is very fast Flutter will become more and more know and community will grow very quick i am sure flutter will end up Like Angular !!! good luck coding
Is that a good thing?
It’s Amazing thing Angular is one of most popular JavaScript Framework it is good Framework to learn you can make amazing web applications and many other good things with it , And Flutter is Amazing For Fast development in Mobile Applications for IOS or Android and in near future everyone will want to learn it because there is demand and it is great tool to have in your toolbox
I don’t know about Flutter, but React Native is a fucking nightmare once it breaks. Expect to find a hundred people with your problem but none of their solutions might work for you. If you are forced to update a RN app as part of your work prepare for never ending headaches as the application might work perfectly under Android yet refuse to even run on IOS because of bundling or library issues.
Nice article! I’m was searching such detailed and insightful article before starting cross platform development for mobile. Though have good 10 years experience in native iOS, this is the time for me to explore cross platform development with…Flutter!
Excellent summary, thank you.
I was going to build an app in React Native but really struggled with the navigation and had constant tooling issues.
Not to mention the dependency of it on so many 3rd party, poorly maintained repositories.
Flutter is a better solution for my needs.
I have gone through your article, it was very interesting & informative.React Native is a popular cross-platform framework used for mobile app development, and it has several advantages that make it a great choice for building mobile applications. I have some points to include in your article.
1.Cross-platform development
2.Faster development time
3.Large developer community
4.Native-like performance
5.Customizable components
React Native is an excellent choice for mobile app development, as it provides a faster, cost-effective, and reliable way to build high-performance mobile apps for both iOS and Android platforms.